[三万字教程]基于Hexo的matery主题搭建博客并深度优化

Github hexo matery cdn seo
hexo
发布日期:   2021-09-10
更新日期:   2021-11-14
文章字数:   31.4k
阅读时长:   135 分
阅读次数:  

All in one 一站式Hexo配置优化教程！

  • 如果你遇到了什么问题，搜索本文，你很可能有收获！ CtRL + F
  • 光临博主的博客 夜法之书
  • 本文就教你搭建一个美观实用的博客系统，步骤极尽详细！
  • 本文中提到的大量特性，已经被博主提交到matery主题develop分支，提交记录见Commit。所以下面很多特性以及不用自己修改了，可以直接使用。

为什么写博客

Hexo入门

Docker 版 hexo 环境一键部署

博主开源定制，推荐使用！省去您大量环境配置时间。

使用推荐Docker来搭配本文，阅读使用，将更省事，方便，快捷。hexo环境一键搞定！

Docker一键安装

docker create --name=hexo \
-e HEXO_SERVER_PORT=4000 \
-e GIT_USER="17lai" \
-e GIT_EMAIL="17lai@domain.tld" \
-v /mnt/blog.17lai.site:/app \
-p 4000:4000 \
bloodstar/hexo

ssh key 部署

Docker会自动随机生成ssh key 在 /app/.ssh 目录下面。自动部署请把ssh key添加到github 等平台。

Github详细教程

  1. 将SSH 公钥复制到剪贴板。 …
  2. 在任何页面的右上角，单击您的个人资料照片，然后单击Settings（设置）。
  3. 在用户设置侧边栏中，单击SSH and GPG keys（SSH 和GPG 密钥）。
  4. 单击New SSH key（新SSH 密钥）或Add SSH key（添加SSH 密钥）。

进入docker

docker exec -it hexo bash

然后就可以正常运行hexo的各种命令了，是不是非常简单？ 快来试试吧。

用户自动运行脚本

用户可以在这里添加自动配置，自动安装插件，等各种启动docker运行的命令。

vi /app/useRun.sh

Hexo 通用简明教程

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

  • Node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)
  • Git
  • nmp

安装

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

安装以后，可以使用以下两种方式执行 Hexo：

  1. npx hexo
  2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用： hexo
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

安装淘宝镜像， 加NPM

npm config set registry https://registry.npm.taobao.org

安装CNPM

npm install -g cnpm --registry=https://registry.npm.taobao.org

升级

后期需要升级的化，进入 blog 目录，先检查更新:

$ npm outdated
Package                  Current  Wanted  Latest  Location
hexo                       3.9.0   3.9.0   4.2.0  hexo-site
hexo-deployer-git          1.0.0   1.0.0   2.1.0  hexo-site
hexo-generator-archive     0.1.5   0.1.5   1.0.0  hexo-site
hexo-generator-category    0.1.3   0.1.3   1.0.0  hexo-site
hexo-generator-feed        1.2.2   1.2.2   2.2.0  hexo-site
hexo-generator-index       0.2.1   0.2.1   1.0.0  hexo-site
hexo-generator-tag         0.2.0   0.2.0   1.0.0  hexo-site
hexo-renderer-ejs          0.3.1   0.3.1   1.0.0  hexo-site
hexo-renderer-marked       0.3.2   0.3.2   2.0.0  hexo-site
hexo-renderer-stylus       0.3.3   0.3.3   1.1.0  hexo-site
hexo-server                0.3.3   0.3.3   1.0.0  hexo-site

修改 package.json 文件，基于 Latest 列内容更新版本号，然后更新并检查版本号：

$ npm install --save

# 检查版本号
$ hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
......

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

启动网页服务

此时，通过 hexo s 命令即可在本地启动您的博客站点了。

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

接下来将安装主题，配置博客托管平台，实现一键发布并刷新 CDN 缓存。

hexo目录结构说明

在执行过Hexo deploy命令之后，目录结构新增了.deploy_git，public，.gitignore，如下：

 $ tree -L 2
.
├── .deploy_git
├── node_modules
├── public
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   ├── _posts
│   ├── _drafts
├── themes
├── _config.yml
├── db.json
├── package.json
└── package-lock.json
_config.yml

用来配置博客相关的参数，初始化时自动创建。具体参数设置，可参照 Hexo 配置 文档。

node_modules 和 package.json

都是在初始化时自动创建。

  • node_modules用来存储已安装的各类依赖包。
  • package.json用来查看 Hexo 的版本以及相关依赖包的版本。

Hexo 会默认安装：

  • hexo：主程序
  • hexo-deployer-git：实现 git 部署方式
  • hexo-generator-archive：存档页面生成器
  • hexo-generator-category：分类页面生成器
  • hexo-generator-index：index 生成器
  • hexo-generator-tag：标签页面生成器
  • hexo-renderer-ejs：支持 EJS 渲染
  • hexo-renderer-marked：Markdown 引擎
  • hexo-renderer-stylus：支持 stylus 渲染
  • hexo-server：支持本地预览，默认地址 localhost:4000

新安装的依赖包，也会保存在node_module文件夹下。

scaffold

模板文件夹，初始化时自动创建。包含page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。

themes

主题文件夹，初始化时自动创建。每一个主题，都有一个单独的文件夹。默认主题为 landscape。

source ， public 和 .deploy_git
  • source：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各种页面（分类、关于页面等）。
  • public：将 source 文件夹里的 Markdown 文档，转换成 index.html。再结合主题进行渲染，就是我们最终看到的博客。
  • .deploy_git：将 public 文件夹的内容提交到 Github 后生成，内容与 public 文件夹基本一致。

这三者的关系大致是：source -> public -> .deploy_git

  • 执行hexo generate，根据 source，更新 public。
  • 执行hexo deploy，根据 public，更新 .deploy_git。

常用命令

指令说明

  • hexo server #启动本地服务器，用于预览主题。Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。

  • hexo server -s #以静态模式启动

  • hexo server -p 5000 #更改访问端口 (默认端口为 4000，’ctrl + c’关闭 server)

  • hexo server -i IP地址 #自定义 IP

  • hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的 public 文件夹

  • hexo g #生成静态网页 (执行 $ hexo g后会在站点根目录下生成 public 文件夹, hexo 会将”/blog/source/“ 下面的.md 后缀的文件编译为.html 后缀的文件,存放在”/blog/public/ “ 路径下)

  • hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)

  • hexo init 文件夹名称 #初始化 XX 文件夹名称

  • npm update hexo -g#升级

  • npm install hexo -g #安装

  • node-v #查看 node.js 版本号

  • npm -v #查看 npm 版本号

  • git --version #查看 git 版本号

  • hexo -v #查看 hexo 版本号

简写指令

hexo n "我的第一篇文章"` 等价于 `hexo new "我的第一篇文章"` 还等价于 `hexo new post "我的第一篇文章"
hexo p` 等价于 `hexo publish
hexo g` 等价于 `hexo generate
hexo s`等价于 `hexo server
hexo d` 等价于 `hexo deploy
hexo g -d`等价于`hexo generate --deploy

注: hexo clean 没有 简写, git --version 没有简写

Hexo基础配置

下载主题

hexo-theme-matery 是一个采用 Material Design 和响应式设计的 Hexo 博客主题，点击 这里 可以查看示例效果。点击 这里 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到 Hexo 的 themes 文件夹中即可。

Docker环境命令

git clone https://github.com/blinkfox/hexo-theme-matery.git /app/themes/matery;

切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

_config.yml 文件的其它修改建议

  • 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
  • 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
  • 如果是中文用户，则建议修改 language 的值为 zh-CN。

新建主题必备about、tags、404等页面

新建分类 categories 页

categories 页是用来展示所有分类的页面，如果 source 目录下还没有 categories/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面，如果 source 目录下还没有 tags/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "tags"

编辑刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建留言板 contact 页

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

