Hexo 公式显示问题苦天下久矣。

写这篇文章的初衷是因为最近在用多行公式时（主要是换行与对齐）出现了问题，\begin{align} \end{align} 竟然渲染不了。我用的是广被推崇的 hexo-renderer-markdown-it-plus，没想到也会在这个地方出现问题。
所以先用 \begin{array}{rcl} \end{array} 凑活一下。表格形式与纯粹的公式毕竟不同，是以行内公式的形式渲染的【从积分符号 $\int$ 的大小可以明显看出区别】，同时必须在每行之间再分行，否则会显得拥挤。
如下：

$$\begin{array}{rcl}\int \csc udu &=& \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u} \\&=& -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\&=& -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\&=& \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\&=& \ln\left|\tan\frac{u}{2}\right|+C\end{array}$$

$$\begin{array}{rcl}\int \csc udu &=& \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u} \\&=& -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\\\&=& -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\\\&=& \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\\\&=& \ln\left|\tan\frac{u}{2}\right|+C\end{array}$$

这属于治标不治本的方法，所以在有时间的时候还是寻求根本的解决方法。

于是开始了满满的搜索之路，结果找到了三个方案，实际上是三个插件或者说是渲染器：

hexo-renderer-pandoc

官网：https://pandoc.org/
npmjs：https://www.npmjs.com/package/hexo-renderer-pandoc
github：https://github.com/wzpan/hexo-renderer-pandoc

这个插件用过的人都说好，是一个不错的解决方案，使用时需要先卸载原生渲染器，再下载该插件：

1
2

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

如果这时重新生成博客的话，一定会报错，原因是没有找到 pandoc
啊，明明下载了插件为什么还会报错？因为它还需要 pandoc 软件本地支持。在本地没问题，安装一个最新版本的就可以，获取本地软件-windows版。如果要使用 Githua Actions 自动发布博客，那还需要为pandoc进行额外配置：
根据官方文档，该配置如下：

1
2
3
4
5
6
7
8
9
10
11

name: Simple Usage

on: push

jobs:
  convert_via_pandoc:
    runs-on: ubuntu-18.04
    steps:
      - uses: docker://pandoc/core:2.9
        with:
          args: "--help" # gets appended to pandoc command

这个 Github Actions 我没有试验，不过本地渲染效果确实还可以。

pandoc 的优点显而易见，渲染效果好。缺点也很明显，部署麻烦，而且据搜索到的结果显示耗费资源多，加载缓慢。如果我目前使用的渲染器不行了之后，或许会回过头来研究 pandoc。

markdown-it-latex2img

npmjs：https://www.npmjs.com/package/markdown-it-latex2img
github：https://github.com/MakerGYT/markdown-it-latex2img#hexo

严格意义上讲，它不是一个渲染器，而是一个渲染器的拓展：
它不使用原生渲染器，以及任何其他的渲染器，而是 hexo-renderer-markdown-it，安装：

1
2

npm i hexo-renderer-markdown-it --save
npm i markdown-it-latex2img --save

它是在服务器上工作的，可以成功渲染多行公式 \begin{align} \end{align}，但对于一些显然的内容却不能成功渲染: \Alpha
从名字上也可以看出来，返回的公式是图片形式的。简短的，不占用篇幅的公式呈现效果没什么大问题，但是大片的公式图片就会随着页面的放缩而放缩，影响阅读效果。
另外，如果他的服务器坏掉了，公式图片也就呈现不了，搜索中发现有用户出现过这个问题。
在这里提供在 _config.yml 中的配置：

1
2
3
4
5

markdown:
  plugins:
    - name: markdown-it-latex2img
      options:
        style: 'filter: opacity(90%);transform:scale(0.85);vertical-align:middle;text-align:center;'

hexo-renderer-markdown-it-plus

github：https://github.com/KaTeX/KaTeX
官网：https://katex.org/docs/browser.html

这是我目前正在使用的公式渲染器，十分优雅。但是会出现开篇所说的多行公式显示的问题。实际上，该问题的原因不在该渲染器，因为渲染效果是依靠引入的 katex。所以我把目光放在 katex 上。通过搜索，我发现 Issue #445，在当时（16年左右）以及后续相当长一段时间，equation 环境不被支持，同时不能支持的还有 aligned、aligne 等语法。而我引入的 js 和 css 是早期的版本（0.12版），当时并没有解决这一问题。现在我将其更换为目前最新的 0.16 版本，即可完美支持。示例如下：

$$\begin{aligned}\int \csc udu &= \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u}\\&= -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\&= -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\&= \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\&= \ln\left|\tan\frac{u}{2}\right|+C\end{aligned}$$

\begin{align}f(x)&=(m+n)^2\\&=m^2+2mn+n^2\\ \end{align}

\begin{alignat}{2}f(x) & = (m-n)^2 \\f(x) & = (-m+n)^2 \\& = m^2-2mn+n^2 \\\end{alignat}

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$$
\begin{aligned}
\int \csc udu &= \int\cfrac{\sin u}{\sin^2 u}du=-\int\cfrac{d(\cos u)}{1-\cos^2 u}\\
&= -\frac{1}{2}\int(\cfrac{1}{1-\cos u}+\cfrac{1}{1+\cos u})d(\cos u)\\
&= -\frac{1}{2}[-\ln(1-\cos u)+\ln(1+\cos u)+C]\\
&= \ln\left|\sqrt{\frac{1-\cos u}{1+\cos u}}\right|+C=\ln\left|\sqrt{\frac{2\sin^ \frac{u}{2}}{2\cos^ \frac{u}{2}}}\right|+C\\
&= \ln\left|\tan\frac{u}{2}\right|+C
\end{aligned}
$$

$$
\begin{align}
f(x)&=(m+n)^2\\
&=m^2+2mn+n^2\\ 
\end{align}
$$

$$
\begin{alignat}{2}
f(x) & = (m-n)^2 \\
f(x) & = (-m+n)^2 \\
& = m^2-2mn+n^2 \\
\end{alignat}
$$

这里提供最新的引入内容：

1
2
3
4
5
6
7

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://fastly.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"onload="renderMathInElement(document.body);"></script>

最后补充一点，hexo-renderer-markdown-it-plus 是 hexo-renderer-markdown-it 的升级版，渲染速度更快，同时也具备增加各类插件的功能。这里需要提到 markdown-it-katex 这个插件，它实际上是对 katex 的支持。但我不建议使用，原因在于它很久没有维护了，也就无法更新 katex 的最新特性，而且它也要额外引入 katex 的 .css 文件，所以为何不直接引用 katex 的 js 与 css呢？

   配置 哔哔点啥 的记录和踩坑，前部分是哔哔发展历程，后部分是 哔哔点啥2.0 配置

1 哔哔发展历程

Artitalk.js

这个应该是比较早的 说说 了，基于 LeanCloud，很多博客都集成了这个说说功能，可以说是现在说说的开山？

a. 基本功能具备：
支持增删查改，支持对每条说说的评论，支持 Markdown、html语法，支持图片上传。

b. 配置方便灵活：
后端 leancloud 配置过程简单，前端就是一般的 html 几乎可用于任何框架。

c. 安全性一般：

由于 leancloud 的机制，应用的 Appid 以及 Appkey 均会暴漏在前端，可能会遭受到其他人的恶意攻击。 如果你在担心这个问题，你可以使用 Artitalk_SafeMode。

问题是，每次发布说说需要打开博客说说页面登录，发布一条说说和发布一个评论差不多，比较麻烦。

BBtalk

该说说，由 heson 大佬开发，最开始在其博客连载开发过程。

开发历程可见大佬博客 ：黑石博客分类“哔哔”下的文章

其起源于 熊野大佬 的 哔哔点啥，换个舒服的姿势 ，基于静态存储+云函数+微信公众号开发

黑石大佬将其适配了多个主题，并开发了 Hexo-bb 插件，可以方便的在任何一个主题使用，后端依然使用 leancloud ，支持微信公众号发文。

BBer：哔哔点啥 微信公众号 2.0

这是 熊野大佬 哔哔点啥的升级版，由 林帅 开发，看博客评论都叫他木老师，事实上第一版的公众号发文也是放到了木老师的公众号上。

所以，实际上，BBtalk 和 BBer 是同源的，都是来自 熊野大佬 的版本。

2.0 和 1.0 的主要区别在于，使用的后端平台由 LeandCLoud 变化为 腾讯 CLoudBase，公众号支持由单用户扩展为多用户。

说说可以通过微信公众号发布（看文章封面图，就是那个公众号），目前已支持用户名绑定、解绑、发文字、发图片、追加、合并、删除、替换文字，还有显示哔哔列表、哔哔搜索！
目前支持的命令如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

「哔哔秘笈」
==================
/l - 显示最近哔哔
/s 关键词 - 搜索内容
---------------
/a 文字 - 追加文字到第1条
/a数字 文字 - 追加文字到第几条，如 /a2 文字
---------------
/c - 合并前2条
/c数字 - 合并前几条，如 /c3
---------------
/d - 删除第1条
/d数字 - 删除第几条，如 /d2
---------------
/e 文字- 编辑替换第1条
/e数字 文字 - 编辑替换第几条，如 /e2 文字
---------------
/f数字 - 批量删除前几条，如 /f2
---------------
/nobber - 解除绑定

同时 2.0 提供了 BBer-weixin 微信公众号的后端配置，可以完全把所有数据掌握在自己手里【用自己的公众号】

另外，有不少大佬给 BBer 扩展了功能，主要是前端部分以及发布方式
小康大佬 提供了美化的前端页面 和 浏览器扩展插件发布说说
Guo Le 在此基础上，加入了歌曲分享支持，对浏览器插件，不同浏览器设置不同的 from 源
同时由于 BBer 的发布接口简洁，可以通过 ios 快捷指令发布，android 也有 apk 支持。