新建友情链接 friends 页

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "https://blog.17lai.site/favicon.png",
    "name": "夜法之书的Blog",
    "introduction": "嵌入式，Linux Kernel&Driver, PT, Docker, Nas等等",
    "url": "https://blog.17lai.site",
    "title": "前去学习"
},{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果 source 目录下还没有 about/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "about"

编辑刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建404页

新建一个404.md文件

在hexo的souce文件夹下创建一个404.md，之后输入如下内容：

---
title: 404
date: 2019-11-23 21:10:10
type: "404"
layout: "404"
---

新建404.md

然后hexo g生成页面中就有404。只是页面较丑。

404页面美化

下载404特效

点击下载代码:点我去代码出处

移植
放入js文件到主题中

将下载的压缩包解压，会发现里面有两个js文件和一个html页面，重要的就是js文件，将文件移植到主题的source文件的libs文件夹下，需要自己创建一个文件夹，我给文件夹取的名字叫做404。

导入404 js

因为该主题的js文件都是写_config.yml文件里面的，为了规范，也需要将文件的路径写到该文件夹下

如下，之后导入js文件的时候就可以使用404bodymovin和404data来代替了

修改主题_config.yml文件

编辑404.esj
<style type="text/css">
    /* don't remove. */
    .page404-cover {
        /* height: 75vh; */
        height: 88vh;
    }
 
    #svgContainer {
      width: 100%;
      height: 100%;
      background-color: white;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
</style>
 
 
<script src="<%- theme.libs.js.my404bodymovin %>"></script>
<script src="<%- theme.libs.js.my404data %>"></script>
 
<div class="bg-cover pd-header page404-cover">
    <div id="svgContainer"></div>
 
    <script type="text/javascript">
        var svgContainer = document.getElementById('svgContainer');
        var animItem = bodymovin.loadAnimation({
          wrapper: svgContainer,
          animType: 'svg',
          loop: true,
          animationData: JSON.parse(animationData)
        });
    </script>
</div>

现在就移植成功了，使用下面命令上传，之后输入一个错误的页面就可以查看到了

hexo cl && hexo g -d

Tips: 不要再本地试验，本地的时候输入错误的页面不会显示404页面的。

新建友情连接 friends 页（可选的）

friends 页是用来展示友情连接信息的页面，如果 source 目录下还没有 friends/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "friends"

编辑刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[
  {
    "avatar": "https://www.lixl.cn/medias/avatar.jpg",
    "name": "悟尘记",
    "introduction": "人生就是一场修行，上善若水，厚德载物。",
    "url": "https://www.lixl.cn/",
    "title": "前去参观"
  },
  {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去学习"
  },
  {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
  }
]

菜单导航配置

配置基本菜单导航的名称、路径url和图标icon.

  • 1.菜单导航名称可以是中文也可以是英文(如：Index或主页)
  • 2.图标icon 可以在Font Awesome 中查找
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book

二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

  1. 在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
  2. 在children下创建二级菜单的 名称name,路径url和图标icon.
  3. 注意每个二级菜单模块前要加 -.
  4. 注意缩进格式
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Music
        url: /music
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 title 和 date 的值。

配置选项默认值描述
titleMarkdown 的文件标题文章标题，强烈建议填写此选项
date文件创建时的日期时间发布时间，强烈建议填写此选项，且最好保证全局唯一
author根 _config.yml 中的 author文章作者
imgfeatureImages 中的某个值文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
toptrue推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hidefalse隐藏文章，如果hide值为true，则文章不会在首页显示
coverfalsev1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg无v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password无文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toctrue是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjaxfalse是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary无文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories无文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags无文章标签，一篇文章可以多个标签
keywords文章标题文章关键字，SEO 时需要
reprintPolicycc_by文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
  2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供使用：开源中国在线工具、chahuo、站长工具。

以下为文章的 Front-matter 示例。

最简示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
---

最全示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-12-30 09:25:00
author: 17lai.site
img: /medias/cover/hexo.jpg
top: true
cover: true
coverImg: /medias/cover/hexo.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Hexo
keywords: Hexo GitHub blog
tags:
  - Hexo
  - Blog
  - GitHub
---

新建文章模板修改

首先为了新建文章方便，我们可以修改一下文章模板，建议将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
author: 
img: 
coverImg: 
top: false
cover: false
toc: true
mathjax: false
password:
summary:
tags:
categories:
---

这样新建文章后 一些Front-matter参数不用你自己补充了，修改对应信息就可以了。

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: "preprocess" # realtime/preprocess
  theme: "tomorrow"
  line_number: false # default false
  custom_css:

添加文章搜索功能

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱的配置，可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改需要的社交链接地址，增加链接可参考如下代码：

<a
  href="https://github.com/blinkfox"
  class="tooltipped"
  target="_blank"
  data-tooltip="访问我的GitHub"
  data-position="top"
  data-delay="50"
>
  <i class="fa fa-github"></i>
</a>

其中，社交图标（如：fa-github）可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供参考：

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，可以替换成你的的微信和支付宝的打赏二维码图片。

配置文章基本信息

new_post_name: :title.md   # 新文章的文件名称
default_layout: post       # 预设布局
auto_spacing: false        # 在中文和英文之间加入空格
titlecase: false           # 把标题转换为 title case
external_link:             # 在新标签中打开链接
  enable: true             # 在新标签中打开链接
  field:                   # 对整个网站（site）生效或仅对文章（post）生效
  exclude:                 # 需要排除的域名。主域名和子域名如 www 需分别配置	[]
filename_case: 0           # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false       # 显示草稿，默认为：false
post_asset_folder: true    # 启动 Asset 文件夹
relative_link: false       # 把链接改为与根目录的相对位址
future: true               # 显示未来的文章
highlight:                 # 代码块的设置
  enable: false            # 开启代码块高亮
  line_number: false       # 显示行数
  auto_detect: false       # 如果未指定语言，则启用自动检测
  tab_replace:             # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

配置代码高亮及样式

highlight:                      # 代码块的设置
  enable: false                 # 开启代码块高亮
  line_number: true             # 显示行数
  auto_detect: false            # 如果未指定语言，则启用自动检测
  tab_replace: ''               # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

配置代码的样式

code:
  lang: true     # 代码块是否显示名称
  copy: true     # 代码块是否可复制
  shrink: false  # 代码块是否可以收缩
  break: false   # 代码是否折行

配置是否启用转载限制模块

reprint:
  enable: false   #是否启用“转载规则限定模块”
  default: cc_by

文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

配置文章阅读密码功能

阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的 Front-matter 中写上 password 的键和加密后的密文即可。

请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过 SHA256 加密的，这样就不会被破解。

verifyPassword:
  enable: true
  promptMessage: 请输入访问本文章的密码
  errorMessage:  密码错误，将返回主页！

如何一键部署hexo

通过 hexo-deployer-git 插件可以实现一键将博客同时部署到多个 git 仓库中。如同时发布到 github 及 gitee 提供的 pages 服务。安装：

npm install hexo-deployer-git --save

修改 Hexo 根目录下的 _config.yml 文件中的如下内容:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false

也可以如本站一样，采用 hexo-deployer-cos-enhanced 插件将静态内容部署到腾讯云对象存储服务中，在 DNS 配置中将境内线路解析到腾讯云 CDN 地址，实现加速。部署完成后会自动刷新被更新文件的 CDN 缓存。

安装：

npm install hexo-deployer-cos-enhanced --save

_config.yml 配置如下:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg

然后通过 hexo g -d 即可实现一键发布，并更新 CDN 缓存。

文章链接转静态短地址（可选的）

如果文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件生成文章时生成中文拼音的永久链接，或者用hexo-abbrlink 生成静态文章链接。以下结合 hexo-abbrlink 生成类似 /yyyy/mmdd+随机数.html 的文章链接地址。

安装命令如下：

npm install hexo-abbrlink --save

在 Hexo 根目录下的 _config.yml 文件中，修改 permalink: ，并在文件末尾新增 abbrlink:配置项：

permalink: :year/:month:day:abbrlink.html

abbrlink:
  alg: crc16 #算法选项：crc16丨crc32
  rep: dec #输出进制：dec为十进制，hex为十六进制

添加 emoji 表情支持（可选的）

Matery主题新增了对 emoji 表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji 表情的生成，把对应的 markdown emoji 语法（::, 例如：:smile:）转变成会跳跃的 emoji 表情，安装命令如下

npm install hexo-filter-github-emojis --save

在 博客根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用 emoji 语法写的表情了。

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 RSS 订阅支持

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明已经安装成功了。

增加百度统计功能

首先注册百度统计站长版，登陆后点击 新增网站，然后直接输入你的博客地址例如： https://blog.17lai.site，网站域名 和 网站首页 都写这个，网站名称 可以填 我的博客，
行业类别： 博客—空间周边。

然后点击左侧菜单的 代码获取，找到

hm.src = "https://hm.baidu.com/hm.js?……"

问号后的这一段十六进制代码
复制下来，粘贴到 主题配置文件 中的baidu_analytics:后面，注意冒号和值之间要有一个空格，然后将该字段前面的#号删除代表启用此功能。保存后即可

# Add baidu analytics configuration
# 添加 baidu Analytics 配置
baiduAnalytics:
  enable: false
  id: f614xxxxxxxxxxxxxxxx05d25e

Leancloud+Valine打造Hexo个人博客极简评论系统

Leancloud配置

首先访问Leancloud官网https://leancloud.cn/
有Github账号的小伙伴可以用Github账号进行登陆然后绑定邮箱就可以啦！
进入之后点击创建应用

这样我们就创建好啦！

接着点击应用右上角的设置进入设置界面

选择应用key，这样就可以看到我们接下来需要使用到的key

接着进入应用中心绑定你的个人博客域名

Valine配置

然后我们去主题配置文件中进行修改
主题配置文件路径：matery_config.yml
找到以下参数进行修改

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧！ //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

PS：评论者头像可以进行如下设置

到此，一个极简评论系统就完成啦！

自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

  • 菜单
  • 我的梦想
  • 首页的音乐播放器和视频播放器配置
  • 是否显示推荐文章名称和按钮配置
  • favicon 和 Logo
  • 个人信息
  • TOC 目录
  • 文章打赏信息
  • 复制文章内容时追加版权信息
  • MathJax
  • 文章字数统计、阅读时长
  • 点击页面的’爱心’效果
  • 我的项目
  • 我的技能
  • 我的相册
  • Gitalk、Gitment、Valine 和 disqus 评论配置
  • 不蒜子统计和谷歌分析（Google Analytics）
  • 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能有用的地方：

更换字体

一般网站的web字体都可以直接从Google-Font获取资源，这样不用担心字体商业带来的法律问题。

常见的开源字体有：

思源黑体 、 文泉驿 、 文鼎开放字体 、 柳体 、 cwTeX中文字体 、 濑户字体、江西拙楷体等。

1）创建web字体引用

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

2）在网页合适的位置进行字体引用

①利用浏览器检查元素，获取需要定义字体的部分

②在主体的配置文件中(hexo-theme-matery/layout/…)找到对应的渲染(.ejs)文件，查找需要修改的部分

①演示一下利用浏览器获取定义字体的部分

对获取到的id选择器：#artDetail进行css渲染

#artDetail {
    font-family: '引用的web字体';
}

②利用主体的ejs渲染文件找出需要修饰的部分（加入自定义类）

/*使用我在文章内容详情定义的diyFnot类**/
.diyfont {
   font-family: '引用的web字体'; 
}

/*也可以使用自带的id*/
#artDetail {
    font-family: '引用的web字体'; 
}

网站全局化字体定义

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

body {
    font-family: '引用的web字体名称'; 
}

引用本地的字体文件

当然有时候那个谷歌字体的网站可能登录不上去，需要科学上网，很烦人！我们也可以直接下载下字体文件，将他放在本地，进行直接引用！看下面操作👇

①在本地的hexo根目录的source文件下创立diy-font文件夹:/source/diy-font

在该文件下存放你的字体文件，比如：/source/diy-font/IBMPlexMono-Italic.ttf

②引用本地字体（仍然是在my.css文件中书写代码）

@font-face{
    font-family: 'hl';
    src: url('../diy-font/IBMPlexMono-Italic.ttf');
}

/** 表示全局使用，如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}


/* 可以局部使用，建议添加 */
.diyFont{
    font-family: 'hl';
}

这样我们就可以实现引用本地的字体了，并且在web有效！

在你想要使用的元素的 class 里面加上 diyFont 即可。

  • 直接使用

    F12，找到对应的代码片段即可：

<span class="logo-span diyFont">测试字体</span>

  • 模板使用

    找到对应的模板 header.ejs中的代码片段使用即可：

<span class="logo-span diyFont"><%= config.title %></span>

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
  /* 动态切换背景颜色. */
}

@keyframes rainbow {
  /* 动态切换背景颜色. */
}

修改 banner 图和文章特色图

可以直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果会 JavaScript 代码，可以修改成自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

Hexo 跳过渲染

在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。

方法一：font matter

Hexo新建网站页面，然后将你的代码直接写入 index.md 中

在 Front matter 中添加 layout: false，此方法适用于单一的纯HTML
CSS 页面。

---
title: tools
date: 2020-04-28 00:00:00
type: "tools"
layout: false
---

0x003 方法二：skip rende

在博客根目录下的 _config.yml，找到 skip_render，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。

# 指定目录跳过hexo渲染
skip_render:
  - 'tools/*'
  - 'tools/**'

注释：tools/* 表示在目录 source/fireworks 下的文件全部跳过渲染，tools/** 表示在博客根目录 source/tools/ 文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。

博客中插入音乐

hexo-tag-aplayer

hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件（现已支持 MetingJS）。

安装

npm install --save hexo-tag-aplayer

使用方法——aplayer

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: （可选）播放器袖珍风格
  • autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: （可选）歌词文件 URL 地址
    例如：
{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" %}

如果你觉得前面的方法不太好用，可以用下面的方法，使用MetingJS。

使用方法——MetingJS

MetingJS 是基于Meting API 的 APlayer 衍生播放器，支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
第一步：修改_config.yml配置
在hexo的配置文件_config.yml中添加：

aplayer:
	meting: true

第二步：使用MetingJS 播放器

<!-- 简单示例 (id, server, type)  -->
{% meting "571184509" "xiami" "playlist" %}

有关的选项列表如下:

选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式：all, one,none
orderlist列表播放模式： list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放，移动端浏览器暂时不支持此功能
mutextrue该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式，可选项： none, metadata, auto
theme#ad7a86播放器风格色彩设置

博客中插入视频

hexo-tag-dplayer

hexo-tag-dplayer 是 DPlayer 播放器的 Hexo 标签插件

安装

npm install --save hexo-tag-dplayer

使用

{% dplayer key=value ... %}
例：
{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=true" "preload=metadata" "hotkey=true" %}

有关的选项列表如下:

选项默认值描述
url必须值视频地址
loopfalse视频循环播放
volume0.7播放器音量
hotkeytrue开启热键
autoplaytrue自动播放，移动端浏览器暂时不支持此功能
logo-在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
mutextrue该选项开启时，如果同页面有其他播放，该播放器会暂停
highlight[]自定义进度条提示点
preloadauto视频文件预载入模式，可选项： none, metadata, auto
theme#ad7a86播放器风格色彩设置

注：如果使用腾讯视频、优酷视频等在线视频网站的资源，需要先进行视频地址解析，如点量视频解析，获取到实际的视频地址。

其他使用方法

在使用优酷或者腾讯视频时可以直接复制分享代码到文章中，如：

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

参考文献

各种优化

CDN 加速（强烈建议启用）

  • 为什么强烈建议启用CDN？

研究表明，用户最满意的打开网页时间，是在 2 秒以下。用户能够忍受的最长等待时间在 6～8 秒之间。就是说，8 秒是一个临界值，如果你的网站打开速度在 8 秒以上，那么你将失去大部分用户。研究显示，如果等待 12 秒以后，网页还是没有载入，那么 99% 以上的用户会选择关闭网页。

Google 做过一个试验，10 条搜索结果的页面载入时间需要 0.4 秒，显示 30 条搜索结果的页面载入时间需要 0.9 秒，结果后者使得 Google 总的流量和收入减少了 20%。Google 地图上线的时候，首页大小有 100KB，后来下降到 70~80KB。结果，流量在第一个星期上升了 10%，接下来的 3 个星期又再上升了 25%。Amazon 的统计也显示了相近的结果，首页打开时间每增加 100 毫秒，网站销售量会减少 1%。

以上数据说明了一个非常重要的问题，如果你的网站速度如果超过 2s 以上，那么你的客户可能在流失和离你而去了。这一点对于电商网站尤其重要，打开速度慢，那么将造成转化率降低，损失将会大量增加。

放在 Github 的资源在国内加载速度比较慢，因此需要使用 CDN 加速来优化网站打开速度，jsDelivr + Github 便是免费且好用的 CDN，非常适合博客网站使用。也可以选择主流云服务商提供的对象存储+CDN 来获得更快速及稳定的访问效果，费用低到几乎可忽略。

用法：

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

例如：

https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg

注意：版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源。

还可以配合 PicGo图床上传工具的自定义域名前缀来上传图片，使用极其方便。具体使用方法可参见我的另一篇文章: 使用 Typora+iPic/PicGo 图床+CDN 实现高效 Markdown 创作

Cloudflare CDN

配置最简单的CDN方式了。在github raw链接地址前面加https://images.weserv.nl/?url=, 就会自动使用cloudflare cdn来加速图片访问。使用发现无法加速gif。

本blog主要使用这个方法，如下所示。

  • 未加速图片地址
https://raw.githubusercontent.com/appotry/cloudimg/main/data/2021/09/1020210910231815.png
  • Cloudflare加速图片地址
https://cimg1.17lai.site/data/2021/09/1020210910231815.png

SEO 优化

搜索引擎优化，又称为 SEO，即 Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。Google 自动收录效果还不错，百度就差得远了（GitHub不允许百度的Spider爬取GitHub上的内容）。
百度SEO对新人已死，下面所有关于百度SEO的说明都不用看了，因为你做的再多，还是零收录！经过博主以及几十个其它站长验证的。

网域提交方式

  1. 自动提交

    （分三种）

    • 主动推送
    • 自动推送
    • sitemap（站点地图）

  2. 手动提交

    • 即手动地将链接一次性提交给百度

一般自动提交比手动提交效果好一点，自动提交又从效率上来说：

主动推送>自动推送>sitemap

自动提交的三种方式：

  1. 主动推送：最为快速的提交方式。将站点当天新产出链接通过此方式推送给百度，以保证新链接可以及时被百度收录。
  2. 自动推送：最为便捷的提交方式。将自动推送的JS代码部署在站点的每一个页面源代码中，当部署代码的页面在每次被浏览时，链接就会被自动推送给百度。可以与主动推送配合使用。
  3. sitemap：您可以定期将网站链接放到sitemap文件中，然后将sitemap文件提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。

使用sitemap方式推送

安装 sitemap 插件生成站点地图文件:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save  #百度专用

安装后直接执行 hexo cl&&hexo g -d 命令，就会在网站根目录生成 sitemap.xml 及 baidusitemap.xml 文件。

  • 在博客目录的_config.yml中添加如下代码
# 通用站点地图
sitemap:
  path: sitemap.xml

# 百度站点地图
baidusitemap:
  path: baidusitemap.xml
百度优化

登录百度搜索资源平台， 登录成功之后在 用户中心 –> 站点管理 页面中点击添加网站，按提示操作。

添加网站

添加网站

提示：由于百度的 spider 是爬取不到 GitHub 的内容的，所以在第三步验证网站的时候，建议选择CNAME验证的方式。

经过以上步骤，百度已经知道有我们网站的存在了，但是百度还不知道我们的网站上有什么内容，所以要向百度推送我们的内容。点击 网站支持 –> 数据引入 –> 链接提交菜单，提交站点地图：

提交站点地图

提交站点地图

另外，hexo-theme-matery主题已经内置了 自动推送 的功能， 检查 themes/hexo-theme-matery/_config.yml 文件中如下配置:

# 百度搜索资源平台提交链接
baiduPush: true

自动推送的 JS 代码部署在站点的每一个页面源代码中，当页面在每次被浏览时，链接就会被自动推送给百度。

谷歌优化

登录 Google Search Console，点击添加资源，输入自己的域名，按提示操作。

添加资源

添加资源

提示：需要进行 DNS 验证，进入 DNS 域名解析设置页面，按提示增加 TXT 记录，如下图:

DNS验证内容填写示例

DNS验证内容填写示例

验证成功后，需要提交站点地图。参照下图提交，然后等待收录。

提交站点地图

提交站点地图

注意：hexo 配置文件中的 url 一定要输入正确的域名，插件是根据 url 生成站点地图的。

其它搜索引擎

百度自动推送方式

只要每个需要被百度爬取的HTML页面中加入一段JS代码即可：

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

我所使用的matery主题可以自动给每个页面加上这段代码，只需在主题配置文件中配置：

# 百度搜索资源平台提交链接
baiduPush: true

即可！

其他主题一般都有这个功能的实现，如果没有的话，想办法在每个页面加入以上JS代码即可，原理是一样。

百度主动推送SEO方式

  • 配置文章自动推送到百度蜘蛛
获取百度推送密钥

在 百度资源 注册你的网址，验证完后可在站点管理->资源提交->链接提交->主动推送(实时) 中找到你的推送密钥，下面说明中的 token= 后的内容即为推送密钥。

推送接口
接口调用地址：http://data.zz.baidu.com/urls?site=https://ifibe.com&token=xxxxxxxxxx
安装主动推送插件：hexo-baidu-url-submit
$ npm install hexo-baidu-url-submit --save
然后打开hexo配置文件，在末尾加入以下配置：
# hexo-baidu-url-submit  百度主动推送
baidu_url_submit:
  count: 80 # 提交最新的一个链接
  host: https://blog.17lai.site # 在百度站长平台中注册的域名
  token: xxxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

密匙的获取是在百度的自动提交的主动推送那里。

再加入新的deploy：
deploy:
- type: baidu_url_submitter

如图：

这样每次执行 hexo d 的时候，新的链接就会被推送了。

$ hexo clean
$ hexo g
$ hexo d

推送成功时,会有如下终端提示!

baidu_url_submitter

各种不同的推送反馈字段说明点我查看，一般来说，推送失败基本都是地址不相符造成的，我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中的地址对比看是否一样即可。

Github Action 自动提交SEO方式

安装插件
npm i hexo-seo-autopush --save
配置

在hexo 的config.yml里添加

hexo-seo-autopush配置

# enable: 开启/关闭 推送
# count: 每次提交最新的10篇文章
# https://github.com/lete114/hexo-seo-autopush
hexo_seo_autopush:
  baidu:
    enable: true
    count: 100
  bing:
    enable: true
    count: 10
  google:
    enable: true
    count: 10
    google_file: google_service_account.json # 谷歌服务账户

添加Google Push配置和解决push后没有GitHub Actions .github\workflows\AutoPush.yml文件的问题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
   - type: git
     repo: https://github.com/lete114/Test.git
     branch: main
     ignore_hidden: false  # 忽略隐藏文件及文件夹(目录)
   - type: GooglePush # 谷歌提交
获取站长平台密钥
Baidu Key
  1. 打开百度站长平台，点击左侧的普通收录https://ziyuan.baidu.com/
Bing Key
  1. 打开Bing站长平台，https://www.bing.com/webmasters/home
  2. 点击右上角头像 旁边的齿轮，跟着下图操作
Google Key

Google Wiki， 使用参考。

  1. 打开Google indexing API官网

  2. 选择创建项目，点击继续

  3. 点击转到凭据页面

  4. 跟着如下图片步骤

    GoogleProof

    GoogleAddProof

    GoogleNone

    GoogleKey

    json文件内的内容

    {
  "type": "service_account",
  "project_id": "elated-guild-298003",
  "private_key_id": "cf58d669c0e8c8e082b2c403ade5e2548078e384",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDEAJw89yeylRrA\nB+bzOAfQQNgOCABIwEKCy5mMxWSaiXy2RktyCJWjMR2Pgz770NJgClQHPJjsFn0c\nukHufpnuiX3VPlimLANPCRFdU/qp+yiaw4quIhYF1UZJkhmhL30anghUcvi+r9hQ\nw+RwcKrgA4EUzqUJaPdvjtzSoo315PPGfR91ASD5S8gE02yVI8igtYMX7v2x1JYR\n7PwHJwOVemiM9lot8ilvoUbV4BU0vSlwFoxKMJAbEXTmJjEKQi9992rcMW0GzXO8\ncHldUUtURXkt3VFjYTH27KhHiTkTXw+uZRBu1rkubDJkS8lGIWN7Fc/r4HMMCVTu\nXPS6HbJ/AgMBAAECggEANSS7OBaFd3jRL3cVCiZLjA5A5pEJzq/+eKtOn2oYDISx\nwVRO+YTVWdGj47kg1zM4D11NikbGaeDxHFxuKwW9o/04lpyYebneTcw2Hpl6EiOs\nz0WssOlCEmPQ8nrAI0GWiKSHuqoPwtg37TIoGsqZsjKRCby759DDokZYnm3/0sc+\niEllT0ZyBZhGDzyguVLEdCIR2P02q/hQzLyd6ejWGGwZebImbGoILhmuOjVrco0p\nV0JbrrNskjM5Epe7w+CpGftEASJ7Dxa8oj0qIT6cyAipra2AZAGnG9jrLcWpJuhu\nvNeDIFnTfpNEac+khXZZE2++MIQfTX9wGJc8tox2vQKBgQD6yiNvAL7sxExiy6ER\ntLtFQ3bvmMpKRFGvFOyPOtMbmjZ3D1GEtNNKGH4v1TI+tncEy7Q5Dm7nWwpi8yvL\nbh8xKghelAc/CU1nw0xDEDCkMbAwpFg5A5ZDImy3LZsQh0kNXniIMy1vMSt5yLKS\n80gXQKGCxG8t3rP8Qd/2a55g1QKBgQDIExP1nG9sHJaigmitEUwr0Ow6Shqr56Me\nd7995gaV1oLWWCQzrXt/viWkb1W5ZGIxzcWNWz99m4CbvqfewRr598Eenald0csN\nVcIEk+0C+6KqA+jU9Tfs2zow/C7JuKULP2N++o0EoSz/ngokP7f1yLOYbr507v/R\n0cLElQBQAwKBgAbxDWYHKUG4dTzO0hiBXiWepm4fVooTtgcYlyunvywmapeFDwaT\nUr3cS7HbPtbJiiXR1Z02rw8sT+9JN88brzVXKoAjrMer5D6ZA0Vf71i8H1pZUi/R\nz5jwHP48/uvIMtdx4/gxInLPc5qdWYQDw90Q5ueNtF4aqfSzhhV2CR45AoGBAJN9\nPOF6iMjx6jmyWOf8MGK8iOgPaMoA4Ea9j/SHdaNPlvPb1hQid0AcNDObv14Dmj+M\nqW0jLxKxZ4VobufPAsvyz/J51zjKRx11cqldQwNH7QnYB/O1MZzxn1wtC3C5JTG9\ncONSYFJhXoKxRliigEI3ye089jnNVdifAS1ZiflxAoGBANTX1fEMEeNuYU0v3rtd\n5CkPZg4TNZ+y2MGl5xR1LdIgrJ8c9xKoW4rpp7SsOIvHpWX494f90D7o9uFEGSQ4\nyQK53jVzJ0ekGV5BdPF3n3/2j2VEqFLHi7LL4CJSxr6ci7OfBoHOGE8odhevQCCK\njnFzEin0QsBEgIC73fBh6XcH\n-----END PRIVATE KEY-----\n",
  "client_email": "googleindexing@elated-guild-298003.iam.gserviceaccount.com",
  "client_id": "103034240916368863393",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/googleindexing%40elated-guild-298003.iam.gserviceaccount.com"
}

  5. 打开谷歌站长平台
    GoogleAddUser
    GoogleAddEmail

配置博客仓库

  1. Name必须是baidu_token和bing_apikey(不区分大小写)

  2. 添加完成后
    Secrets-token

谷歌的一些问题

触发谷歌提交的命令是hexo d

由于谷歌需要配合Google indexing API平台提供的json进行提交，而这个json格式不能泄露
为防止json泄露只能本地提交，将json放到hexo根目录可自定义重命名(必须对应插件的配置)
如果你的使用Github Actions自动部署的话请把仓库设置为私有
GoogleConfig

提交成功返回状态码

以上步骤完成后即可hexo d部署了

  1. 看看Github仓库是否上传成功

  2. 点击Actions查看是否执行

  3. 点击 Auto Push—->build—–>点击第2步 自动提交

    如图43行

    // baidu返回的结果
{
	"remain": 2060,  // 表示当天剩余的可推送url条数
	"success": 47    // 成功推送的url条数
} 
// bing返回结果(错误)
{
	"ErrorCode": 2,  // 错误 
	"Message": "ERROR!!! Quota remaining for today: 2, Submitted: 47"
    // Message：表示 你目前只剩2个url推送，而你现在推送的是47条url
    // bing新用户开始每日只有10个推送额，据我了解连续推送10天(这我也不确定)
    // 如果出现这个错误的话，你就只能先手动添加等系统给你分配额了(分配9999)
}
// bing返回结果(成功)
{"d":null}

  4. Google 返回状态码

    成功返回

    Google response:  {
  urlNotificationMetadata: {
    url: 'https://blog.lete114.top/article/hexo-seo-autopush.html',
    latestUpdate: {
      url: 'https://blog.lete114.top/article/hexo-seo-autopush.html',
      type: 'URL_UPDATED',
      notifyTime: '2020-12-08T02:31:32.871417693Z'
    }
  }
}

    出现此错误需要: 翻墙

    FetchError: request to https://www.googleapis.com/oauth2/v4/token failed, reason: connect ETIMEDOUT 172.217.27.138:443
    at ClientRequest.<anonymous> (D:\Lete\GitHub\Hexo-Butterfly\node_modules\node-fetch\lib\index.js:1461:11)
    at ClientRequest.emit (events.js:321:20)
    at TLSSocket.socketErrorListener (_http_client.js:426:9)
    at TLSSocket.emit (events.js:321:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  message: 'request to https://www.googleapis.com/oauth2/v4/token failed, reason: connect ETIMEDOUT 172.217.27.138:443',
  type: 'system',
  errno: 'ETIMEDOUT',
  code: 'ETIMEDOUT',
  config: {
    method: 'POST',
    url: 'https://www.googleapis.com/oauth2/v4/token',
    data: {
      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
      assertion: 'eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJnb29nbGVpbmRleGluZ0BzdGF0ZWx5LXRyYW5zaXQtMjk3NzE1LmlhbS5nc2VydmljZWFjY291bnQuY29tIiwic2NvcGUiOiJodHRwczovL3d3d

本地主动提交SEO

hexo-url-submission

Wiki

安装方法
  1. 在终端中输入：
npm i hexo-url-submission
  1. 在 blog/_config.yml 文件中添加配置：
url_submission:
   enable: true
   type: 'latest' # latest or all( latest: modified pages; all: posts & pages)
   channel: ['baidu', 'bing', 'google', 'shenma'] # Included channels are `baidu`, `google`, `bing`, `shenma`
   prefix: ['/post', '/wiki'] # URL prefix
   count: 10 # Submit limit
   proxy: '' # Set the proxy used to submit urls to Google
   urls_path: 'submit_url.txt' # URL list file path
   baidu_token: '' # Baidu private key
   bing_token: '' # Bing private key
   google_key: '' # Google key path (e.g. `google_key.json` or `data/google_key.json`)
   shenma_token: '' # ShenMa private key
   shenma_user: '' # Username used when registering
   sitemap: '' # Sitemap path(e.g. the url is like this https://abnerwei.com/baidusitemap.xml, you can fill in `baidusitemap.xml`)
更新方法

在站点根目录执行：

npm update hexo-url-submission
deploy
deploy:
  - type: us_baidu_deployer
  - type: us_bing_deployer
  - type: us_google_deployer
  - type: us_shenma_deployer
good job

Run:

hexo clean && hexo g && hexo d

enjoy it!

提交 robots.txt

robots.txt是干嘛的？

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。
robots.txt 要放在 Hexo根目录 下的 source 文件夹中。

每个人站点目录可能不太一样，可以参考下我的 robots.txt 文件，内容如下：

User-agent: *
Allow: /
Allow: /posts/
Disallow: /about/
Disallow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /contact/
Disallow: /fonts/
Disallow: /friends/
Disallow: /libs/
Disallow: /medias/
Disallow: /page/
Disallow: /tags/
Disallow: /categories/

更多关于 robots.txt 的写法参见 https://blog.csdn.net/fanghua_vip/article/details/79535639

编写完以上内容再重新部署一下，然后到百度资源平台的数据监控->Robots点击检测并更新 看能不能检测到。

配置 Nofollow

  • nofollow 是HTML页面中 a标签 的 属性值。
  • 这个属性的作用是：告诉搜索引擎的爬虫不要追踪该链接，为了对抗博客垃圾留言信息

URL优化

一般来说，SEO搜索引擎优化认为，网站的最佳结构是 用户从首页点击三次就可以到达任何一个页面，但是我们使用Hexo编译的站点结构的URL是：域名/年/月/日/文章标题四层的结构，这样的URL结构很不利于SEO，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章的URL

方案一：

直接改成域名/文章标题的形式，在Hexo配置文件中修改permalink如下：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sky03.cn
root: /
permalink: :title.html
permalink_defaults:

这个方式有个不好的地方：

直接以文章的标题作为URL，而我们所写的文章的标题一般都是中文，但是URL只能用字母数字和标点符号表示，所以中文的URL只能被转义成一堆符号，而且还特别长。

方案二：

安装固定链接插件：hexo-abbrlink

插件作用：自动为每篇文章生成一串数字作每篇文章的URI地址。每篇文章的Front-matter中会自动增加一个配置项：abbrlink: xxxxx，该项的值就是当前文章的URI地址。

  1. Hexo根目录执行：

    npm install hexo-abbrlink --save

  2. Hexo配置文件末尾加入以下配置：

    # hexo-abbrlink config 、固定文章地址插件
abbrlink:
  alg: crc16  #算法选项：crc16、crc32，区别见之前的文章，这里默认为crc16丨crc32比crc16复杂一点，长一点
  rep: dec    #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

  3. Hexo配置文件中修改permalink如下：

    # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.17lai.site
root: /
permalink: posts/:abbrlink.html
permalink_defaults:

这样站点结构就变成了：域名/posts/xxx.html

异步加载JS

方法：将JS文件的引入，放到HTML的body结束标签的上方

例：

<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        xxxxx....
        <script src="xx/xx.js"></script>
    </body>
</html>

原理：首先要明白，HTML的加载是从上往下一行一行解释执行的，把js文件的引入放到下面，这样就会先把HTML页面展示出来，然后再加载js。这样看起来的效果就是，大体的页面先出来，而js让它慢慢加载执行，如果你把js放到网页的上方，效果就是必须要加载完js才能继续展示网页，体验极差。

注意：原主题的js文件尽量不要动，我们只需将自己增加的一些js按照异步加载的方式做即可，比如一些音乐js插件、实时在线聊天js插件等放到最后即可！因为这些文件要加载的东西很多。

字蛛压缩字体

在上面我们介绍了如何在网站上引用自己喜欢的字体，但是这样会出现一个问题：字体文件太大！（尤其是中文，有时候为了几个字引入一个数十兆的字体文件，得不偿失），所有需要字体压缩！

官网 GitHub

使用场景

你的网站中需要自定义字体（额外添加一些普通电脑中没有的字体），但是一般字体是包含很多字符的，这就导致字体文件的体积很大

字蛛作用

字蛛就是自动检测网站的 CSS 与 HTML 文件中的自定义字体（额外加的字体），并将网站中用到的文字重新打包成一个新的字体文件，并自动引入；

而没用到的文字就会删除，从而达到压缩字体文件体积的作用。

安装

npm install font-spider -g

在 CSS 中使用 WebFont：

/*声明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}
  1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
  2. 开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令：

font-spider ./demo/*.html

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

webp图像大小优化

把所有图像都转换为webp格式，可以极大减小图片体积，加快加载速度。

gulp 体积压缩

使用 gulp 图片html, js, ccs

减小体积，加快加载速度

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
 
或者使用yarn 
 
yarn global add gulp
yarn add gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp

然后，在根目录新增 gulpfile.js :

 
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
// gulp 3.x
// gulp.task('default', [
//     'minify-html','minify-css','minify-js'
// ]);

// gulp 4.x
gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js', done => done()));

运行：

hexo clean && hexo g && gulp &&  hexo g

使用 gulp 图片压缩

压缩 图片文件可降低文件大小，提高图片加载速度。

找到规律转换为 gulp 代码

规律

找到 images/ 目录下的所有文件，压缩它们，将压缩后的文件存放在 dist/images/ 目录下。

一、安装 gulp-imagemin 模块

提示：你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。

学习使用命令行

在命令行输入

npm instal gulp-imagemin

安装成功后你会看到如下信息：(安装时间可能会比较长)

gulp-imagemin@2.2.1 node_modules/gulp-imagemin
├── object-assign@2.0.0
├── pretty-bytes@1.0.3 (get-stdin@4.0.1)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)
├── through2-concurrent@0.3.1 (through2@0.6.3)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)
二、创建 gulpfile.js 文件编写代码

在对应目录创建 gulpfile.js 文件并写入如下内容：

// 获取 gulp
var gulp = require('gulp');

// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('images/*.*')
    // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存图片
        .pipe(gulp.dest('dist/images'))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 images 任务
    gulp.watch('images/*.*)', ['images'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])

你可以访问 gulp-imagemin 以查看更多用法。

三、在 images/ 目录下存放图片

在 gulpfile.js 对应目录创建 images 文件夹，并在 images/ 目录下存放图片。

四、运行 gulp 查看效果

在命令行输入 gulp +回车

你将看到命令行出现如下提示

gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js
[18:10:42] Starting 'images'...
[18:10:42] Finished 'images' after 5.72 ms
[18:10:42] Starting 'auto'...
[18:10:42] Finished 'auto' after 6.39 ms
[18:10:42] Starting 'default'...
[18:10:42] Finished 'default' after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)

hexo 部署

将Hexo部署到vps，实现自动发布

搭建流程

  1. 服务器环境配置，安装Git、Nginx配置、创建git用户
  2. 本地hexo初始化
  3. 使用Git自动部署并发布博客

服务器环境搭建

  • 安装Git和NodeJS(Centos环境)
yum install git
# 安装NodeJS 
curl --silent --location https://rpm.nodesource.com/setup_5.x | bash -
  • 创建git账号
adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers
  • 添加内容
    找到
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
  • 添加以下内容
git     ALL=(ALL)     ALL
  • 保存退出并改回权限
chmod 400 /etc/sudoers
  • 设置git账号密码
sudo passwd git
  • 使用su git切换到git用户，再执行下列操作：
# 切换到git用户目录
cd /home/git
# 创建.ssh文件夹
mkdir ~/.ssh
# 创建authorized_keys文件并编辑
vim ~/.ssh/authorized_keys
# 如果你还没有生成公钥，那么首先在本地电脑中执行 cat ~/.ssh/id_rsa.pub | pbcopy生成公钥
# 再将公钥复制粘贴到authorized_keys
# 保存关闭authorized_keys后，修改相应权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh
  • 然后可以通过本地Git Bash执行ssh命令测试是否可以免密登录
ssh -v git@服务器ip地址

这样git用户就添加好了。

Tips: 将公钥拷贝到服务器的~/.ssh/authorized_keys文件中方法有如下几种：

  1. 将公钥通过scp拷贝到服务器上，然后追加到~/.ssh/authorized_keys文件中，这种方式比较麻烦。scp -P 22 ~/.ssh/id_rsa.pub user@host:~/。
  2. 通过ssh-copy-id程序，就是我演示的方法，ssh-copyid user@host即可
  3. 可以通过cat ~/.ssh/id_rsa.pub | ssh -p 22 user@host ‘cat >> ~/.ssh/authorized_keys’，这个也是比较常用的方法，因为可以更改端口号。
  • 安装Nginx
  • 准备工作
    首先由于nginx的一些模块依赖一些lib库，所以在安装nginx之前，必须先安装这些lib库，这些依赖库主要有g++、gcc、openssl-devel、pcre-devel和zlib-devel 所以执行如下命令安装
yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl--devel

Ubuntu系统安装命令如下：

sudo apt-get install libpcre3 libpcre3-dev
sudo apt-get install zlib1g-dev
sudo apt-get install openssl libssl-dev
  • 安装Nginx
    安装之前，最好检查一下是否已经安装有nginx
find -name nginx

如果系统已经安装了nginx，那么就先卸载

yum remove nginx

然后开始安装
首先进入/usr/local目录

cd /usr/local

从官网下载最新版的nginx

wget -c https://nginx.org/download/nginx-1.14.2.tar.gz

（注：版本号可更改，去官网查看最新版本号修改即可）

解压nginx压缩包

tar -zxvf nginx-1.14.2.tar.gz

会产生一个nginx-1.14.2 目录，这时进入nginx-1.14.2 目录

cd  nginx-1.14.2

接下来安装，使用–prefix参数指定nginx安装的目录,make、make install安装

./configure

（默认安装在/usr/local/nginx，推荐使用默认设置）

make

make install

如果没有报错，顺利完成后，最好看一下nginx的安装目录

whereis nginx

（where和is要连这些，中间没有空格）

  • 启动和停止nginx
cd /usr/local/nginx/sbin/
./nginx 
./nginx -s stop
./nginx -s quit
./nginx -s reload
./nginx -s quit: 此方式停止步骤是待nginx进程处理任务完毕进行停止。
./nginx -s stop: 此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

查询nginx进程：

ps aux | grep nginx

  • 重启 nginx
  1. 先停止再启动（推荐）：
    对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令。如下：
./nginx -s quit
./nginx
  1. 重新加载配置文件：
    当 nginx 的配置文件 nginx.conf 修改后，要想让配置生效需要重启 nginx，使用 -s reload 不用先停止 nginx 再启动 nginx 即可将配置信息在 nginx 中生效，如下：
./nginx -s reload

启动成功后，在浏览器可以看到如下页面：

  • 开机自启动

即在rc.local增加启动代码就可以了。

vim /etc/rc.local

增加一行

/usr/local/nginx/sbin/nginx

到这里，nginx安装完毕，启动、停止、重启操作也都完成。

建立git裸库

# 回到git目录
cd /home/git
# 使用git用户创建git裸仓库，以blog.git为例
git init --bare blog.git

检查用户组权限

我们的git裸仓库已经建立好了，离成功又近了一步。为了以防万一，我们要检查一下之前的blog.git、.ssh、blog目录的用户组权限是否都为git:git

# 还记得/var/www/吗？这是之前配置nginx时，我们自己选定的网站根目录，请依据你自己的设置更改，如果没有的话自己
ll -a /www/wwwroot/hexo
ll -a /home/git/

如果有哪个不是，执行下面相应的命令后再查看

sudo chown -R git:git /www/wwwroot/hexo
sudo chmod -R 755 /www/wwwroot/hexo
sudo chown git:git -R /home/git/blog.git

mkdir /www/wwwroot/hexo
chown git:git /www/wwwroot/hexo
chmod 755 /www/wwwroot/hexo

使用git-hooks同步网站根目录

简单来说，我们使用一个钩子文件：post-receive，每当git仓库接收到内容的时候，就会自动调用这个钩子，把内容同步到网站根目录。
在git用户下执行：

# 新建一个post-receive文件并编辑
vim ~/blog.git/hooks/post-receive

在里面输入以下内容，注意修改为自己的设置：

#!/bin/bash
set -e
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/www/wwwroot/hexo
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
cd $TMP_GIT_CLONE
for b in `git branch -r | grep -v -- '->'`; do git branch --track ${b##origin/} $b; done
git checkout main
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
ls ${PUBLIC_WWW}

保存退出后，执行以下赋予这个文件可执行权限。

chown -R git:git ~/blog.git/hooks/post-receive
chmod +x ~/blog.git/hooks/post-receive

好了，以上就是服务器端需要配置的内容。我们还差最后一步就可以完成整个部署了！

修改配置文件nginx.conf

修改上面的配置文件：

vim /usr/local/nginx/conf/nginx_config

然后修改其中两个部分，如下所示：

然后重启nginx，方法见nginx安装部分。

配置本地Hexo的_config.yml

非常简单，只需要找到本地Hexo博客的站点配置文件_config.yml，找到以下内容并修改：

deploy: 
  type: git
  repo: git@你的服务器IP:/home/git/blog.git
  branch: master

保存后，剩下的就是Hexo的日常操作了，这里就不赘述了，写完文章后，在你的本地博客根目录执行以下命令：

hexo c && hexo g -d

就可以实现线上博客的自动更新了！一切搞定！

Rsync同步部署静态文件方法

使用rsync同步

本地生成静态文件后rsync同步到vps网页目录，lnap使用宝塔配置，这里只需要一个nginx。

# rsync [options] from_dir to_dir
# 替换这里的ip为你的服务器ip
rsync -avzP  /home/17lai.blog  root@8.8.8.8:/www/wwwroot/hexo

Hexo 自动部署

准备

  1. Hexo 博客源码的仓库，在 GitHub 上。
  2. ssh 密钥，参考文章：Windows 下利用 Git 生成 SSH KEY 并配置到 GitHub

步骤

  1. 为需要部署的平台添加密钥
  2. 修改 _config.yml 中的 deploy 配置
  3. 在 GitHub 上设置 Secrets
  4. 创建 GitHub Action

为需要部署的平台添加密钥

按照之前的教程，只要你之前成功将 Hexo 的博客部署到 GitHub 上，那你电脑在 ~/.ssh 目录下一定有以下三个文件：

  • id_rsa：私钥
  • id_rsa.pub：公钥
  • known_hosts：记录对所有用户都可信赖的远程主机的公钥

将 id_rsa.pub（公钥）添加到不同平台中即可，参考文章：Windows 下利用 Git 生成 SSH KEY 并配置到 GitHub

下面是不同平台添加的地址：

修改 _config.yml 中的 deploy 配置

请使用 ssh (即以 git@ 开头的 clone 链接) 的连接方式，根据直接的实际地址填写。

deploy:
  - type: git
    repo:
      github: git@github.com:Sitoi/Sitoi.github.io.git
      coding: git@e.coding.net:Sitoi/Sitoi.git
      gitee: git@gitee.com:sitoi/sitoi.git
      gitlab: git@gitlab.com:Sitoi/sitoi.gitlab.io.git
    branch: master

在 GitHub 上设置 Secrets

  1. 进入到你在 GitHub 上面的源码仓库

  2. 点击右上角的 Settings

Settings

Settings

  1. 点击左侧的 Secrets

  2. 点击右上角的 New secret

New secret

New secret

  1. 在 Name 中输入 HEXO_DEPLOY_PRI，在 Value 中填入 id_rsa（私钥）的全部内容

Add secret

Add secret

创建 GitHub Action

  1. 点击项目上方的 Action 按钮

Action

Action

  1. 点击 set up a workflow yourself 创建 Workflow

Workflow

Workflow

  1. 修改 main.yaml 的内容

Create Workflow

Create Workflow

根据实际情况修改成你自己的内容

  • Git 推送使用的用户名：git config –global user.name ‘sitoi’：
  • Git 推送使用的邮箱：git config –global user.email ‘133397418@qq.com‘
  • Hexo 的版本：npm i hexo@4.1.1 -g
name: Hexo CI

on:
  push:
    branches:
      - butterfly

jobs:
  butterfly-build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: env prepare
        env:
          HEXO_DEPLOY_PRI: ${{ secrets.HEXO_DEPLOY_PRI }}
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          ssh-keyscan gitlab.com >> ~/.ssh/known_hosts
          ssh-keyscan e.coding.net >> ~/.ssh/known_hosts
          ssh-keyscan gitee.com >> ~/.ssh/known_hosts
          git config --global user.name 'sito'
          git config --global user.email '133397418@qq.com'
          npm i
          npm i hexo@4.1.1 -g
      - name: gen
        run: |
          hexo clean
          hexo generate
          hexo deploy
  1. 将你的源码推送到 GitHub 上，你的博客一会就会自动更新了。

以 token 方式部署到 Github

deploy:
  type: git
  repo:
    github:
      url: <repository url>
      branch: [branch]
      token: ''
  message: [message]
  name: [git user]
  email: [git email]
  extend_dirs: [extend directory]
  ignore_hidden: false # default is true
  ignore_pattern: regexp  # whatever file that matches the

利用 GitLab 实现 Hexo 博客的 CI/CD

Portainer 提供了对服务在线更新的 WebHook，所以基于 GitLab 自带的 CI/CD 功能实现 Hexo 博客的持续部署，就非常轻松了。

CI/CD 其实本质上是一套流程，流程规则可以自行定义。在本文研究的主题下，流程分为三步：第一步是编译 Hexo 博客并生成静态文件；第二步是将静态文件打包成可提供 Web 服务的镜像；第三步则是通过 Portainer 的钩子触发服务更新。

.gitlab-ci.yml

stages:
  - compile
  - build
  - deploy

# CONTAINER_RELEASE_IMAGE 根据自己的仓库名修改
variables:
  DOCKER_HOST: tcp://docker:2375
  DOCKER_DRIVER: overlay2
  CONTAINER_RELEASE_IMAGE: registry.gitlab.com/xxx/xxx:latest

compile:
  stage: compile
  image: node:lts-alpine
  script:
    - npm install
    - ./node_modules/hexo/bin/hexo generate
  artifacts:
    paths:
      - public/
    expire_in: 20 minutes

build:
  stage: build
  image: docker:stable
  services:
    - docker:dind
  script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
    - docker info
    - docker build -f ./Dockerfile -t $CONTAINER_RELEASE_IMAGE public
    - docker push $CONTAINER_RELEASE_IMAGE

# 根据自己的钩子修改下方的 URL
deploy:
  stage: deploy
  script:
    - curl https://xxx.xxx.xxx/api/webhooks/xxx -X POST

为了保证服务更新的成功率，可以在 deploy 环节加个错误判断和重试次数，具体的看 GitLab 官方文档即可。

下面给出我的 Dockerfile 文件，供参考。

FROM nginx:alpine

COPY . /usr/share/nginx/html

RUN chmod 777 /usr/share/nginx/html -R \
    && sed -i 's/#error_page  404/error_page  404/' /etc/nginx/conf.d/default.conf

一堆个性定制

个性美化

修改主题颜色

配色包括导航栏，底部栏，a标签等，主题配色是绿色。

修改themes\Matery\source\css\matery.css样式
快捷键ctrl+F查找到#4cbf30（浅绿色）和#0f9d58（深绿色）还有首页字体颜色，修改为你喜欢的颜色

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */ 
.bg-color { 
	background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); 
} 
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/ 
@-webkit-keyframes rainbow { 
	/* 动态切换背景颜色. */ 
} 
@keyframes rainbow { 
	/* 动态切换背景颜色. */ 
}