所以本站选择了功能丰富的 哔哔点啥 2.0。

2 哔哔点啥-后端配置

这部分主要是原作者教程的搬运：BBer：哔哔点啥 微信公众号 2.0 ，但更详细了些。
原作者提供了腾讯云开发一键部署，但是其支持按量计费，不太经济。个人建议，手动部署就好了，麻烦是麻烦了点，但是有本文的帮助，相信一定不会有问题。
配置的时候最好手机在身边，需要多次扫码验证身份。

默认大家都有腾讯云的账号，我是在一开始建站的时候就用的腾讯云，没有的话先注册一个。

2.1 创建应用

2.1.1 新建环境

这里，选择空模板进入下一步，环境名称自由填写，推荐选择计费方式包年包月，实际上按小站的访问量和发说说的次数， 免费版 就够用了，不放心的话就采用基础版套餐1，先买个一个月，选择环境到期后自动降为免费版，到时候根据实际使用情况进行续费或者继续使用免费版。
唯一值得注意的是，建议创建上海环境，否则在前端页面配置时要指定 region: “ap-guangzhou”

[2.1.1 新建环境 1]

[2.1.1 新建环境 2]

[2.1.1 新建环境 3]

2.1.2 环境-登录授权

选择 “匿名登录”

2.1.3 环境-安全配置

将你要使用哔哔页面的个人网站域名添加到 “WEB安全域名”
最好将你平时本地调试用的 localhost: 也添加进去，例如 hexo 本地发布默认 localhost:4000

[2.1.3 环境-安全配置 1]

[2.1.3 环境-安全配置 2]

2.1.4 新建数据集合

进入数据库，新建数据集合，命名为 talks
点击创建好的数据集合 talks ➡ 点击 权限设置 ➡ 权限设置为 “所有用户可读，仅管理员可写”

[2.1.4 新建数据集合 1]

[2.1.4 新建数据集合 2]

2.2 云函数部署

2.2.1 新建云函数

1. 点击侧边栏 基础服务-云函数 ➡ 点击新建云函数 ➡ 运行环境选择 Nodejs 10.15 ➡ 函数名称设置 bber （可自定义）
2. 点击下一步 ➡ 描述部分随意，函数代码部分 复制 index.js 代码到函数代码框中，点确定。
3. 点击创建好的 bber ， 点击函数代码，右键新建文件 package.json 文件
4. 复制 package.json 代码丢入 package.json，点击 保存并安装依赖。
   成功后，文件目录会出现 node_modules 文件夹

[2.2.1 新建云函数 1]

[2.2.1 新建云函数 2]

[2.2.1 新建云函数 3]

[2.2.1 新建云函数 4]

2.2.2 环境-访问服务

新建，路径与云函数名匹配。

大概需要3-5分钟时间创建，创建好之后，点击触发路径或在浏览器中输入

1

https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber

会出现 {"content":"key不匹配"} 则说明配置好了

这里说的 apikey 在云函数 index.js 的第8行，const serverkey = 'bber'，将其改为你自定义的 key 值，避免别人拿到你的信息绑定之后乱搞。

配置到这个地方，就可以绑定微信公众号发说说，可以直接使用作者的公众号【见封面，或者搜索哔哔点啥】
发送如下即可绑定成功

1

/bber key值,https://你的云函数HTTP访问地址/bber

key 值为你自定义的 const serverkey，
https://你的云函数HTTP访问地址/bber 为你的触发路径
绑定成功后就可以发送哔哔了，数据都会储存在 前面创建的 talks 中。

3 哔哔点啥-前端配置

虽然目前后端可以接收到数据，并存储数据，但是，还是需要在页面呈现
这里可以直接使用小康大佬的美化 给 bber 换个皮肤 、ispeak-bber ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id='speak'></speak>
<!-- 使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber-md.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script>
<!-- 解析微信表情（参考：https://github.com/buddys/qq-wechat-emotion-parser） -->
<!-- <script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
<script>
ispeakBber
    .init({
      el: '#speak', // 容器选择器
      name: 'DreamyTZK 🦄', // 显示的昵称
      envId: '腾讯云开发环境id', // 环境id
      region: 'ap-shanghai', // 腾讯云地址，默认为上海
      limit: 10, // 每次加载的条数，默认为5
      avatar: 'https://cdn.jsdelivr.net/npm/kang-static@latest/avatar.jpg',
      fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
      loadingImg: 'https://7.dusays.com/2021/03/04/d2d5e983e2961.gif', // 自定义loading的图片，示例值为默认值
      dbName:'talks' // 数据的名称，默认talks，避免有人的命名不是这个，所以加入此配置字段。
    })
    .then(function() {
      // 哔哔加载完成后的回调函数，你可以写你自己的功能
      console.log('哔哔 加载完成')
    })
</script>

如果需要支持歌曲分享，请看：ispeak-bber 前端美化增强版，支持歌曲分享

目前我的说说页面，说说总量的计算是没有显示的，这个问题有待研究。

具体到每个主题的配置要看每个主题的页面情况，大体都是新建 index.md 文件，将其直接复制进去就可以了。
stellar 适配：可见本文下方:前端页面的-stellar-主题适配
Butterfly 适配：Hexo-Butterfly说说朋友圈适配（哔哔 for 腾讯云）自用

4 哔哔点啥-微信公众号配置

这个配置因人而异，嫌麻烦可以直接用原作者的微信公众号，但是我希望将所有数据放在自己手里，所以用自己的公众号
这里的公众号个人的就可以，新注册的就行，没什么别的要求。

4.1 新建云函数

参考前面 哔哔点啥后端的配置过程。

创建云函数的时候一定记得修改运行环境为：Nodejs 10.15
如果使用默认的 Nodejs 12.16 需要将 package.json 中的 "type": "module", 删掉
原因在于作者发布的教程的这段时间里，ES Module 的版本迭代，一开始不再支持 require 而采用 import，除非在 package.json 中加入 "type": "module",。而最新版的 js 好像又解决了这个问题，不需要加入 "type": "module",，加入了反而会报错。

云函数命名为 bber-weixin
index.js 和 package.json 来自于 https://github.com/lmm214/bber-weixin/tree/main/bber-weixin

4.2 获取公网 Ip

点击 bber-weixin 云函数，右上角 【编辑】，开启 【固定IP】，留存 公网固定IP。

[4.2 获取公网 Ip 1]

[4.2 获取公网 Ip 2]

保存成功后，固定 IP 那里会出现一个 IP 地址，留存这个地址备用。

4.3 新建数据集合

进入数据库，新建数据集合，命名为 users
点击创建好的数据集合 users ➡ 点击 权限设置 ➡ 权限设置为 仅创建者及管理员可读写
该数据集合用于存储公众号的绑定的哔哔用户。

4.4 获取触发路径链接

进入 环境-访问服务 ，新建 /bber-weixin 触发路径
获取这个触发路径链接并留存，如以下格式：

1
2
3

https://××××××.ap-shanghai.app.tcloudbase.com/bber-weixin
或者
https://自定义域名/bber-weixin

4.5 微信公众平台配置

打开 微信公众平台，进入开发-基本配置，获取 AppID 和 AppSecret 留存，修改IP白名单为上一步的 公网固定IP 。
继续服务器配置:

URL 为 4.4 留存的触发链接；
Token 可以自定义，原始代码中预设为 weixin
此时先不点提交，还要回到 云函数 配置。

4.6 回 bber-weixin 云函数

回 bber-weixin 云函数，填入微信公众号 AppID 和 AppSecret 保存。

1
2
3
4

const token = 'weixin' // 微信公众号的服务器验证用的令牌 token，我自定义为了 ceshi123，这里就填 ceshi23
//填入自己的微信公众号appid和appsecret
var wxappid = '微信公众号appid',
    wxappsecret = '微信公众号appsecret',

4.6 回 微信公众平台

点击提交，显示提交成功，之后启用服务器配置，很快就会生效。

4.7 回 bber-weixin 云函数

注释第44行代码，保存:

1
2
3
4
5