背景樱花飘落效果

修改已经提交到主线devlop分支，现在可以直接在主线配置文件中开启樱花特效了。

在themes/matery/source/js目录下新建sakura.js文件，打开这个网址传送门，将内容复制粘贴到sakura.js即可。

然后在themes/matery/layout/layout.ejs文件内添加下面的内容：

<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

修改花瓣的数量

因为普遍在使用的樱花背景效果花瓣数太多了，一些人不太喜欢。

于是按不同花瓣数量做了几个新的 js ，并提供如下 cdn 形式的引用：

https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.2/js/sakura/sakura-small.js

以上为少量樱花效果，另提供几个不同数量的文件引用名：

文件名说明
sakura-small.js少量樱花
sakura-half.js樱花相对原效果数量减半
sakura-reduce.js樱花相对原效果减少1/4
sakura-original.js樱花数量不变（原效果）

自定义鼠标样式

首先将鼠标样式下载到本地，推荐大家一个网站：https://zhutix.com/ico/ori-cursors/

以我的为例，我将鼠标指针样式放在了主题文件夹下的medias目录下，然后打开themes\matery\source\css下的my.css文件，添加内容如下：

*{
    cursor: url("/medias/imgs/zhengchang.ico"),auto!important;
}
:active{
    cursor: url("/medias/imgs/dianji.ico"),auto!important;
}

取消首页渐变颜色动画

在themes\Matery\source\css\matery.css，ctrl+F快捷键查找.bg-cover:after，注释掉即可。

/* .bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} */

优化目录栏，透明化

目录样式竟然在：themes\Matery\layout\_partial\post-detail-toc.ejs

.toc-widget {
    width: 345px;
    padding-left: 20px;
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 10px;
    box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}

增加点击跳转评论按钮

新建文件themes\Matery\layout\_partial\back-comment.ejs,粘贴如下代码

我这里评论是valine，直接填写的valine的id——href="#vcomments",如果是其他评论，对应修改即可。

<!-- 直达评论 -->
<div id="to_comment" class="comment-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论">
        <i class="fas fa-comments"></i>
    </a>
</div>

在themes\Matery\layout\_partial\valine.ejs文末添加一条，引用第一步的内容；

<%- partial('_partial/back-comment.ejs') %>

则只在valine存在的页面才显示直达评论，防止首页其他地方也出现按钮。其实还可以优化为浮动出现，有一点麻烦，我这里没有设置。

增加样式在themes\Matery\source\css\matery.css添加内容如下：

/*直达评论按钮样式*/
.comment-scroll {
    position: fixed;
    right: 15px;
    bottom: 135px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.comment-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
    width: 48px;
    height: 48px;
}

.comment-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

bottom: 135px;是距离底部的高度，看看你是否需要修改。

修改滑动条

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #FF2A68;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #ffcacaff;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

添加博客看板娘 动漫人物挂件

方法：

获取模型：

npm install --save hexo-helper-live2d

安装喜欢的模型：

$ npm install packagename

将packagename换成模型名字，如我使用的模型：

$ npm install live2d-widget-model-shizuku

然后打开博客根目录下的 _config.yml文件，添加如下代码：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    #use: live2d-widget-model-lwet # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # 模型：https://huaji8.top/post/live2d-plugin-2.0/
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url
  display:
    position: left
    width: 300
    height: 400
    hOffset: 50
    vOffset: 10
  mobile:
    show: false

效果见本blog左下角

Tag标签外挂使用方法

Tag标签外挂使用方法

{%r%}
紅色
{%endr%}
{%g%}
綠色
{%endg%}
{%y%}
黃色
{%endy%}

图片懒加载

图片懒加载是提升网站性能和用户体验的一个非常很好方式，并且几乎所有的大型网站都使用到了，比如微博，仅把用户可见的部分显示图片，其余的都暂时不加载，做法就是：让所有图片元素src指向一个小的站位图片比如loading，并新增一个属性(如data-original)存放真实图片地址。每当页面加载（或者滚动条滚动），使用JS脚本将可视区域内的图片src替换回真实地址，并做请求重新加载。

那么，赶快用起来吧！

在站点根目录执行下面的命令：

npm install hexo-lazyload-image --save

之后在站点配置文件下添加下面的代码

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif

最后执行 hexo clean && hexo g && hexo s 就可以看到效果了。

修Bug

一般情况下懒加载会和gallery插件会发生冲突，结果可能就是点开图片，左翻右翻都是loading image。matery主题的解决方案是修改 /themes/matery/source/js 中的 matery.js文件

      $('#articleContent, #myGallery').lightGallery({
          selector: '.img-item',
          // 启用字幕
          subHtmlSelectorRelative: true
      });

      $(document).find('img[data-original]').each(function(){
  		$(this).parent().attr("href", $(this).attr("data-original"));
});

其他优化

经过以上操作就已经很完美了，以下内容可做可不做

  • 其实第一次加载后本地都是有缓存的，如果每次都把loading显示出来就不那么好看

  • 所以我们需要对插件进行魔改，让图片稍微提前加载，避开加载动画

  • 打开 Blog\node_modules\hexo-lazyload-image\lib\simple-lazyload.js 文件

  • 第9行修改为：

    && rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)

  • 作用：提前240个像素加载图片；当然这个值也可以根据自己情况修改

外链跳转插件

使用 npm 或者 yarn 安装

## npm 安装
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link

之后在博客站点根目录下添加如下配置：

hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果开启了防盗链，填写你的域名
  safety_chain: true

添加天气小插件

首先去中国天气官网：，配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到 themes/matery/layout/layout.ejs 即可。

新增个人相册

新建相册目录

执行下面的命令：

hexo new page galleries

然后到站点根目录的 source 目录下找名称为 galleries 的目录，打开目录下的 **index.md ** 文档，在原有基础上添加一下配置：

type: "galleries"
layout: "galleries"

紧接着，在主题配置文件的 menu 属性添加关于相册的菜单

相册:
  url: /galleries 
  icon: fas fa-image

如果需要添加到二级菜单，添加格式为：

- name: 相册
  url: /galleries 
  icon: fas fa-image

添加 ejs 文件和 css 文件

首先新建 gallery.css，填写的代码内容如下：

.gallery-wrapper{
  padding-top: 30px;
}
.gallery-wrapper .gallery-box{
  padding: 5px !important;
}