if(tmpStr == signature){
    //请求来源鉴权
    //成功后注释下行代码
    //return event.queryStringParameters.echostr //成功后注释本行代码
    //成功后注释上行代码

到此，公众号配置完成，可以绑定自己的公众愉快的发布哔哔了。

我是自己手动部署，在这里踩得坑主要是运行环境不匹配和未建立 users 数据集，如果直接使用作者的一键部署可以避免这个问题，但是按量计费属实划不来

5 前端页面的 stellar 主题适配

stellar 主题没有给出太多自定义的空间，可以看到我的说说页面在顶部的 归档旁边

实际上的配置并不复杂

5.1 在根目录 source 新建 bbtalk 文件夹

文件夹建好后，新建一个 index.md 文件，这个文件用于存放前端代码 ，也就是哔哔页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---
menu_id: more
sidebar: [welcome, recent]
seo_title: 闲话
comments: false
breadcrumb: false
header: false
---

<div id='speak'></speak>
<!-- 使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber-md.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script>
<!-- 解析微信表情（参考：https://github.com/buddys/qq-wechat-emotion-parser） -->
<!-- <script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
<script>
ispeakBber
    .init({
      el: '#speak', // 容器选择器
      name: 'DreamyTZK 🦄', // 显示的昵称
      envId: '腾讯云开发环境id', // 环境id
      region: 'ap-shanghai', // 腾讯云地址，默认为上海
      limit: 10, // 每次加载的条数，默认为5
      avatar: 'https://cdn.jsdelivr.net/npm/kang-static@latest/avatar.jpg',
      fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
      loadingImg: 'https://7.dusays.com/2021/03/04/d2d5e983e2961.gif', // 自定义loading的图片，示例值为默认值
      dbName:'talks' // 数据的名称，默认talks，避免有人的命名不是这个，所以加入此配置字段。
    })
    .then(function() {
      // 哔哔加载完成后的回调函数，你可以写你自己的功能
      console.log('哔哔 加载完成')
    })
</script>

5.2 配置到首页

事实上，此时在发布网站后，已经可以直接通过 https://hermitlsr.top/bbtalk/ 访问到页面
一开始我是把这个页面放在 about 页的导航栏里的 直接写相对路径就行。
后来我突发奇想，把这个放到首页去，大概需要这几步：

1. 修改主题文件 languages
2. 修改主题文件 \themes\stellar\layout\_partial\main\navbar\list_post.ejs
3. 修改网站设置 _config.yml

5.2.1 修改主题文件 languages

这一步是进行语言配置，在 btn 部分添加 bbtalk

1
2
3
4
5
6
7

# zh-CN.yml
btn:
  bbtalk: 闲话

# zh-TW.yml
btn:
  bbtalk: 閒話  

没设置英语，实在不知道咋翻译合适。

5.2.2 修改主题文件 \themes\stellar\layout\_partial\main\navbar\list_post.ejs

找到 \themes\stellar\layout\_partial\main\navbar\list_post.ejs 在其第 32 行后 添加如下代码：

1
2
3

<% if (config.bbtalk) { %>
<a  href='/bbtalk/'><%- __('btn.bbtalk') %></a>
<% } %>

意思是，如果站点根设置中 bbtalk 的值为 true 则显示相对链接为 /bbtalk/ 的页面。
当然，你要乐意，改成 theme.bbtalk 放到主题设置里也行，不过没必要。

5.2.3 修改网站设置 _config.yml

在设置的最下面添加：

1

bbtalk: true

重新发布网站就可以看到了。

6 踩坑点汇总

1. 运行环境问题，最好使用作者原始运行环境：Nodejs 10.15；
2. 记得新建数据集 users；
3. 记得在 talks 数据集中提前创建数据。

搁着半年多，继续写博客。

  博客被搁着了差不多半年吧。这半年多也发生了不少事情，让我没有精力，也找不到太多想写的东西，于是就搁置了。

  事实上，半年前，也没有产出多少高质量的博客，主要是一些建站的记录。但不得不说，这些记录让我迁移博客数据，重新部署的过程十分顺畅。毕竟不再需要去搜索各种资料，去搞清楚怎么用 github action 了。

  之后的博客内容应该是分为四个部分：
   1. 首页上的 blog 内容，应该是日常的一些记录，和一些单独不成系统的技术博客和笔记博客；
   2. 项目页的 wiki 内容，应该是整理好的一些项目记录，和经过归纳整理的笔记专题；
   3. 笔记分站 ，一些日常笔记，多为学习时直接记录的内容和疑惑。
   4. 便笺页的 note 内容，一些简短的，杂乱的技巧。
无奈，水平有限，主要还是以个人学习记录为主。

  题外话说一下 hexo-theme-tree 这个主题，是我用在笔记分站的主题，十分简洁，拿来放笔记再合适不过了，我个人移植了标签，然后加上一些标签插件基本上是完全够用的。

  下面谈谈，这半年发生了什么，大概就是重回单身，考研失利，失去亲人，咳疾继续。

  第一个是感情问题，就不多扯淡了，没什么意思。第二个就是二战失利，准确来说是自己昼夜颠倒，沉迷刷剧，无心学习，然后理所当然的看到题目不知所措，最后不出意外的话继续名落孙山，送自己一句话，该。第三个是，自己的二爸，也就是老爹的哥哥旧疾复发去世了，在所有这些亲戚中，我印象中对我最好的就是他们家了，所以应该是伤心的。最后就是自高二以来每年必有的咳疾又发生了，和去年一样都是在考研的时候，不一样的是，去年被隔离了，大晚上被装进医院一宿没睡，今年没被隔离，然后到现在还在咳咳咳。坦率来讲，这半年其实过得挺糟糕的。后面不出意外的话应该是找个工作，然后继续准备考研。争取这一年把要看的书都看完，到时候应该会产出不少笔记。

  这大半年最后悔的事情应该是没怎么好好看书了，准确来说之前大学期间最后回到事情也是没好好看书，无论是那些数分高代，概率论随机过程，还是一些史书名著，都没怎么好好看，搞得现在脑子一团浆糊。突然想起来以前高考前一两个月抱着红楼梦囫囵吞枣看完的事情，当时也是心大，不过挺开心的。

  扯了一些有的没的，也没啥主题，主要就是说，后面应该继续写博客了。

我好像很倒霉，又好像没有那么倒霉，大概就是凭自己的本事把事情给办砸了。

前情提要：档案风波

准确来说所有的倒霉的问题都是自己作出来的，所有没那么倒霉乃至幸运的事情都是因为好心人。

继上次确定档案在28号可以寄出，而社区又表示可以缓两天之后，就没太在意这件事情了。

今天查了下档案，发现在中午的时候已经被档案馆签收了。所以下午直接打电话去档案馆问一下过去复印档案要什么材料或者手续什么的，这个时间大概是三点左右。结果被告知，没有我的档案信息，说是可能快递员还没投递就直接先点了收件，让我确认一下。

不幸从这里开始了。

我按派送信息上的联系方式打了派送员的电话，发现是璧山区（我家所在区的隔壁区）的派送员，说是没有这个信息，当时我就很纳闷啊，确认下他是不是叫 ✖✖，结果回答是，我更纳闷了。
遂拨打 EMS 投揽部的电话，期间报错快递单号不表，客服人员表示给我核实一下在回我电话。
就这样时间大概到了四点二十，再次打电话给 EMS，发现人家已经忘记有这回事了，然后让我自己和派送员核实一下，然后开始报电话号码，听前面的数字和我打的一样啊，我就说我打过这个电话，但是不是本地的快递员啊，紧接着听到了最后一位。
你猜怎么着，不一样！！！最后一位数字，它不一样！！！
只差一位的电话号码还都是 EMS 派送员的电话，这两快递员还都一个姓，甚至同名。
赶忙挂了电话，又打正确的派送员的电话。
小哥非常耐心的给我解释了一下快件确实送到了，可能是档案馆那边没录入进去。随即表示，抱歉，打扰，都是我的锅。
好的，第一个乌龙结束。

接下来和档案馆沟通，答：档案刚刚送过来正在录系统。又问，那下午还来得急复印档案么，一问我的名字，确认我的档案刚录入进系统，说可以。
赶紧打个的，往大学生就业创新中心跑，这个时候是四点半。
但实际上我要去的地方不是这里，那为什么又要去这个地方呢，因为当初问档案的时候让我关注了个公众号就是这个名字，走得急也没细想。
上天还是给过我纠正的机会的，的哥师傅没去过那里，我说我开个导航吧。
直到到了地方，一问，这地和档案馆压根就没啥关系。
突然想起来当初给学校就业处寄送地址的时候，是希尔康大道。那档案馆不就在我家那边么，骑个永久10分钟就到了，结果饶了这么远。
好的，第二个乌龙结束。

此时已经四点五十了，骑车估计是来不及了，打车又打不到，心想算了算了，今天估计是办不了。
这个时候一位摩的师傅，骑车路过的时候，估计是看到了我焦急的样子，停下来问我：
“走哪点嘛”
“合川档案馆，区政府那边那个”
“我晓得那点，走嘛”
“好多钱”
竖起一跟手指头
“十块哈，走嘛师傅”

紧接着师傅带我领略了摩托车的风驰电掣，还有一系列骚操作。举个例子，在一个红绿灯路口，红灯大概还有一分半左右，但不限右转，他直接右转到右侧垂直的一条道，然后插入到那条道的右转道，五秒钟之后，右转灯亮了，于是在路口后方的车还在等着的时候，这辆摩托已经奔向了下一个路口。
当然，我在车后座上个几分钟看个时间就不赘述了。
最后，在五点十五分的时候，师傅直接把我送到了档案馆门口。
不是常见的那种路边办事大楼的门口，而是七拐八拐直接把我送到了办事单位的门口。
下车扫码，师傅说：
“进切再付，进切再付，莫耽误你办事情。”
说着头也不回的就骑走了，这个信任啊，搞得我还有点想哭（不是）。
最后我给师傅转了15块。
幸运的事情一结束。

进到大厅问工作人员那里是复印档案的地方，答：
“哦，是要复印档案那个大学生哈，lei（语气词），在那点（头偏向左侧）”
走过去一看，有位孃孃正在帮我复印档案，已经复印一部分了。
看我过去了就让我自己复印一下。
当然，应该是看到我复印得太慢，又复印废了几张纸。孃孃决定还是自己来，我就在旁边整理复印好的档案顺序。
复印完成之后，向孃孃们为我的档案的操心表示了由衷的感谢，以及对我跑错了地方耽误他们下班表示了深刻的歉意。
但他们大概，好像觉得无所谓，并且他们的眼神仿佛在说这么憨的人，是怎么大学毕业的！！！
此时大概五点四十五。
幸运的事情二结束。

出门扫辆单车，打算直接骑去社区，争取六点前到，把材料早交了早了事。
结果，我扫的车是个坏的啊，他还坏的很奇特，车锁打开了，又没有打开，关上了又没有关上。
小程序显示，车子开锁了，但是，嗯？这分明还是锁着的啊，用手也掰不动。
算了算了，还车再扫另一辆。
欸，小程序显示，请关车锁！你这车锁开都没开我怎么关，你告诉没打开的车锁怎么关上，怎么关上！！！
眼睁睁看着倒计时30s结束，而车锁显示未关。
折腾了许久，终于，在没有关上已经关上的车锁的情况下还了车。
但是好像有点不对，为啥还要我付钱，我骑都没骑啷个还要花一块钱。
但为了骑下一辆车，我在纠结斗争中向单车妥协了，付了这一块钱，并开了新的一辆车。

最后当我骑到社区的时候，刚好六点钟。
但是门已经锁了。
大概国庆之后我还要再跑一趟吧。

档案一定要跟人走，切身体会，减少麻烦。

事情大概是这样的，毕业的时候为了图方便就把档案留在了学校，本来也要继续考研嘛，就懒得再动档案了。但是，党组织关系转回了本地社区，由此开始了麻烦的历程。

第一次是在办组织关系转移的时候，被要求需要入党志愿书复印件，于是拜托导员抽时间帮我跑去档案馆复印出来再寄给我。
第二次也就是这一次，被通知需要将所有入党相关的材料复印件交社区备份，然而学校档案不允许复印所有材料，所以不得不选择把档案调回本地的人才中心。

比较欣慰的是打的几个咨询电话得到的回应都比较明确，相关负责人也比较体谅我的难处，并且因为是当年毕业，所以暂时还不需要调档函，学校招就处的小姐姐也比较热情帮我直接办理了。

现在还是要等着档案寄回来，然后去档案中心把需要的东西复印出来再交到社区。

仔细想想要是当初直接把档案转回来哪有那么多事啊，以后档案材料这些一定要跟人走，跟人走。

  我的好兄弟，是寅哥儿。寅哥儿，是我的好兄弟。

  我的好兄弟，是寅哥儿。寅哥儿，是我的好兄弟。

  我跛了脚，他也跛了脚。两个一晃一摇的走着，也还整齐。

  那个桥洞是我栖身的地方，能遮住天上的雨。对，那雨还在天上的时候，哪怕砸到桥面上，不会与我有任何关系。可它偏机灵，不断向下淌，向着我这扑来。但不吼叫，不撕扯，只是要渐渐的让这干涸的桥洞重温水的滋养，好像这桥洞欢迎它似的。它与桥洞似有不解的缘。或许正是从前流淌的那抚摸着桥洞沧桑脸庞中的一滴。我为它的专情所打动，却不得不教它认清现实，这桥洞已被我占据，这是我的领土，这是寅哥儿栖身的地方。

  摸了几块石，垒成一圈石栅，庄重地宣誓我的主权。我握着这根发黑的手杖，挥舞着，敲打着。一阵怪风竟让我旋了一圈，扑倒在地上。你凭什么帮它，这与你何干，多事的风！快走，滚开，滚开啊！竟忽的挑起个什么，是块布？是寅哥儿留下的？顾不得，一挑，裹在身上。来吧，你来吧，我不怕你的。哈，可怜的雨水，可怜的河水，你终是回不来了吧。

  忽的一束白光，拉过一声轰响。先是一惊，亮堂堂的，不一会儿，这桥洞便又是最黑暗的地方了。黑暗得让人难以喘息，颤抖，白茫茫的一片。踱到稍高一点的泥板子上，斜靠在洞壁上。慢慢蹲下，手向下探，摸到底，用力按几下，又怯怯坐下。躺着，蜷成一团，紧握着手杖。恍惚间，静了，没甚生息了，我只知道我还在喘气，是风走了吧，水去了吧，，没了丁点喧闹，都趋于沉寂，又在消逝吧。觉得自己正被什么一点一点吞没。想喊叫，却只有嘶哑的喘息。“哐”的一阵轰响，我被拉了出来，是先前的石头塌了。寅哥儿在就好了。他虽讲不了什么话，但至少在我身边，至少听我的呜咽。寅哥儿去哪了，我的寅哥儿。

  我看到了，他们都围在我身旁。还有寅哥儿，他回来了，也在我身旁。

  他们或议论惋惜，或不语呆望。却有几个毛孩子要踢那些石块。我大叫着别动，他们不听，还越发有劲了。甚至跑过来，要抢我的木杖，还要拿我的布，我死死的抓着，只能抓着，尽力的抓着。对他们咆哮一分，便是对他们鼓励十分。好似我的咆哮，在为他们助威。幸运的，我快不能坚持时，十分庆幸，他们也烦了，嬉笑着站在一旁。

  “多活泼的孩子啊”

  “不，应该是群机灵鬼”

  “瞧，他们玩得真是有趣啊”

  是赞叹、是褒奖。我只求他们离开这里。没办法啊，他们偏不离开，我有什么可看的？寅哥儿？更没什么可提的了。

  过不多时，围的人越来越多了。

  突然，他们却让了一条路来，还恭敬的把我们请出去。不及清洗我们身上的泥垢，只急忙领我们去参加什么仪式，说会很庄严肃穆，而且我们是主角。难怪被那般注视呢。这仪式也没什么排场，我甚至曾遇见过，还去同着唏嘘几声，讨了杯酒的。也不能说是讨，是换，是拿眼泪换的。我自然已熟悉，也就无需排演了。几阵喧闹，几场诉说，又是几批如我一般讨酒的。木杖敲打着碗，过就过了吧。又如昨一般的死寂，仅握着我的木杖，裹着我的布，却不见了寅哥儿，伴着我的兄弟。

  寅哥儿，我的兄弟，你在哪里。

  什么都看不见了。

——2017.5.24

偊由 夜书

   看过很多使用 Github Action 自动部署 Hexo 博客的教程，但是部署到 腾讯云 Serverless framework 的几乎没有，而且对于 GitHub 身份验证也比较麻烦，综合各家之长有了本篇小文，力求详细。

1 Github Action

2 自动部署

设置步骤：

1. 博客文件管理
2. 生成权限密码
3. 配置 secret
4. 配置 workflows

2.1 博客文件管理

博客文件的版本管理是通过使用 GitHub 仓库来实现，基本步骤如下：

在命令行中：

1. 在需要的位置通过 hexo init blog 初始化博客环境。
2. 使用 git init 命令初始化 Git 仓库，此时仓库内没有文件。
3. 使用 git add . 命令添加所有文件到 Git 仓库中。可以在 .gitignore 文件中设置忽略的文件，此文件中标明的文件不会被加入仓库中。注意此时还没有把这个更改加入到版本库。
   我的 .gitignore 文件

   1 2 3 4 5 6 7 8

   .DS_Store Thumbs.db db.json *.log node_modules/ public/ .deploy*/ .idea

4. 使用 git submodule add https://github.com/#yourname#/#theme.git themes/#themename 命令添加主题文件子模块。主题文件将会作为子模块存在，git push 父模块时只会上传引用的子模块版本。
   例如我使用的是 stellar 主题，相应的命令为 git submodule add https://github.com/hermitlsr/hexo-theme-stellar.git themes/stellar 。执行完成后会在根站点出现 .gitmodules ，它记录了子模块的原仓库地址和本地相对地址。

注意以上关于 git 的操作可能会因为网络的问题报错 一般是 10054 错误，很正常，网络 ok 了就行。
此时，父模块还没有被 push 到 GitHub 上，子模块是和原仓库地址对应的。

由于我不太熟悉 命令行 管理 git 仓库，所以后面的操作在 GitHub Desktop ( 点我下载 )中完成：
只需要登录自己的 GitHub 账号即可进行版本管理操作：

1. 添加本地仓库到 GitHub Desktop：使用快捷键 ctrl O，或者在菜单中找到 add。然后选取你 git init 操作的那个文件夹即可。
2. 将更改添加到版本中，在 Current repository 下找到你添加的仓库，文件名应该是你本地的文件名。
   详情图片

   
   把 Changes 的内容全选，在下方的 commit 的标题部分填入 first commit 点击 commit 按钮推送到版本库中。
   推送成功后可以在 History 中看到历史版本。但注意到此时更新的版本里有向上的箭头，表明该版本还没有提交到 GitHub 仓库中。
3. 提交到 Github 仓库：点击上方的 Publish repository，勾选 Keep this code private，发布到私有仓库，毕竟源文件中可能会涉及到各种隐私文件。
   详情图片

   

   
   该过程可能会因为网络原因失败，但是重复推送即可。

此时博客文件管理已经完成，以后如有修改文件，只需在 GitHub Desktop 中添加对应版本并推送上去即可。有时使用客户端推送会失败，也可以在命令行中使用 git push 命令。

2.2 生成权限密码

在使用 Github Action 时需要配置权限密码，一是 Github 的访问令牌，二是 腾讯云的 API密钥管理，三是 qmsg 酱的访问密匙。

1. Github 的访问令牌
   官方文档——创建个人访问令牌
2. 腾讯云的 API密钥管理
   点这里创建
3. qmsg 酱的访问密匙
   点这里获取

注意，这些的访问权限都比较高，建议定期设置失效更新。

2.3 配置 secret

将 生成权限密码 中取得的密码配置到 Github 仓库的 secret 中：
在仓库的 Setting.Secrets.Actions 中设置

详情图片

注意：这里的命名要和下面设置的 workflows 中的变量对应。

2.4 配置 workflows

在根目录的 .github 文件夹中新建 workflows 文件夹，这是存放 Github Action 配置的文件夹，在该文件夹中新建一个 .yml 文件，命名随意。

我的 workflow 源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

name: www.hermitlsr.top

on:
  push:
    branches:
      - master  # 触发事件

jobs:
  build:
    runs-on: ubuntu-latest # 运行环境为最新版 Ubuntu
    name: auto deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with: # 条件
          submodules: true # Checkout private submodules(themes or something else). 当有子模块时切换分支？

      - name: Setup Node.js 16.x
        uses: actions/setup-node@master
        with:
          node-version: "16.x" # node 版本设置

      - name: Cache node modules
        # 设置包缓存目录，避免每次下载
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: Install dependencies
        run: |
          npm install -g serverless
          npm install hexo-cli -g
          npm install

      - name: init public
        run: |
          hexo clean
          hexo generate

      - name: Deploy tecent
        env:
          SERVERLESS_PLATFORM_VENDOR: tencent # 外网环境下需要设置
          TENCENT_SECRET_ID: ${{ secrets.TENCENT_SECRET_ID }}
          TENCENT_SECRET_KEY: ${{ secrets.TENCENT_SECRET_KEY }}
        run: |
          sls deploy -debug

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          external_repository: hermitlsr/hermitlsr.github.io
          publish_branch: master
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'

      - name: notification
        run: | # 部署成功后通过 qmsg 推送到 qq 提示部署成功
          curl https://qmsg.zendee.cn/send/${{secrets.QMSG_KEY}} -X POST -d 'msg=部署成功, 请访问 https://www.hermitlsr.top/ 进行确认 '

代码主要分两部分，一是触发条件，二是工作流。

2.4.1 触发条件

1
2
3
4

on:
  push:
    branches:
      - master  # 触发事件

该代码表面仓库的 master 有更新时触发 Github Action。

2.4.2 工作流

创建运行环境

1
2
3
4
5

jobs:
  build:
    runs-on: ubuntu-latest # 运行环境为最新版 Ubuntu
    name: auto deploy
    steps:

后面的具体工作按 steps 中的顺序执行。

检出仓库文件

1
2
3
4

- name: Checkout
  uses: actions/checkout@v2
  with: # 条件
    submodules: true # Checkout private submodules(themes or something else). 当有子模块时切换分支？

这里除了检出本仓库中的文件，还会检出子仓库中的文件，当子仓库为私有仓库时会失败，需要额外配置权限。

安装 node 和 相关依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

- name: Setup Node.js 16.x
  uses: actions/setup-node@master
  with:
    node-version: "16.x" # node 版本设置

- name: Cache node modules
  # 设置包缓存目录，避免每次下载
  uses: actions/cache@v1
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies
  run: |
    npm install -g serverless
    npm install hexo-cli -g
    npm install

我这里使用了最新的 “16.x” 版本，并设置了缓存目录，避免每次重复安装。

npm install -g serverless 是安装 serverless 用于使用 serverless framework 部署到腾讯云。

生成网页文件

1
2
3
4

- name: init public
  run: |
    hexo clean
    hexo generate

生成 public 文件夹。后续也发布 Github 仓库 时不会使用 hexo deploy ，而是直接将该生成文件推送到目标仓库中，或者使用另一个第三方工具。

部署到腾讯云

1
2
3
4
5
6
7

- name: Deploy tecent
  env:
    SERVERLESS_PLATFORM_VENDOR: tencent # 外网环境下需要设置
    TENCENT_SECRET_ID: ${{ secrets.TENCENT_SECRET_ID }}
    TENCENT_SECRET_KEY: ${{ secrets.TENCENT_SECRET_KEY }}
  run: |
    sls deploy -debug

SERVERLESS_PLATFORM_VENDOR: tencent 一定要设置，不设置的话会显示登录失败，这个是来自于腾讯云的技术顾问。
TENCENT_SECRET_ID 和 TENCENT_SECRET_KEY 都是前面设置的腾讯云的 API 访问令牌。注意变量名。本身在本地使用的时候会创建 .env 文件存放令牌，但这里为了防止令牌泄露，采用 secret 的形式，.env 文件无需上传。
sls deploy -debug 这个命令用于将生成好的文件推送到腾讯云上，不熟悉该命令的可以看 腾讯云serverless托管Hexo静态博客 。

部署到 Github page

这里有多种方法进行，我选取了两种使用令牌的方法放在这里：

第一种方法：

1
2
3
4
5
6
7
8
9
10

- name: Deploy github
  env:
    DEPLOY_REPO: github.com/hermitlsr/hermitlsr.github.io
  run: |
    cd ./public && git init && git add .
    git config --global user.name $GIT_USER
    git config --global user.email $GIT_EMAIL
    git add .
    git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
    git push --force --quiet "https://${{ secrets.ACCESS_TOKEN }}@$DEPLOY_REPO" master:master

该部署方式是直接将生成的 public 文件夹推送到目标仓库的方式。
DEPLOY_REPO 设置目标仓库。
首先进入到 public 文件夹中，并初始化 github 仓库，并设置所有者为自己，然后设置推送命令，最后通过访问令牌的验证方式强制推送。该种方式会强制覆盖仓库内的内容。

另一种推送到 Github 的方式是使用 peaceiris/actions-gh-pages@v3

1
2
3
4
5
6
7
8
9
10

- name: Deploy to GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    personal_token: ${{ secrets.ACCESS_TOKEN }}
    external_repository: hermitlsr/hermitlsr.github.io
    publish_branch: master
    publish_dir: ./public
    commit_message: ${{ github.event.head_commit.message }}
    user_name: 'github-actions[bot]'
    user_email: 'github-actions[bot]@users.noreply.github.com'

注意：

• personal_token: ${{ secrets.ACCESS_TOKEN }} ：这里如果是推送到相同的仓库，可以直接使用 github_token:${{ secrets.GITHUB_TOKEN }}，该 token 无需额外生成；当如果是不同的仓库，需要使用 personal_token ，Protocol 为 HTTPS 或者 deploy_key ，Protocol 为 SSH 进行部署。
• external_repository： 推送的仓库，设置为你要使用 Github Pages 的仓库就可以了。
• publish_branch：要推送到目标仓库的分支，非默认分支需提前创建。
• publish_dir：推送内容所在的文件相对地址。
• commit_message：推送信息。
• 具体可 见文档 。

qmsg 酱推送成功信息

1
2
3

- name: notification
  run: | # 部署成功后通过 qmsg 推送到 qq 提示部署成功
    curl https://qmsg.zendee.cn/send/${{secrets.QMSG_KEY}} -X POST -d 'msg=部署成功, 请访问 https://www.hermitlsr.top/ 进行确认 '

该信息可以自定义，这里的 {{secrets.QMSG_KEY}} 为之前设置的 qmsg 的权限密码。这不是一个必要的流程，只是为了让之前注册的 qmsg 酱不要闲置。

至此配置完成，将所有修改推送到 Github 即可。

3 最后一些常用的 action 获取

GitHub 官方的 action
GitHub 官方市场中的 action
第三方收集的有用的 action

  使用腾讯云 serverless 托管静态博客，让静态博客托管更简单。

1 写在前面

1. 域名需要备案
   和 coding 可以不备案使用香港的资源部署不同，使用该服务域名必须进行备案。不过，腾讯云提供的三种备案云服务资源 包含了 Serverless 服务， 可以购买 云函数 (SCF) 备案资源包 100rmb (新用户有卷 55rmb)，直接进行备案，和购买服务器进行备案的方式差不多。但是，如果只是用 serverless 来部署博客，这个资源包就基本用不上。

2. 无需服务器
   无需服务器可以降低学习成本和经济成本。但是需要使用额外的 severless 插件。

3. 额外的部署命令
   使用该服务不能如同 coding 那样直接放在 _config.yml.deploy 中，需要额外的命令 sls deploy -debug 进行部署。

4. 可自由选择部署应用所在地
   这是对比 coding 只能默认选择上海，该服务可自由选择所在地，我选择离所在地近的。

5. 可自由选择使用腾讯云的 CDN 服务
   新用户可以白嫖六个月 120G 的 CDN。不过小站访问量不高，开了与源站一致每月也就是几百兆。

题外话：可以看到我基本都在与 coding 进行对比。我开始建站的时候看了很多白嫖 coding 部署博客的文章，但是 coding 被腾讯云收购了，白嫖是不可能白嫖了。在部署到 coding 上后，我发现静态文件都在腾讯云的 cos 存储桶里，在 severless 应用服务中创建了 app ，所以实际上部署到 coding 就是在使用腾讯云的 serverless 应用服务，而且自由度还不高。

2 Serverless 应用中心

关于 Serverless 的概念可以参考：Serverless 多函数开发示例 、Serverless
简单讲就是指构建和运行不需要服务器管理的应用程序的概念。

腾讯云的介绍：腾讯云中的 Serverless 应用中心 是腾讯云与 Serverless.com 战略合作，基于无服务器应用框架 Serverless Framework， 为用户提供的 Serverless 应用开发管理平台。开发者无需关心底层资源，即可快速部署完整可用的 Serverless 应用架构，具有资源编排、自动伸缩、事件驱动等能力，覆盖编码-调试-测试-部署等全生命周期，帮助开发者通过联动云资源，迅速构建 Serverless 应用。

该服务提供了部署 Hexo 博客的接口 ：部署 Hexo 博客 ，如果有经验的话可以直接根据这份文档进行部署，我一开始就是这么做的。

3 部署博客

按文档的要求：

• 已安装 Node.js（2020年9月1日起，Serverless 组件不再支持 Node.js10.0 以下版本，请注意升级）
• 已安装 Git
  这个一般不用管，毕竟博客搭建好之后这些都是已经安装好的。

部署流程：

1. 安装 Serverless Framework。
2. 创建 serverless.yml 文件。
3. 使用 sls deploy 进行部署。
4. 自定义域名。

3.1 安装 Serverless Framework

通过 npm 安装 Serverless Framework：

3.2 创建 serverless.yml 文件

在站点根目录创建 serverless.yml 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

component: 'website' # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
name: hermitlsr-blog # (必填) 该 website 组件创建的实例名称
app: hermitlsr-blog-app # (可选) 该 website 应用名称
stage: dev # (可选) 用于区分环境信息，默认值是 dev
inputs:
 src:
   src: ./public # Upload static files generated by HEXO
   index: index.html
   # dist: ./dist
   # hook: npm run build
   # websitePath: ./
 region: ap-chengdu  # 部署的位置
 bucketName: hermitlsr-blog-bucket
 protocol: https

这是我的配置，可根据需要自行配置。

3.3 使用 sls deploy 进行部署

直接使用 sls deploy 是看不到部署细节的，需使用 sls deploy -debug。另外，每次部署时需同过登录链接登录腾讯云验证，或者配置全局用户授权。
由于我还需要部署到 github 上，我的部署命令一般如下：

部署完成后，进入腾讯云的控制台可以发现在 Serverless 应用中创建了名为 hermitlsr-blog-app 的应用，点击访问应用即可访问到你部署的博客。

博客的所有静态资源都在 腾讯云的 cos 存储桶中，它创建了一个名为 hermitlsr-blog-bucket-appID 的存储桶：

到目前为止博客已经部署到通过 serverless 应用 部署到腾讯云上了，但是还没有 CNAM 到自己的域名。

3.4 自定义域名

自定义域名都是通过在域名解析上使用 CNAME 重定向实现。
首先需要在站点的 source 文件夹中新建 CNAME 文件，该文件没有后缀名，在其中填入的你的自定义域名。
其次在域名解析中设置 CNAME
我自定义域名是分两条线路国外访问走 github page ，国内访问走腾讯云。无论是哪一种都需要设置两种主机记录值 @ 和 www，这两种对应的访问域名分别为 hermitlsr.top 和 www.hermitlsr.top
而对于两种记录值的设置，除了记录值不同外其他 CNAM 等选项都是一样的。

以我的 github page 为例，其设置为：

而对于腾讯云，使用 CDN 和不使用 CDN 记录值是不一样的。

不使用 CDN :

进入存储桶，打开域名与传输管理部分，其中在自定义源站域名中添加自己的自定义域名，注意源站类型选择 静态网址源站，其中 CNAME 为解析里要设置的记录值。

设置如下：

使用 CDN 要麻烦一些，首先要设置 CDN (这不废话么)：

还是刚才的页面，在上面的自定义中添加自己的自定义域名，其中 CNAME 为解析里要设置的记录值。

设置如下：

这里看起来好像和源站区别不大，为什么说还要麻烦些呢，因为还涉及证书的管理和 CDN 的具体设置。

进入到控制台的内容分发部分，在证书管理中确认配置的证书和你前面存储桶中绑定的证书是一致的，否则会导致证书不通过而无法访问，我一开始被这个坑惨了。
再进入到域名管理，在基础配置中可以看到具体信息，可以随时修改。在访问控制中可以进行防盗链配置，在缓存配置中可以进行节点缓存过期配置，建站初期经常修改可以选择遵循源站，后期可以选择高级缓存过期设置，先设置全部文件，缓存时间为15天，在设置按文件后缀 js;css;ejs;styl 为 0 秒。

4 最后

如果没有其他需求，仅需要部署静态博客，使用 serverless 应用是一个省时省力省钱的操作。

赞赏是不可能赞赏的，只有白嫖才能勉强维持得了生活这样子。但是多一个好看的赞赏键拿来做装饰不好么？

sponsor 介绍

sponsor-page 是 Kaiyuan Xie 大佬的开源项目：

作者提供了两种样式的捐赠部件，美中不足的是其提供了比特币但没有提供QQ的图标 好像也不是很重要，反正也没人打钱。

kelecn 在该项目上增加了QQ图标，不过好像大概就是换了下 bitcoin.svg logo，可看参考资料。

我个人比较喜欢 drink 样式的背景，但又喜欢 sample 样式的白底彩色图标效果，就自己动动手把他们综合了一下，不过最后好像也只是换了下logo？

最后它在我站点上的效果：

1 修改

经过研究源代码，确定两种样式是独立的，他们的 js 和 css 并不相互共用，交叉使用的只是 images 。而仔细分析我的需求，只是展示样式的问题，并不涉及二维码的展示逻辑，所以重点在 css 的修改上。

1.1 css修改

我的需求主要在于颜色，不想让它蓝蓝的，想让它白白的，这里就直接定位到含有颜色的部分，并通过 f12 大法确定它的用处

1. #donate-buttons

该 class 下的颜色是按钮的背景色，就是他让整个按钮是蓝蓝的。这里将其修改为：

1
2
3
4

#donate-buttons {
    background-color: #F8F8F8;
    box-shadow: 0 10px 20px 1px rgba(221, 221, 221, 0.5);
}