.gallery-wrapper .gallery-item {
  display: block;
  overflow: hidden;
  background-color: #fff;
  padding: 5px;
  padding-bottom: 0;
  position: relative;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}

.gallery-cover-box{
  width: 100%;
  padding-top: 60%;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: center center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.gallery-cover-box .gallery-cover-img {
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.gallery-item .gallery-name{
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #666;
  margin: 0;
}

.waterfall {
  column-count: 3;
  column-gap: 1em;
}
.photo-wrapper{
  padding-top: 20px;
}
.photo-item {
  display: block;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 14px;
  font-size: 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  background: white;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}
.photo-item img {
  width: 100%;
}
.photo-item .photo-name{
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #dddddd;
}

/*适配移动端布局*/
@media only screen and (max-width: 601px) {
  .waterfall {
    column-count: 2;
    column-gap: 1em;
  }
}

然后保存，将此文件放在主题目录下，路径为 matery/source/css。

紧接着，新建 galleries.ejs 文件，添加以下代码：

<link rel="stylesheet" href="/css/gallery.css">

<%- partial('_partial/bg-cover') %>

<main class="content">
    <div class="container">
        <% if (site.data && site.data.galleries) { %>
        <% var galleries = site.data.galleries; %>
        <div class="gallery-wrapper row">
            <% for (var i = 0, len = galleries.length; i < len; i++) { %>
            <% var gallery = galleries[i]; %>
            <div class="col s6 m4 l4 xl3 gallery-box">
                <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                     <div class="gallery-cover-box" style="background-image: url(<%- theme.jsDelivr.url %><%- gallery.cover%>);">
                    </div>
                    <p class="gallery-name">
                        <%- gallery.name %>
                    </p>
                </a>
            </div>
            <% } %>
        </div>
        <% } %>
    </div>
</main>

将此文件放在 matery/layout 目录下，同时再此目录下接着新建 gallery.ejs 文件，添加以下代码：

<link rel="stylesheet" href="/css/gallery.css">
<link type="text/css" href="/libs/fancybox/jquery.fancybox.css" rel="stylesheet">
<link type="text/css" href="/libs/justifiedGallery/justifiedGallery.min.css" rel="stylesheet">

<%- partial('_partial/post-cover') %>
<%
let galleries = [];
if (site.data && site.data.galleries) {
    galleries = site.data.galleries;
}
var pageTitle = page.title;
function getCurrentGallery(galleries, pageTitle) {
    for (let i = 0; i < galleries.length; i++) {
        if (galleries[i]['name'] == pageTitle) {
            return galleries[i];
        }
    }
}
var currentGallery = getCurrentGallery(galleries, pageTitle)

var photos = currentGallery.photos;
var galleryImageStr = theme.jsDelivr.url ? theme.jsDelivr.url : '';

let imageStr = ''

for (var i = 0, len = photos.length; i < len; i++) {
    var photo = photos[i];

    imageStr += "<a href=\"" + galleryImageStr + photo + "\"" +
            "     class=\"photo-item\" rel=\"example_group\"" +
            "     data-fancybox=\"images\">" +
            "      <img src=\"" + galleryImageStr + photo + "\"" +
            "       alt=" + photo + ">\n" +
            "    </a>"

}
%>  

<div class="container">
    <div class="photo-wrapper">
        <% if (page.password ) { %>

            <script src="/js/crypto-js.js"></script>
            <script src="/js/gallery-encrypt.js"></script>
            <div id="hbe-security">
                <div class="hbe-input-container">
                    <input type="password" class="hbe-form-control" id="pass"  placeholder="请输入密码查看内容"/>
                    <a href="javascript:;" class="btn-decrypt" id="btn_decrypt">解密</a>
                </div>
            </div>
            <div  id="mygallery">
                <div class="waterfall" id="encrypt-blog" style="display:none">
                    <%- aes(imageStr, page.password) %>
                </div>
            </div>
        <% } else { %>
            <div class="waterfall" id="encrypt-blog">
                <%- imageStr %>
            </div>
        <% } %>
    </div>
</div>

<script src="/libs/fancybox/fancybox.js"></script>
<script src="/libs/justifiedGallery/justifiedGallery.min.js"></script>
<script>

  $("a[rel=example_group]").fancybox();
  $("#encrypt-blog").justifiedGallery({margins: 5, rowHeight: 150});

</script>

注意：

  1. 需要几个文件，我把文件地址放在下面，用浏览器打开链接，就会显示出代码，然后复制粘贴到文加中去就行。开头的是文件路径，如果没有的话，就新建一个就 OK 了。

添加相册 json 配置文件

在站点目录 source/_data/ 下新建一个 galleries.json 的文件，json 代码如下：

[
    {
      "name": "2020",
      "cover": "/medias/images/01.jpg",
      "description": "我的图床",
      "photos": [
        "/medias/images/01.jpg",
        "/medias/images/02.jpg",
        "/medias/images/03.jpg"
      ]
    }
]

字段含义：

  • name 是相册标题
  • cover 是封面图片
  • description 是相册介绍
  • photos 是图片列表

配置文件建好了之后还没完，只剩最后一个步骤了，在 galleries 目录下建立对应的相册名称目录和文件，比如我这个相册需要新建名称为 2020 目录，然后下面再分别新建 index.md 文件，文件内容为：

---
title: 2020
date: 2021-10-13 10:51:50
type: "gallery"
layout: "gallery"
---

查看效果

完成以上步骤，执行命令，在本地查看效果：

hexo clean && hexo g && hexo s

我的效果

新增折叠功能

这里利用hexo-sliding-spoiler插件间接实现折叠功能，在matery主题中零修改源代码实现折叠功能。

另一种修改代码实现折叠效果，参考Hexo next博客添加折叠块功能添加折叠代码块。

安装插件

npm install hexo-sliding-spoiler --save

配置插件

根目录配置文件_config.yml中添加

plugin:
- hexo-sliding-spoiler

到这里已经实现折叠功能了。

进一步完善美化

修改node_modules_hexo-sliding-spoiler@1.2.1@hexo-sliding-spoiler\assets\spoiler.css

.spoiler {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #E5E5E5;
    background: #E5E5E5;
    position: relative;
    clear: both;
    border-radius: 3px;
    transition:all .6s
}

.spoiler .spoiler-title {
    margin: 0 -15px;
    padding: 5px 15px;
    color: #353535;
    font-weight: bold;
    font-size: 18px;
    display: block;
    cursor: pointer;
}

.spoiler.collapsed .spoiler-title:before {
    content: "▶ ";
}

.spoiler.expanded .spoiler-title:before {
    content: "▼ ";
}

使用方法

{% spoiler title %}
content
{% endspoiler %}

实例

{% spoiler 点击显/隐内容 %}

内容测试

{% endspoiler %}

{% spoiler 点击显/隐内容 %}

内容测试

{% endspoiler %}

让Hexo博客支持通知功能

安装插件

插件的 GitHub 仓库 hexo-web-push-notification

在你的博客站点目录执行下面的命令：

npm i hexo-web-push-notification --save

如果你安装了 cnpm 或者 yarn 等可执行下面的命令，安装依赖包的速度更快：

cnpm i hexo-web-push-notification --save #安装cnpm的执行这个命令
yarn add hexo-web-push-notification #安装yarn的执行这个命令

紧接着再你的博客站点目录下的配置文件，而不是主题配置文件，添加以下配置：

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

其中 webpushrKey,webpushrAuthToken 和 trackingCode 的值在官网注册得到。

官网注册

点击右边的图标即可进入👉 ： 传送门

注册完之后，然后会让你重新登录，登录之后，然后填写相关的信息即可。

  1. 填写图中所显示的相关网站信息，填写完之后，点击下一步

Web push notications 仅支持 HTTPS 的网站，不支持 HTTP 的网站

根据网站类型，并根据网站指引进行操作，以 Hexo 为例

info， 其中将第二步中所指的代码复制粘贴到你的 footer.ejs 或者 layout.ejs，对于 hexo 用户，建议将其加入 index.ejs 即可。因为主题的不同，所以代码添加的位置不同，简单的说，就是放在网站的 </body> 标签之前，根据你的主题而言，自己添加。

接着将以下代码插入到网页中就可以了。确保每一个你想要询问用户接受通知的页面都要包含以下代码。

其中，上图步骤二中的代码有 trackingCode 的值，如下图中所标明的一长串字母。

验证安装

安装成功

部署之后可能会遇到无法正常发送通知的情况.

进入目录node_modules/hexo-web-push-notification/index.js文件中第22行'summary': util.stripHTML(newPost.excerpt),这里取值取的是excerpt，改成summary即可。

修改前

var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.excerpt),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }
var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.summary),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

客服聊天窗口

1、在官网注册账号

官网地址：点我去crisp官网注册

2、注册完成后设置

登录刚才注册的账户——设置——网站设置——添加网站。

添加完成之后就多了一行网站信息。点网站整合，就有不同的站的整合方式。

比如：html方式

就是复制JS代码片段到你的到head标签里。

<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="xxxxxxx-097e-402f-bb6b-xxxxxxx";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>

3、其他的设置也
登录刚才注册的账户——设置——网站设置。
网站信息行——设置，自己根据需要设置即可，比如显示位置，颜色，自己的头像等。

整个使用非常简单的。

使用Valine-Admin管理评论和评论提醒

使用

首先其他的不错说了，在阅读本篇文章之前你最好已经整合了Valine留言。

由于我已经整合过了所以前面几个步骤的图片来源自@Valine-Admin

首先登陆账号，找到云引擎在点击设置。

复制仓库地址：DesertsP/Valine-Admin

把git仓库地址房子代码库输入框中。

切换到部署标签页，分支使用 master，点击部署。

接下来输入分支为master

部署完成之后就是设置环境变量

环境变量

点击设置，找到自定义环境变量点击新增变量

  • SITE_NAME : 网站名称。
  • SITE_URL : 网站地址, 最后不要加 / 。
  • SMTP_USER : SMTP 服务用户名，一般为邮箱地址。
  • SMTP_PASS : SMTP 密码，一般为授权码，而不是邮箱的登陆密码，请自行查询对应邮件服务商的获取方式
  • SMTP_SERVICE : 邮件服务提供商，支持 QQ、163、126、Gmail、"Yahoo"、...... ，全部支持请参考 : Nodemailer Supported services。 — 如这里没有你使用的邮件提供商，请查看自定义邮件服务器
  • SENDER_NAME : 寄件人名称。
  • TO_EMAIL：这个是填收邮件提醒的邮箱地址，若没有这个字段，则将邮件发到SMTP_USER。
  • TEMPLATE_NAME：设置提醒邮件的主题，目前内置了两款主题，分别为 default 与 rainbow。默认为 default

设置好以上变量之后 点击实例

然后重启项目，注意任何变动都要重启项目

然后看一下效果

还不错

自定义后台

首先需要设置管理员信息。访问管理员注册页面https://云引擎域名/sign-up，注册管理员登录信息，如：https://deserts-io.avosapps.us/sign-up

点击设置然后点击Web主机域名找到自己的后台地址

然后在Usee表中增加账号， 只需要填写 email、password、username 其中邮箱必须设置为你的上面环境变量的邮箱

设置完之后登录就能在你的后台管理评论

更多设置

邮件通知模板

邮件通知模板在云引擎环境变量中设定，可自定义通知邮件标题及内容模板。

环境变量示例说明
MAIL_SUBJECT{SITE_NAME}上的评论收到了回复[可选]@通知邮件主题（标题）模板
MAIL_TEMPLATE见下文[可选]@通知邮件内容模板
MAIL_SUBJECT_ADMIN${SITE_NAME}上有新评论了[可选]博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN见下文[可选]博主邮件通知内容模板

邮件通知包含两种，分别是被@通知和博主通知，这两种模板都可以完全自定义。默认使用经典的蓝色风格模板（样式来源未知）。

默认被@通知邮件内容模板如下：

<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">            ${SITE_NAME}</a>上的评论有了新的回复</h2> ${PARENT_NICK} 同学，您曾发表评论：<div style="padding:0 12px 0 12px;margin-top:18px"><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">            ${PARENT_COMMENT}</div><p><strong>${NICK}</strong>回复说：</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。<br></p></div></div>

效果如下图：

mail-blue-template

@通知模板中的可用变量如下（注，这是邮件模板变量，是指嵌入到HTML邮件模板中的变量，请勿与云引擎环境变量混淆）：

模板变量说明
SITE_NAME博客名称
SITE_URL博客首页地址
POST_URL文章地址（完整路径）
PARENT_NICK收件人昵称（被@者，父级评论人）
PARENT_COMMENT父级评论内容
NICK新评论者昵称
COMMENT新评论内容

默认博主通知邮件内容模板如下：

<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论</h2><p><strong>${NICK}</strong>回复说：</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br></p></div></div>

博主通知邮件模板中的可用变量与@通知中的基本一致，PARENT_NICK 和 PARENT_COMMENT 变量不再可用。

这里还提供一个彩虹风格的@通知邮件模板代码：

<div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>${PARENT_NICK} 同学，您曾在文章上发表评论：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>${NICK} 给您的回复如下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb"                href="${SITE_URL}"> ${SITE_NAME}</a>。</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div>

效果如图：

彩虹模板

垃圾评论检测

Akismet (Automattic Kismet)是应用广泛的一个垃圾留言过滤系统，其作者是大名鼎鼎的WordPress 创始人 Matt Mullenweg，Akismet也是WordPress默认安装的插件，其使用非常广泛，设计目标便是帮助博客网站来过滤留言Spam。有了Akismet之后，基本上不用担心垃圾留言的烦恼了。 启用Akismet后，当博客再收到留言会自动将其提交到Akismet并与Akismet上的黑名单进行比对，如果名列该黑名单中，则该条留言会被标记为垃圾评论且不会发布。

如果还没有Akismet Key，你可以去 AKISMET FOR DEVELOPERS 免费申请一个； 当AKISMET_KEY设为MANUAL_REVIEW时，开启人工审核模式； 如果你不需要反垃圾评论，Akismet Key 环境变量可以忽略。

为了实现较为精准的垃圾评论识别，采集的判据除了评论内容、邮件地址和网站地址外，还包括评论者的IP地址、浏览器信息等，但仅在云引擎后台使用这些数据，确保隐私和安全。

如果使用了本站最新的Valine和Valine Admin，并设置了Akismet Key，可以有效地拦截垃圾评论。被标为垃圾的评论可以在管理页面取消标注。

环境变量示例说明
AKISMET_KEYxxxxxxxxxxxx[可选]Akismet Key 用于垃圾评论检测

手动配置邮件服务器

  • 自定义邮件服务器地址和端口信息，删除SMTP_SERVICE环境变量，新增以下变量：
变量示例说明
SMTP_HOSTsmtp.qq.com[可选]SMTP_SERVICE留空时，自定义SMTP服务器地址
SMTP_PORT465[可选]SMTP_SERVICE留空时，自定义SMTP端口
SMTP_SECUREtrue[可选]使用TLS

Troubleshooting

  • 部署失败，请在评论中附图，或去Github发起Issue
  • 邮件发送失败，确保环境变量都没问题后，重启云引擎 重启云引擎
  • 博主通知模板中不要出现PARENT*相关参数（请勿混用模板）
  • 点击邮件中的链接跳转至相应评论，这一细节实现需要在Web前端添加一点额外的代码：
<script>
    if(window.location.hash){
        var checkExist = setInterval(function() {
           if ($(window.location.hash).length) {
              $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);
              clearInterval(checkExist);
           }
        }, 100);
    }
</script>

来自small-rose的模板

@邮件通知效果：

您在 ${SITE_NAME}上的留言有新回复啦！

${PARENT_NICK} 同学，您曾在文章上发表评论：

${PARENT_COMMENT}

${NICK} 给您的回复如下：

${COMMENT}

您可以点击查看回复的完整內容，欢迎再次光临 ${SITE_NAME}。

@邮件通知模板代码：

<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>${PARENT_NICK} 同学，您曾在文章上发表评论：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>${NICK} 给您的回复如下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> ${SITE_NAME}</a>。</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 0 0 10px 10px;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg,rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"></div></div>

博主通知效果：

您在 ${SITE_NAME}上的文章有了新的评论！

${NICK} 同学，发表评论说：

${COMMENT}

您可以点击查看回复的完整內容。

<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上的文章有了新的评论！</p></div><div style="margin:40px auto;width:90%"><p><strong>${NICK}</strong> 同学，发表评论说：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>。</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 0 0 10px 10px ;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg,rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"></div></div>

解决休眠

免费版的 LeanCloud 容器，是有强制性休眠策略的，不能 24 小时运行：

  • 每天必须休眠 6 个小时
  • 30 分钟内没有外部请求，则休眠。
  • 休眠后如果有新的外部请求实例则马上启动（但激活时此次发送邮件会失败）。

也就是如果服务器休眠了的话用户第一次评论是提醒不了的。

参考了Valine-Admin官网找到了解决办法。

首先在环境变量增加服务器地址，就是你的后台服务器地址

下面是你的服务器地址，可以自定义

同样登录后台

找到定时任务

然后点击创建任务，上面是我创建好的

选择self_wake函数，然后运行时间使用cron表达式

0 0/30 7-23 ? 表示每天6点到11点 每30分钟叫醒服务器一次

这样就完美的解决了服务器休眠的问题

那如果用户不在时间范围内发留言了怎么办？我们也可以创建一个捡漏的定时任务

创建捡漏定时任务

然后运行函数选择resend_mails,同样使用cron表达式

0 0 8 ?

表示每八个小时进行捡漏一次，这样如果有留言遗漏的话就能即使的提醒。

WakeLeanCloud

这个项目主要是用来解决LeanCloud通过定时任务唤醒机器时被流控的问题。

如何使用

  1. Fork此项目
  2. 添加一个名为GITHUB_TOKEN的Token，并为赋予repo，admin:repo_hook ， workflow的权限
  3. 添加名为SITE的Secrets，内容为自己管理后台地址。多个请用英文逗号分隔

详细教程请参考优雅解决LeanCloud流控问题

让hexo支持pwa

pwa中文叫渐进式网页应用，pwa网站可以直接添加网址站到桌面，就相当于在系统中直接安装了一个app，打开的效果也和app差不多，加载速度也很快，部分功能可以直接离线使用。Google的Workbox标准，目前来看需要Chrome支持

  • hexo-pwa 很久没更新，看到资料都是支持4.x版本hexo。
  • hexo-offline 亲自验证，支持最新5.x的hexo。

安装hexo-offline

npm install hexo-offline --save

关于这个插件的详细使用方法可以看下面这里

https://github.com/JLHwung/hexo-offline

配置hexo-offline

之后我们在站点根目录_config.yml如下配置

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  - /lib/**/*.js
  - /lib/**/*.css
  - /images/*
  - /js/src/**/*.js
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.bootcss.com

注意哦不是主题的_config.yml文件

之后生成manifest.json文件，可以在这个网站在线生成。

填入相关的参数，如下

Tips: 一定需要一个512x512的icon！

之后点击generate.zip 把配置都下载过来

把manifest.json和images文件夹直接复制到hexo下source文件夹中，最后我们编辑主题，在head里添加

<link rel="manifest" href="/manifest.json">

如果使用的是hexo next主题，在

themes/next/layout/_partials/head/head.swig

如果使用的是hexo matery主题，在

themes/matery/layout/_partial/head.ejs

这个文件中添加上面这句话即可，最后直接重新生成站点，部署即可

验证和使用

需要https访问，看到这个齿轮

F12 sources

然后在浏览器地址栏可以看到应用标志

Tips: offline 需要https才能正常使用

地址栏

点击打开，会看到如下结果，试一下？

离线博客

valine 的使用与升级到1.4

一、valine启用

1、主要流程

valine和miniValine使用基本类似。

（1）去 Leancloud注册。

注意事项：

节点选择：华东节点、华北节点、国际版。

如果你的域名没有备案，建议选择国际版。 因为华东或华北节点在安装评论系统之后访问要求域名备案。

（2）在“设置“，”应用 Keys”，找到你的appid和appkey，配置到主题中valine配置的地方，启用valine。

（3）在“设置“，”安全中心”，”Web 安全域名”，添加自己的域名。

（4）在“设置“，”安全中心”，”服务开关”，数据存储要打开。

（5）在“存储“，”用量统计”，”HTTP状态码”，启用，方便后续报错查错误码。

（6）重新编译部署hexo clean & hexo g & hexo d

2、遇到问题

搞这个东西采坑不少，有些坑都是自己不小心造成的。我在网上查了，交流群里也咨询请教了，没有人能解决这个问题，毕竟这个坑是自己造成的。

常见Code 403问题：

Code 403: 访问被api域名白名单拒绝，请检查你的安全域名设置.

网上多数的说法是在web安全域名中添加自己的域名。可是如果添加之后还是这个问题呢？

其实一般不会有这个问题，我有这个问题是我改了权限造成了。

官方给的解释：

应用在控制台中的相关服务选项未打开，如 Class 关闭了权限，或是 User 缺失了 session 信息等情况下，云端会统一地返回 403 错误码及不同的错误信息，代表当前请求因权限不够而被拒。例如：

信息 - Forbidden to read/write by class permissions
含义 - 操作被禁止，因为 Class 表没有打开「读」或者「写」的权限。进入 控制台 > 存储，点击相应的 Class，从右侧选择 其他 下拉菜单，进入 权限管理 来调整。

信息 - The user cannot be altered by a client without the session.
含义 - 用户没有登录，无法修改用户信息。

解决：

（1）首次使用，添加一条评论，一般添加之后就会好了。

（2）后续使用，403，请检查comment表的add_fields/create/find权限开放。

（3）如果还是不行将_use表的add_fields/create/find权限开放。

（4）如果还是不行，到“存储“，”用量统计”，”HTTP状态码”处，检查你的错误码，然后去LeanCloud的错误找应用的错误码，排查原因吧。

二、valine升级

1、引入1.4版的js文件

（1）修改主题配置文件

js:
  valine: https://unpkg.com/valine/dist/Valine.min.js #/libs/valine/Valine.min.js

（2）将文件放你自己的仓库

下载我的 Valine.min.js 文件，直接替换你主题目录 /source/libs/valine/ 下的 Valine.min.js 文件。

注意，如果你担心替换有问题，可以先备份一下你自己的 Valine.min.js 文件。

2、增加valine的配置：

1.4的版本有些属性调整了，主题下的_config.ymlvaline属性如下：

valine:
  enable: true
  appId: iTxfqh5e9IaRfiiVOTbIWoKa-XXXXXX
  appKey: C5s5xGFErD1EtXXXXXXXX
  verify: true  # 是否启用防垃圾验证
  notify: true  # 是否开启邮件提醒(https://valine.js.org/notify.html)
  visitor: true
  avatar: monsterid  # 头像样式(https://valine.js.org/avatar.html) 
  pageSize: 10
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!' # Comment Box placeholder
  background: /medias/comment_bg.png #背景图
  count: true
  enableQQ: 970175021
  recordIP: true
  requiredFields: 
    - nick
    - mail
  guest_info: 
    - nick
    - mail
    - link
  master: 
    - 123abc508165c8eba9a77f872xxxx046  # md5加密后的博主邮箱
  metaPlaceholder:  # 输入框的背景文字
    nick: 昵称/QQ号(必填)
    mail: 邮箱(必填)
    link: 网址(https://)
  lang: zh-CN
  tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
    - 博主
    - 小伙伴
    - 访客
  friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
    - c08508165c8eba9a77f8c2853xxxx09e
    - 901345d4c91ddfd8db0f175bbcfff0c8
    - 1512958e18378c98b498d5effe3e76ff

复制代码注意缩进对齐，不对齐可能会报错，请自行检查对齐。

3、修改valine.ejs：

Matery 主题使用的ejs模板预编译，如果你使用了pug或者swig等其他的模板语言，请修改成对应语言语法即可。

原始的valine.ejs

new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<% if (config.language == "zh-CN") {  %>zh-cn<% } else { %>en<% } %>',
        placeholder: '<%= theme.valine.placeholder %>'
    });

升级后的valine.ejs

let metaPlaceholder = <%-  JSON.stringify(theme.valine.metaPlaceholder) %> ;
//这里要换行
new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<%- theme.valine.lang %>',
        placeholder: '<%= theme.valine.placeholder %>',
        meta: <%- '["' + theme.valine.guest_info.join('", "') + '"]' %>,
        recordIP: '<%- theme.valine.recordIP %>' === 'true',
        enableQQ: '<%- theme.valine.avatar %>',
        requiredFields: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        master: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        friends: <%- '["' + theme.valine.friends.join('", "') + '"]' %>,
        tagMeta: <%- '["' + theme.valine.tagMeta.join('", "') + '"]' %>,
        metaPlaceholder: metaPlaceholder,

    });

如果需要验证昵称和邮箱可以加上以下代码：

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9_-\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            e.stopPropagation();

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
    }, true);

说明：代码非原创，JS正则验证本身也不难。

好了可以部署之后自己测试一下。

顺便说一下，填写昵称邮箱和网址的地方如果折行了就按我的样式改一下就好：

在 valine.ejs 是上面对着改一下就好了：

.v[data-class="v"] .vwrap .vheader .vinput {
  width: 32%;
  border-bottom: 1px dashed #dedede;
}

新建文章自动打开本地Markdown编辑器

写新文章时，需要控制台执行hexo new “文章名字”生成一篇新文章，但需要手动打开，挺麻烦，我们可以设置在生成之后自动打开。

注意，node 和Marddownb编辑器需要在同一个主机环境下面脚本才能运行。所有使用docker的，远程ssh的都不能用这个。

在站点根目录下新建scripts目录，然后在新建auto_open.js，在文件填入一下内容

var spawn = require('child_process').exec;

// Hexo 2.x 用户复制这段
//hexo.on('new', function(path){
  //spawn('start  "markdown编辑器绝对路径.exe" ' + path);
//});

// Hexo 3 用户复制这段
hexo.on('new', function(data){
  spawn('start  "D:\Program Files\Typora\Typora.exe" ' + data.path);
});