为什么是 #F8F8F8 ，因为这是我的主题色，纯白色太亮眼的了，和主题色一致不至于有违和感。

2. li[id$="_donate"]::after

该 class 下的颜色是鼠标放在某个按钮上时，按钮上方出现的小倒三角，意味着选择的那一个。因为我并不想看到这个三角，所以直接按之前的颜色处理：

1
2
3
4
5

li[id$="_donate"]::after {
border: 5px solid #F8F8F8;
border-color: #F8F8F8 transparent transparent transparent;

}

3. #drinks-qrcode

该 class 下的颜色是弹出的二维码边框颜色，同样设置为 #F8F8F8：

1
2
3

#drinks-qrcode {
background: #F8F8F8 no-repeat center center url();
}

4. 更换图标

按这个顺序做的，会在 1. 做完后发现图标不见了。事实上，不是不见了，而是因为默认调用的是可调色的图标，前面设置成了白色自然无法看见。这里就需要更换彩色图片。

彩色图片来自于 sample 样式中的 images ，QQ的图标我采用了参考资料中的文件，不想自己找了。

但这里遇到一个问题就是更换完成之后还是无法显示，后来发现是缓存问题，为了稳妥，将所有涉及的图片都放在了图床上。当然最主要的原因还是为了方便部署在博客上。以下例举需要更换的地方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*1*/
#drinks-icons {
    background: no-repeat center center url(https://cdn.hermitlsr.top/ky/donate/image/text-new.png);
}