其中”D:\Program Files\Typora\Typora.exe”是我本地编辑器的路径，只需要改为你本地编辑器的路径即可，然后在执行hexo cl && hexo g -d，部署到GitHub即可，以后在新建文章就会自动打开编辑器。

常见问题

通过hexo g -d部署时报Error: Spawn failed错误:

这是由于 git 本地记录的提交版本号与 github 上不一致导致的，通过git reset --hard commitCode即可解决。

  • 检查本地最近提交记录，获取最后一次提交记录的更新时间及标识，如280a7fdd46fcfd7d34e652aec15523dcd247fac8
cd .deploy_git
cat .git/logs/HEAD
  • 获取 github pages 服务所关联分支的最近一次提交记录，获取更新时间及标识。地址一般为：https://github.com/用户名/仓库名/commits/分支名，如https://github.com/lxl80/blog/commits/gh-pages
  • 如果发现提交最新的提交时间/标识不一致，通过以下命令即可解决:
git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交标识

fsevents报错

npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for
fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS:    darwin npm
ERR! notsup Valid Arch:  any npm ERR! notsup Actual OS:   win32 npm
ERR! notsup Actual Arch: x64

解决方法：修改package.json

"optionalDependencies": {
  "fsevents": "^2.3.2"
},

关于百度无法爬取GitHub内容解决方案

  • 使用coding搭建一个可以被百度爬取到的代码托管平台
  • 使用vps搭建一个hexo 镜像访问，专门针对搜索引擎。

Tips: 博主用了第二种方法，2个域名，前端域名用dnspod，采用cloudflare parter cname接入。dnspos有选路选择，针对搜索引擎进入vps搭建的blog，对于其它线路到cloudflare parter 加速过的github pages cname。后端域名用cloudflare parter 以及免费版cloudflare管理。

既然百度无法爬取GitHub，那么我们只需要找个可以被百度爬取到的代码托管平台即可（并且还提供pages服务），基本只有国内的平台了：Gitee和Coding！Gitee自定义域名要花钱（九十多，都可以买服务器了），而Coding是可以免费自定义域名的。这里推介大家使用企业版的Coding，因为企业版的Coding仓库服务器是在香港的，而普通版的服务器是在新加坡。地理原因，理论上企业版的更快一些！

  1. 将博客同时部署到两个仓库：GitHub和Coding

    deploy:
- type: git
  repository: git@github.com:xxx/xxx.github.io.git
  branch: master

- type: git
  repository: git@e.coding.net:xxx/xxx.git
  branch: master

  2. 在域名那里，配置两个解析

    线路类型作用：如果该值填“国内”，国内的IP就会去访问此项对应的记录值地址

    同理，如果该值填写“国外”，国外的IP就会去访问“国外”对应的记录值地址

    1. 线路类型为百度或者国内，记录值为Coding仓库的地址
    2. 线路类型为默认或者国外，记录值为GitHub仓库地址

  3. 这样来自百度的spider就会去爬国内Coding的地址，而两个仓库的内容又都是一样的，如果请求IP来自国外，它又会去访问国外的GitHub，这样还有利于外国华侨和那些科学上网的用户访问，一石二鸟！（我真他妈天才！）

  4. 如果你只用Coding仓库，那就不需要这么麻烦了

  5. 测试百度Spider能不能爬你的域名

    1. 在任意目录下执行以下命令（将“你的域名”换成你的域名）

      curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)" -o example.html 你的域名

    2. 执行完命令，在该目录下会生成一个文件：example.html，打开它，如果显示

      • Moved Permanently，说明301，被重定向了

      • Found，也就是爬到了

      • 如果打开是你的首页，说明爬取到的内容就是你的首页HTML内容。

      • 如果显示：

        说明域名是解析到GitHub的，403Forbidden访问禁止。

busuanzi不蒜子计数显示异常，一闪就没

  1. 原因可能有两种live2d看板娘和busuanzi不蒜子计数冲突

  2. busuanzi不蒜子网络访问异常。

  1. 不在leancloud安全名单

  2. 不是正常域名访问

  3. 各种网络访问错误等等

近日安装了live2d看板娘插件，github项目地址，安装后却意外发现busuanzi不蒜子计数失效了,在页面中不显示，但强制刷新后出现，再刷新又消失。经排查，未发现问题，但事实是网站源码出现了变化。

正常时

<div id="busuanzi_container_page_pv" class="info-break-policy" style="display: inline;">
    <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
    <span id="busuanzi_value_page_pv">433</span>

异常时

<div id="busuanzi_container_page_pv" class="info-break-policy" style="display: none;">
    <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
    <span id="busuanzi_value_page_pv">434</span>

对比发现出现了多余的style="display: none;。
经过搜索主题源码，发现这个文件themes\matery\source\libs\others\busuanzi.pure.mini.js控制显示。

可以直接下载下面这个地址的js替换，来自个人blog的js busuanzi.pure.mini.js，直接下载这个js替换即可。下面源码经过了展开美化，原始文件是压缩去空格版本的。
注意： 这是一种破坏性修复，没有解决根本问题，临时修复方案。

var bszCaller, bszTag;
! function () {
    var c, d, e, a = !1,
        b = [];
    ready = function (c) {
        return a || "interactive" === document.readyState || "complete" === document.readyState ? c.call(document) :
            b.push(function () {
                return c.call(this)
            }), this
    }, d = function () {
        for (var a = 0, c = b.length; c > a; a++) b[a].apply(document);
        b = []
    }, e = function () {
        a || (a = !0, d.call(window), document.removeEventListener ? document.removeEventListener(
            "DOMContentLoaded", e, !1) : document.attachEvent && (document.detachEvent("onreadystatechange",
            e), window == window.top && (clearInterval(c), c = null)))
    }, document.addEventListener ? document.addEventListener("DOMContentLoaded", e, !1) : document.attachEvent && (
        document.attachEvent("onreadystatechange", function () {
            /loaded|complete/.test(document.readyState) && e()
        }), window == window.top && (c = setInterval(function () {
            try {
                a || document.documentElement.doScroll("left")
            } catch (b) {
                return
            }
            e()
        }, 5)))
}(), bszCaller = {
    fetch: function (a, b) {
        var c = "BusuanziCallback_" + Math.floor(1099511627776 * Math.random());
        window[c] = this.evalCall(b), a = a.replace("=BusuanziCallback", "=" + c), scriptTag = document.createElement(
                "SCRIPT"), scriptTag.type = "text/javascript", scriptTag.defer = !0, scriptTag.src = a,
            document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)
    },
    evalCall: function (a) {
        return function (b) {
            ready(function () {
                try {
                    a(b), scriptTag.parentElement.removeChild(scriptTag)
                } catch (c) {
                    bszTag.hides()
                }
            })
        }
    }
}, bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback", function (a) {
    bszTag.texts(a), bszTag.shows()
}), bszTag = {
    bszs: ["site_pv", "page_pv", "site_uv"],
    texts: function (a) {
        this.bszs.map(function (b) {
            var c = document.getElementById("busuanzi_value_" + b);
            c && (c.innerHTML = a[b])
        })
    },
    hides: function () {
        this.bszs.map(function (a) {
            var b = document.getElementById("busuanzi_container_" + a);
            b && (b.style.display = "")
        })
    },
    shows: function () {
        this.bszs.map(function (a) {
            var b = document.getElementById("busuanzi_container_" + a);
            b && (b.style.display = "inline")
        })
    }
};

替换的人请操作其实就是把其中的b.style.display="none"中none去掉。

不蒜子 (busuanzi) 文章计数出错问题

出现这个原因，和 Chrome 85 版本 Referrer Policy 更改有关。什么是 Referrer，简单理解，就是请求 Web 服务器时，可以在 HTTP Request 的请求头 (header) 中加上当前页面的 URL，例如我们在浏览某个博客页面，需要加载一些图片，从服务器请求这些图片时，referrer 就是当前的博客页面 URL。从这里也可以看出，referrer 可能会暴露请求来源的某些信息或者隐私，有一定的隐私或安全风险。之前版本的 Chrome 浏览器，如果网站没有指定自己的 Referrer Policy，那么 Chrome 默认 policy 是 no-referrer-when-downgrade，在 Chrome 85 版本中，为了保护用户的隐私，默认的 Referrer Policy 则变成了 strict-origin-when-cross-origin。

  • no-referrer-when-downgrade: 当两个网站的 http 协议安全等级相当，或者目的网站安全协议等级高于当前网站(HTTP –> HTTP, HTTPS –> HTTPS, HTTP –> HTTPS)， referer 将会包含源网站的域名，路径，查询字符串；如果目的网站安全协议等级低于源网站 (HTTPS –> HTTP)，将不会发送这些信息。
  • strict-origin-when-cross-origin： 只有当做同一域名请求时 (源网址和目标网址是同一域名），才发送域名，路径和请求字符串，当两个网站安全协议相当时，发送源网站的域名(没有具体路径信息和查询字符串)，如果目标网站安全协议等级低于源网站，不发送 header 信息。

不蒜子统计博客文章访问量就是通过 referer 来计算的，通过上面的分析，如果 Referrer Policy 是 strict-origin-when-cross-origin，不蒜子接收到的只有博客的域名，没有文章的具体路径，所以具体某个文章的 PV 统计会出现错误。

修复方法：

在主题文件夹下/layout/_partial/head.ejs中添加

<meta name="referrer" content="no-referrer-when-downgrade">

如何多个域名映射同一个github pages

可能由于某种原因，换了一个域名，之前又有一些被搜索引擎收录，但是又不想让原来的链接失效，就需要让两个域名都映射到github pages中。本文介绍几种当前可能的方法。欢迎提出更多有效方法。

直接映射有什么问题？

你可能会想，两个域名都映射到github pages不就可以了？然而事实并非如此。首先当前github 的CNAME中只支持一个域名。因此CNAME文件中只能有一个域名，而如果在域名映射中将两个域名都映射到username.github.io，那么其中有一个会出现404错误。

前提

以下方法的前提是你已经明白如何为自己的github pages添加自定义域名。

需要注意什么？
  • 需要给各大网站提交新的域名网址，重新被收录
  • 域名变换前面网站的内容结构不能变，否则重定向也没有意义
  • 当前单纯的域名没有办法进行备案
  • 注意修改配置文件里的主域名为新的域名
  • 由于更换了新的域名，导致原来leancloud统计的访问数据需要重新计算，也就是网站访问量被清零了，leancloud也需要更新域名
  • 新的com域名可申请免费的SSL证书，保证https可访问，而不会提示不安全
  • 301重定向会将旧地址的权重转义到新地址上
  • 百度收录速度较慢
方法一：域名托管平台重定向

有的域名服务商提供重定向功能，以阿里云为例，在域名映射添加记录的时候，可以选择显性URL或隐性URL。但是自己在尝试这种方法的时候，会提示我URL备案异常。可能是由于这个时候已经用新的域名映射了博客地址，但是新的域名实际上是没有备案的。更无奈的是，目前貌似没有办法单独对域名进行备案。因此本人放弃了该方法。

如果你的博客也是部署在github上的，那么这种方法就不用尝试了，如果你的博客是部署在自己的服务器上的，那么网上都很多方法，这里就不介绍了。

方法二：部署两个仓库

我们注意到，除了github pages，还有coding.net可用。它与github类似。原来的域名映射到这个地址就可以了。而在部署hexo的时候，是可以添加两个仓库地址的：

deploy:
- type: git
  repository: git@github.com:username/username.github.io.git
  branch: master
- type: git
  repository: git@git.coding.net:username/username.git
  branch: coding-pages

这两个仓库内容唯一的差别就是域名不一样，即CNAME中的记录值不一样。这样当访问两个不同的域名的时候，是访问不同的两个平台仓库。但是原来域名的权重不会转到新的域名中去。

方法三：新增项目重定向

假如你已经有username.github.io项目，新建一个名为blog(名字自定义)的项目，在项目的setting中，开启github pages服务，并且将旧的域名映射到username.github.io。

实际上，github pages并不是只能有一个，例如，你新创建的仓库访问地址为：username.github.io/blog。
由于旧的域名映射会导致404错误，那么在我们的新项目中增加一个404.html，在页面中进行跳转即可：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
 <script language="javascript">
var domain = "换成你自己的新域名";
var src = window.location.href;
var prtc = src.substring(0, src.indexOf(':'));
var target = src.substring(src.indexOf('/', src.indexOf(':') + 3));
window.location.href = prtc + "://" + domain + target;
location.href=prtc + "://" + domain + target;
</script>
<body>
 <h1></h1>
</body>
</html>

另外，需要利用google的地址更改功能，使得旧网址的权重往新网址转移。
找到search console中的地址更改工具（设置按钮中找到）。

除了增加404页面外，还需要增加CNAME文件，里面的内容是你原先的域名。

到这里基本完善了，更多插件攻略，公式，Mermaid图表等功能，请参考下面文章。

Hexo Markdown以及各种插件功能测试
hexomatery 下面的一些功能测试，新插件的靶场。数学公式，Mermaid,plantuml图表绘制，音乐视频插入，bilibilid、豆瓣卡片等等。

参照

文章作者: 夜法之书
文章链接: https://blog.17lai.site/posts/40300608/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
Github hexo matery cdn seo
赏
评论
  目录