/*2*/
#github-box {
    background: no-repeat center center url(https://cdn.hermitlsr.top/ky/donate/image/github.svg);
}

/*3*/
#paypal_donate {
    background-image: url(https://cdn.hermitlsr.top/ky/donate/image/paypal.svg);
}
#qq_donate {
    background-image: url(https://cdn.hermitlsr.top/ky/donate/image/qq.svg);
}
#alipay_donate{
    background-image: url(https://cdn.hermitlsr.top/ky/donate/image/alipay.svg);
}

#wechat_donate{
    background-image: url(https://cdn.hermitlsr.top/ky/donate/image/wechat.svg);
}

/*4*/

#drinks-qrcode {
background: #F8F8F8 no-repeat center center url(https://cdn.hermitlsr.top/ky/donate/image/WeChanSQ.png);
}

经此4步，css 部分就基本修改完了。

1.2 js修改

js 中需要修改的内容不多，主要是二维码的路径：

1
2
3
4
5
6
7
8

var PayPalLink  =   "https://www.paypal.me/KaiyuanXie"; // 我不用这个所以直接没改。

var qrcodes = {
    'qq_donate':'https://cdn.hermitlsr.top/ky/donate/image/qqQR.png',// 二维码路径
    'alipay_donate':'https://cdn.hermitlsr.top/ky/donate/image/AliPayQR.png',// 支付宝二维码
    'alipay_donate_link'   :   'https://qr.alipay.com/fkx03277sywmqzbvpjow76',   // 支付宝二维码上的链接，必须换成自己的连接！！！手机点击会自动跳转到支付宝。
    'wechat_donate':'https://cdn.hermitlsr.top/ky/donate/image/WeChanSQ.png'
};

另外你应该发现，这里是 ‘qq_donate’ 而没有 btc_donate，是的，因为不需要比特币，所以把所有关于 btc 的类都改成了 qq。这个直接在 html 、js 和 css 三个文件中搜索替换即可。

1.3 html修改

这里的修改主要是：

1. 将图片链接替换掉
2. 将 li id="paypal_donate"><a href="https://www.paypal.me/KaiyuanXie" target="_blank">Paypal</a></li> 删掉，。
3. 在顶内部添加：

1
2
3
4

---
layout: false
---

作为独立页面，便于后续使用 <iframe> 放在文章里

至此基本修改就已经完成了。本地看起来基本没有问题，剩下的就是让它能够在博客上顺利展示。

2 部署

这里遇到的问题是，直接将 donate 复制在 source 中，发现只出现了背景图片，但点击无反应。原因在于 hexo 在编译时，这种情况提取不到 js 和 css 文件，解决方法是将他们托管到图床上。

所以在 source/donate 里只放置了 index.html 。记得修改 index.html：

1
2

<link rel="stylesheet" href="https://cdn.hermitlsr.top/ky/donate/donate.css">
<script src="https://cdn.hermitlsr.top/ky/donate/donate.js"></script>

最后在文章底部加入：

1
2

<hr>
<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>

就可以得到开篇的效果。

另外，为了不要每次写文章时都粘贴一次这个代码，可以直接放在 scaffolds/post.md 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: {{ title }}
date: {{ date }}
mathjax: true
comments: false
tags:
categories:
---

  

<!--more-->


![](https://cdn.hermitlsr.top/images/post/line.gif)
<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>

3 部署升级版

2 中的部署方式也是可行，只不过还是较麻烦，而且与文章主体以及下方的额外信息割裂，下面的部署方式将其直接作为 article.footer 的一部分。

在 "...\layout\_partial\main\article\article_footer.ejs" 文件的 107 行后添加如下代码：

1
2
3
4
5
6
7
8
9

if (theme.article.donate && page.donate != false) {
  el += '<section id="donate">';
  el += '<div class="header">';
  el += '<span>' + __('meta.donate') + '</span>';
  el += '<div>';
  el += '<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>';
  el += '</div>';
  el += '</section>';
}

并在 _config.stellar.yml 的 article 部分，添加：

1
2

article:
  donate: true

若设置为 donate.true 则启用打赏部件，反正关闭。
效果图可见本文下方。

4 注意

1. 嫌麻烦，可直接使用原作的部件，其实一样美滋滋。但无论如何，只要用了请去给原作 star。
2. 一定要将图片资源放在没有防盗链的图床上，否则不显示；js 和 css 托管到 github 或者 gitee ，当然有服务器放服务器最好。
3. 二维码可以用草料二维码 ，先从app下载官方二维码再解码，再生成二维码。当然我知道你们的办法更多。
4. 喜欢我改后的样式的可以直接下载我的 js 和 css 文件，前文有。
5. 最后，记得请我喝咖啡 。

最后真诚的感谢原作 Kaiyuan Xie ，这个部件是真好看。

这里放置 stellar 主题 emoji 标签的图片及对应索引，方便自己调用，暂时只做了 aru 和 aru-l 的，毕竟其他的有汉字不是。

1
2
3
4
5
6
7

emoji:
  default: https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif
  twemoji: https://fastly.jsdelivr.net/gh/twitter/twemoji/assets/svg/%s.svg
  qq: https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif
  aru: https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/aru/%s.png
  aru-l: https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/%s.gif
  tieba: https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%s.png

aru

表情	索引	表情	索引	表情	索引	表情	索引	表情	索引
	1		2		3		4		5
	6		7		8		9		10
	11		12		13		14		15
	16		17		18		19		20
	21		22		23		24		25
	26		27		28		29		30
	31		32		33		34		35
	36		37		38		39		40
	41		42		43		44		45
	46		47		48		49		50
	51		52		53		54		55
	56		57		58		59		60
	61		62		63		64		65
	66		67		68		69		70
	71		72		73		74		75
	76		77		78		79		80
	81		82		83		84		85
	86		87		88		89		90
	91		92		93		94		95
	96		97		98		99		100
	101		102		103		104		105
	106		107		108		109		110
	111		112		113		114		115
	116		117		118		119		120
	121		122		123		124		125
	126		127		128		129		130
	131		132		133		134		135
	136		137		138		139		140
	141		142		143		144		145
	146		147		148		149		150
	151		152		153		154		155
	156		157		158		159		160
	161		162		163		164

aru-l

表情	索引	表情	索引	表情	索引	表情	索引	表情	索引
	0000		0010		0020		0030		0040
	0050		0060		0070		0080		0090
	0100		0110		0120		0130		0140
	0150		0160		0170		0171		0180
	0181		0190		0200		0210		0220
	0230		0240		0241		0250		0260
	0270		0280		0290		0300		0310
	0320		0330		0331		0340		0350
	0360		0370		0380		0390		0391
	0400		0410		0420		0430		0431
	0440		0450		0451		0460		0461
	0462		0470		0480		0490		0500
	0510		0520		0530		0540		0550
	0560		0570		0580		0590		0600
	0610		0620		1010		1011		1020
	1030		1040		1050		1060		1070
	1080		2010		2020		2030		2040
	2050		2060		2070		2080		2090
	2100		2101		2110		2120		2130
	2410		2141		2145		2150		2151
	2152		2160		2161		2165		2170
	2171		3010		3011		3020		3030
	3040		3050		3060		3061		4010
	4020		4021		4022		4023		4024
	4025		4030		4031		4040		4041
	4042		4100		4110		4111		4112
	4113		4114		4115		4120		4121
	4130		4140		4200		4201		4210
	4211		4212		4213		4220		4300
	4301		4302		4303		4304		4310
	5000		5001		5002		5003		5010
	5020		5030		5040		5050		5060
	5069		5070		5080		5090		5091
	5100		5110		5120		5130		5131
	5140		5141		5150		5151		5160
	5161		5170		5180		5190		5200
	5210		5220		5230		6000		6001
	6010		6020		6030		6040		6050
	6051		6060		6061		6070		6080
	6090		6091		6092		6100		6110
	6120		6121		6130		6131		6132
	6140		6150		6151		6160		6500
	6510		6520		6530		7000		7010
	7011		7012		7020		7021		7030
	7040		7045		7046		7050		7051
	7052		7053		7054		7060		7061
	7062		7070		7071		7080		7081
	7090		7100		7110		7111		7112
	7113		7200		7201		7210		7220
	7230		8000		8001		8010		8020
	8021		8030		8040		8041		8042
	8050		8051		8060		8062		8070
	8071		8072		8080		8081		8082
	8083		8084		8085		8090		8091
	8092		8100		8101		8102		8103
	8110		8111		x010		x011		x012
	x013		x014		x021		x022		x031
	x032		x041		x042		x050		x060
	x061		x062		x063		x069		x070
	x071		x080		x081		x082		x083
	x090		x091		x092		x093		x094
	x099

未完待续

  本文将介绍如何将自己的博客文章主动推送到百度收录

通过 hexo 框架搭建的个人站，可以被 Google 主动爬取，像我这样的新站，在建站几天之后就被收录了。但是百度站一般不会主动去爬取这类站点，需要站长主动推送站点文章，当然推送了也不一定收录，无奈。

百度收录目前可以通过三个方式：API 提交、sitemap 和 手动提交，本文主要是介绍通过插件实现前两种方式的自动提交。

API 提交

这里主要使用的是 hexo-baidu-url-submit 插件，它可以在每次使用 hexo s 或 hexo d 命令时主动将 _post 内的文章推送到百度

具体配置步骤如下：

1. 安装插件
2. 配置站点根目录 _config.yml

安装插件

配置站点根目录 _config.yml

1. 在站点点根目录 _config.yml 的最下方加入如下内容：

1
2
3
4
5

baidu_url_submit:
  count: 100 # 提交最新的一个链接
  host: www.hermitlsr.top # 在百度站长平台中注册的域名
  token: xxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

注意 token 部分可在百度收录站普通收录 API提交 部分找到，具体如下图：

2. 修改 _config.yml 的 url，这个一般在建站的时候都有修改，这里注意和百度添加的域名保持一致就可以了。

3. 修改 _config.yml 的 deploy 部分：

1
2

deploy:
- type: baidu_url_submitter

当执行 hexo s 或 hexo d 时，出现如下内容即为配置成功：

1
2

INFO  Generating Baidu urls for last 100 posts
INFO  Posts urls generated in baidu_urls.txt

通过添加代码实现自动推送

这种推送方式在之前的百度推送站中被称为自动推送，其通过在网页的 <head> 与 </head> 标签之间添加安装自动推送JS代码，实现当页面被访问时，页面URL将立即被推送到百度收录。这个方法在现在的百度收录站中已经找不到了，但代码还是被留存了下来，可以考虑使用。

在主题文件夹中找到 head.ejs 文件，定位到 <head> ，在其下方添加如下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- 百度主动推送 -->
<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>

sitemap

在百度收录站中使用 sitemap，只需要在相应位置填写数据文件地址即可：

这里介绍一个生成网址地图的插件：hexo-generator-seo-friendly-sitemap，之前我有用另一个插件 hexo-generator-sitemap，基本配置都差不多，但还是觉得前者要好一些。

通过

1
2
3
4
5
6

sitemap:
  path: sitemap.xml
  tag: true
  category: true
  page_priority: 0.4
  post_priority: 0.6

这里可以根据自己的需要选择是否生成 tag、category 的网址地图。
当执行 hexo s 或 hexo d 后，public 将出现如下内容：

1
2
3
4
5

sitemap.xml
post-sitemap.xml
page-sitemap.xml
category-sitemap.xml
tag-sitemap.xml

可以通过自己的域名+文件名的方式访问到这些网址地图 (如：https://www.hermitlsr.top/sitemap.xml)。上面提到的填写数据文件地址就是指这个地址。

通过这个方式的缺点就是一开始推送的时候要很久才生效，我是等了三天之后状态才从等待中转为已生效，建议多种方式共同使用。

  本文记录了自己使用Stellar主题建站时操作的一些内容，或简或繁，主要是为了方便日后主题升级，设备更换时能够顺利迁移。

footer 设置

目前我使用的`stellar 1.4.0` 版本还不支持自定义 `footer` (注:新版本已支持) ，但我需要放上 icp 备案等信息，于是修改了部分源码。我需要新设置两排内容，一排展示部署和图床信息，一排展示 icp 备案信息，最终呈现效果如下图：

需要设置三个部分

1. zh-CN.yml.footer 语言设置
2. footer.ejs 设置
3. _config.stellar.yml.footer 主题设置

zh-CN.yml.footer 语言设置

在 ..\themes\stellar\languages\zh-CN.yml 文件中设置：

1
2
3
4
5
6
7

footer:
  license: '本博客所有文章除特别声明外，均采用 %s 许可协议，转载请注明出处。'
  info_not_open_source: '本站由 %s 创建，使用 %s 作为主题。'
  info_open_source: '本站由 %s 创建，使用 %s 作为主题，您可以在 %s 找到本站源码。'
  # 自定义部分
  web_serve: '本站托管于 %s ，使用 %s 作为图床。' # 用于展示部署信息
  icp: '%s' # 用于展示 icp 备案信息

其中 %s 为占位符，若使用多语言还需如此设置 zh-TW.yml 、en.yml。

footer.ejs 设置

在 ..\themes\stellar\layout\_partial\main\footer.ejs 文件中设置：

1
2
3
4
5
6
7
8
9
10
11
12

# 顶部 `const source = theme.footer.source;` 之后
const icp = theme.footer.icp;
const cloud_server = theme.footer.cloud_server;
const picture_bed = theme.footer.picture_bed;

# 下方 `if(source){...}` 之后
  if (theme.footer.cloud_server) {
    el += markdown(__('footer.web_serve',  cloud_server, picture_bed));
  }
  if (theme.footer.icp){
    el += markdown(__('footer.icp', icp));
  }

上述代码第一部分是传入主题设置中的内容，其对应着语言设置部分中的占位符内容：

• icp: 要展示的icp信息
• cloud_server : 要展示的部署信息
• pictuer_bed : 要展示的图床信息

上述代码第二部分为插入要展示的信息。

_config.stellar.yml.footer 主题设置

在 footer 部分添加如下内容：

1
2
3

icp: '渝ICP备[2021006569](https://beian.miit.gov.cn/)号，公安备[50011702500564](https://beian.miit.gov.cn/)号，萌ICP备[20201324](https://icp.gov.moe/?keyword=20201324)号'
cloud_server: '[腾讯云](https://cloud.tencent.com/)，[Github](https://github.com/)'
picture_bed: '[又拍云](https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral)'

其对应第二步中的 theme.footer.icp、theme.footer.cloud_server、theme.footer.picture_bed。

上述方法仅供参考，主题已支持该设置

2021.7.31 主题更新 Commit: custom footer ，可以使用 more 更优雅的实现上述内容，主题配置 footer.more 设置：

1
2
3

more: # string or array (support markdown)
  - '本站托管于 [腾讯云](https://cloud.tencent.com/)，[Github](https://github.com/) ，使用 [又拍云](https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral) 作为图床。'
  - '渝ICP备[2021006569](https://beian.miit.gov.cn/)号，公安备[50011702500564](https://beian.miit.gov.cn/)号，萌ICP备[20201324](https://icp.gov.moe/?keyword=20201324)号'

百度收录

见：百度收录推送

stellar 表情标签索引

见：stellar表情标签索引

调整最大边距

修改 themes/stellar/source/css/_custom.styl :

1
2
3

// 可以动态变化的属性
:root
  --width-main: 820px  //680

赞赏部件–sponsor-page

见：请作者喝咖啡–sponsor-page

示例：

移植 next 主题的 label 标签

仅对纯文本有效：

class: gray purple blue green orange yellow red

示例：

1

{% label gray gray %}{% label purple purple %}{% label blue blue %}{% label green green %}{% label orange orange %}{% label yellow yellow %}{% label red red %}

主题已集成 : mark 标签
官方效果：支持多彩标记标签，包括：默认红橙黄绿青蓝紫浅深 一共 10 种颜色

related_posts 随机选取图片作为相关文章封面

已与下面 添加随机自定义封面和横幅 合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    if (p) {
      if (p.cover) {
        if (p.cover.includes('/')) {
          list.img = p.cover;
        } else {
          list.img = 'https://source.unsplash.com/1280x640/?' + p.cover;
        }
+      } else if (cfg.selfimg.enable && cfg.selfimg.imgs && cfg.selfimg.imgs.length > 0) {
+        list.img = cfg.selfimg.imgs[Math.floor(Math.random() * cfg.selfimg.imgs.length)]
      }else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
        var params = '';
        p.tags.reverse().forEach((tag, i) => {
          if (i > 0) {
            params += ',';
          }
          params += tag.name;
        });
        list.img = 'https://source.unsplash.com/1280x640/?' + params;
      }
    }

related_posts 的问题在我本地上还是没有解决，如果我是通过本地发布，那么相关文章的图片将会是我自己设置的，如果是通过 Github Action 自动部署的那么将会是 cover 图片。所以看一下我文章相关文章大概就知道我最后一次发布是怎么发布的了。

部署效果：

Github Action

腾讯云 Serverless + Github Action 自动部署 Hexo 博客

设置 footer 链接不显示下划线

1
2
3
4
5

    margin: 4px 0
    line-height: 1.2
  a
-    text-decoration: underline
+    text-decoration: none

添加音乐播放器

播放器官网：myhkw
在 body 标签之前加入：

1
2

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://myhkw.cn/api/player/163072767496" id="myhk" key="" m="1"></script>

添加哔哔点啥

见：BBer：哔哔点啥-配置记录

自定义封面

已与下面 添加随机自定义封面和横幅 合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    } else if (theme.article.auto_cover) {
      // 自动以 tags 作为关键词搜索封面
      if (post.tags) {
        var params = '';
        post.tags.reverse().forEach((tag, i) => {
          if (i > 0) {
            params += ',';
          }
          params += tag.name;
        });
        cover_url = 'https://source.unsplash.com/1280x640/?' + params;
      } else {
        cover_url = 'https://source.unsplash.com/random/1280x640';
      }
+    } else if (theme.article.default_cover.enable) {
+        cover_url = theme.article.default_cover.imgs[Math.floor(Math.random() * theme.article.default_cover.imgs.length)]
    }

更换 HarmonyOS 字体

参考：Hexo Stellar 主题和 Next 主题使用 HarmonyOS 字体

1
2
3
4
5

style:
  font-family:
    logo: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
    body: HarmonyOS_Regular
    code: Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif

1. 修改主题文件 /source/css/_custom.styl，39行：

1

$ff-body = HarmonyOS_Regular

2. 站点根目录设置文件 _config.yml 中添加 :

1
2
3
4
5

inject:
  head:
    - <link rel="preconnect" href="https://s1.hdslb.com/" />
    - <link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media="all" onload="this.media='all'" />
    - <link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media="all" onload="this.media='all'" />

打印本文：

在 "...\layout\_partial\main\article\article_footer.ejs" 文件添加如下代码：

1
2
3
4
5
6
7
8
9

if (theme.article.printpost && page.printpost != false) {
  el += '<section id="printpost">';
  el += '<div class="header">';
  el += '<span>' + __('meta.printpost') + '</span>';
  el += '<script>';
  el += 'var pfHeaderImgUrl = "";var pfHeaderTagline = "";var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = "block";var pfDisablePDF = 0;var pfDisableEmail = 1;var pfDisablePrint = 0;var pfCustomCSS = "";var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion="2";(function(){var js,pf;pf=document.createElement("script");pf.type="text/javascript";pf.src="//cdn.printfriendly.com/printfriendly.js";document.getElementsByTagName("head")[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/printfriendly-pdf-button-nobg-md.png" alt="Print Friendly and PDF"/>';
  el += '</a>';
  el += '</section>';
}

注意 ‘meta.printpost’ 是主题文件中的 languages 文件，记得在其中设置相应的中英文。 并在 _config.stellar.yml 的 article 部分，添加：

1
2

article:
  printpost: true

若设置为 printpost: true 则启用打印本文，反正关闭。

为 Katex 配置滚动条

xaoxuu 大佬在评论区提供了 Katex 公式在移动设备下超出显示的解决方案，用滚动条。为了避免在桌面端出现滚动条，加上主题原生的设备控制就好了：

1
2
3

.md p.katex-block
  @media screen and (max-width: $device-tablet)
    overflow: scroll;

添加随机自定义封面和横幅

这部分的随机自定义封面与 related_posts 随机选取图片作为相关文章封面 共用一个图片源，文章的 “banner” 用另一个图片库
有时候懒得找图片有没有什么关键词，就直接用自己预定好的图片随机当个封面，省时省力，主题自带的功能不受影响

需要修改三处主题代码：layout_partial\cover\post_cover.ejs、layout_partial\main\post_list\post_card.ejs、scripts\helpers\related_posts.js
然后在主题设置中添加相应的图片源即可

三处代码修改如下：

1. layout_partial\cover\post_cover.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 <%
function div() {
  var el = '';
-  if ((page.banner == undefined || page.banner == false) && !theme.article.auto_banner) {
+  if (page.banner == false) {
    return el;
  }
  var url;
  if (page.banner != undefined) {
    if (page.banner.includes('/')) {
      url = page.banner;
    } else {
      url = 'https://source.unsplash.com/2000x400/?' + page.banner;
    }
-  } else {
+  }  else if (theme.article.auto_banner && !theme.article.default_banner.enable) {
    // 自动以 tags 作为关键词搜索封面
    if (page.tags) {
      var params = '';
      page.tags.reverse().forEach((tag, i) => {
        if (i > 0) {
          params += ',';
        }
        params += tag.name;
      });
      url = 'https://source.unsplash.com/2000x400/?' + params;
    } else {
      url = 'https://source.unsplash.com/random/2000x400';
    }
+  } else if (theme.article.default_banner.enable) {
+        url = theme.article.default_banner.imgs[Math.floor(Math.random() * theme.article.default_cover.imgs.length)]
  }

2. layout_partial\main\post_list\post_card.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

-  if (post.cover || theme.article.auto_cover) {
+  if (post.cover || theme.article.auto_cover || theme.article.default_cover.enable) {
    var cover_url;
    if (post.cover != undefined) {
      if (post.cover.includes('/')) {
        cover_url = post.cover;
      } else {
        cover_url = 'https://source.unsplash.com/1280x640/?' + post.cover;
      }
-    } else {
+    } else if (theme.article.auto_cover && !theme.article.default_cover.enable) {
      // 自动以 tags 作为关键词搜索封面
      if (post.tags) {
        var params = '';
        post.tags.reverse().forEach((tag, i) => {
          if (i > 0) {
            params += ',';
          }
          params += tag.name;
        });
        cover_url = 'https://source.unsplash.com/1280x640/?' + params;
      } else {
        cover_url = 'https://source.unsplash.com/random/1280x640';
      }
+    } else if (theme.article.default_cover.enable) {
+        cover_url = theme.article.default_cover.imgs[Math.floor(Math.random() * theme.article.default_cover.imgs.length)]
    }

3. scripts\helpers\related_posts.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    return '';
  }
  const cfg = hexo.theme.config.article.related_posts;
+  const dfc = hexo.theme.config.article.default_cover;
  if (cfg.enable != true) return;
  var returnHTML = "";
  var div = `
@ -42,7 +43,9 @@ hexo.extend.helper.register('popular_posts_wrapper', function(args){
        } else {
          list.img = 'https://source.unsplash.com/1280x640/?' + p.cover;
        }
-      } else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
+      } else if (dfc.enable && dfc.imgs && dfc.imgs.length > 0) {
+        list.img = dfc.imgs[Math.floor(Math.random() *dfc.imgs.length)]
+        } else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
        var params = '';
        p.tags.reverse().forEach((tag, i) => {
          if (i > 0) {