给 Hexo 博客的 Fluid 主题增加打赏模块

本文最后更新于：2022年4月8日 凌晨

1 我想要个打赏模块

谷月姐的博客 https://blog.kukmoon.com 是用 Hexo 搭建的，使用的主题是 Fluid 。

这个主题本身不具有打赏模块。开发者也明确表示不打算加入打赏模块。
开发者也明确表示不打算加入打赏模块

谷月姐只好自己想办法。

2 注入 HTML 不能满足我的需求

Fluid 主题的开发者提供了 post: custom 和 custom_html 功能，允许用户向主题的模板中注入外部 HTML。但是，经过谷月姐测试，它只会把外部 HTML 放到页脚（Footer）位置。不满足谷月姐的要求。
把打赏二维码放在页脚

谷月姐想把打赏二维码放在正文部分的最后，也就是画红框的区域。
我想把打赏二维码放在这里

3 我只能修改主题源文件

所谓给 Hexo 博客增加打赏模块，其实是给博客的主题增加打赏模块，需要修改主题的源文件。

3.1 两种方法

通过搜索相关教程，谷月姐发现，为 Hexo 主题增加打赏模块，其实是修改主题源文件中的文章模板（一般是 post.ejs、post.pug、article.ejs、article.jade 之类，它决定博客中每一篇博文的格式），在文章模板中展示打赏二维码。

展示打赏二维码有两种方法：HTML 法、JS 法。

  • 所谓 HTML 法，就是简单粗暴地修改文章模板，增加一段展示打赏二维码的 HTML 代码。我喜欢的另一款 Hexo 主题 Melody 就是用这种方法展示打赏二维码的。
  • 所谓 JS 法，就是为文章模板引入外部 JS，让这一段 JS 展示打赏二维码。JS 法比较高级，可以实现更多的动效，比如，显示一个按钮，点击按钮，才会显示打赏二维码。

作为一个对 JS 一窍不通、只了解一丁点 HTML 与 CSS 的前端小白，谷月姐尝试了 N 篇使用 JS 法的教程[1][2][3][4][5]，都失败了，不得不退而求其次，改用 HTML 法。

3.2 重装 Fluid 主题

因为我要修改 Fluid 主题的源文件，但是我当初是用 npm install hexo-theme-fluid --save 的方式安装的主题，这种安装方式会把主题安装在 C:\Users\<用户名>\AppData\Roaming\npm\node_modules\hexo-theme-fluid 文件夹下。主题源文件不在博客源文件的文件夹里，改了主题源文件以后，新的主题源文件无法随博客源文件上传到云端，就无法借助 GitHub Actions 或者 Netlify 等工具实现持续部署。

谷月姐当初用的是覆盖配置，即把 C:\Users\<用户名>\AppData\Roaming\npm\node_modules\hexo-theme-fluid\_config.yml 复制一份到博客源文件夹所在的文件夹，并改名为 _config.fluid.yml，通过修改它来实现主题的配置。所以，不需要操心配置文件的问题。

如果你没有使用覆盖配置，就需要先备份配置文件 C:\Users\<用户名>\AppData\Roaming\npm\node_modules\hexo-theme-fluid\_config.yml。

接下来，执行 npm uninstall hexo-theme-fluid --save 命令，卸载已经安装的 Fluid 主题，记得删除 C:\Users\<用户名>\AppData\Roaming\npm\node_modules\hexo-theme-fluid 文件夹。

然后按照 Fluid 主题官方文档给的安装方式 ，下载最新 release 版本 ，解压到博客源文件所在的文件夹中的 themes 子文件夹，并将解压出的文件夹重命名为 fluid。

如果你没有使用覆盖配置，就把刚才备份的 _config.yml 复制到 themes/fluid/ 文件夹，覆盖同名文件。如果使用了覆盖配置，这一步就可以忽略。

3.3 寻找并修改文章模板

Hexo 主题中的文章模板，准确地说，是 .md 文件编译成 .html 文件所依赖的模板[6]。文章模板决定了每一篇博文是如何显示的。文章模板位于 themes/<主题名>/layout 文件夹中，文件名一般是 post.ejs 或 post.pug。早期的主题，文章模块的文件名还有可能是 article.ejs、article.jade。

Fluid 主题的文章模板就是 themes/fluid/layout/post.ejs。

用文本编辑器打开它，对比博文的 HTML 页面，认真分析其结构。因为我想把打赏二维码放在文章内容的最后，所以我需要从后往前分析。

博文的 HTML 页面

post.ejs

我很顺利地就在 themes/fluid/layout/post.ejs 中找到了水平线 <hr>，并且根据变量名字猜测下面这一段代码对应文章内容。

<div class="markdown-body">
  <%- page.content %>
</div>

这样，只需要把以下打赏模块的 HTML 代码添加到 themes/fluid/layout/post.ejs 文章模板的 </div> 和 <hr> 之间就可以辣。
添加到这里

3.4 打赏模块的 HTML 代码

谷月姐绞尽脑汁写了一段 HTML 代码，它实现了如下功能：

  1. 两张二维码放在同一行里，强制它们居中显示。
  2. 把图片最大宽度限制为 300 px，并且让图片根据页面宽度缩放，以免一张二维码跑到第二行里去了。
  3. 让用户能通过修改 _config.fluid.yaml 中的设置，自定义两张二维码图片，自定义打赏提示语。
  4. 放了一个盒子，显示“打赏支持”，这个盒子显示的内容，随博客的语言不同而不同，中文是“打赏支持”，其他语种是“Donate”。

将这段代码复制粘贴，添加到 post.ejs 文章模板的 </div> 和 <hr> 之间就可以辣，记得保存！

<div style="text-align: center; margin: auto;"><!--自己添加的打赏模块：开始-->
  <% if (theme.donate.enable) { %><!--如果主题的  _config.yml 中开启打赏-->
    <hr><!--放一条水平线与文章正文内容区分-->
    <div style="background-color: #663399; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; border-radius: 8px;margin-bottom: 10px;"><!-- 显示“打赏支持”的盒子-->
	  <% if (config.language == 'zh-CN') { %> <!--如果博客语言是中文，就显示“打赏支持”，非中文一律显示“Donate”-->
	    打赏支持
	  <% } else { %>
	    Donate
	  <% } %>	
	</div>
    <div style="font-size: 14px;margin-bottom: 10px;">
	  “<%= theme.donate.message %>” <!--在主题的 _config.yml 中设置打赏提示语-->
	</div>
    <div style="width: auto; height: auto; max-width: 600px; max-height: 600px; text-align: center; margin: auto; "><!--两张二维码强制放在同一行，以免换行，强制设定图片的宽度随页面的变化而变化，图片最大宽度为300 px-->
	  <img src="<%= theme.donate.alipay %>" style="width: auto; height:auto; max-width: 50%;"><img src="<%= theme.donate.wechatpay %>" style="width: auto; height: auto; max-width: 50%;"><!--在主题的 _config.yaml 中设置打赏二维码图片-->
	</div>
  <% } %>
</div> <!--自己添加的打赏模块：结束-->

3.5 修改主题的配置文件

因为打赏模块的 HTML 代码需要从主题的配置文件中读取变量，因此还需要在主题的配置文件中加入相应的变量。

打开博客源文件所在的文件夹下的 _config.fluid.yml 文件（如果没有使用覆盖配置，就要打开博客源文件所在的文件夹下的 theme/fluid/_config.yml 文件），在最后添加如下内容：

# Donate 自己为 Fluid 主题增加的打赏功能
# `message` 是打赏提示语，可自定义
# `alipay` 是支付宝付款码， `wechatpay` 是微信付款码。
donate:
  enable: true
  message: '我这么可爱，请给我钱 o(*^ω^*)o'
  alipay: img/zhi-fu-bao-shou-kuan-ma.png
  wechatpay: img/wei-xin-zan-shang-ma.png

记得把 message 修改成自己喜欢的打赏提示语，把 alipay 和 wechatpay 修改成自己的付款二维码图片所在的相对路径。

4 最终效果

我这么可爱，请给我钱

你都看到这里了，给谷月姐打个赏好不好？

5 参考资料

  1. http://www.do-sth.cn/2019/10/16/Hexo%E5%8D%9A%E5%AE%A2BlueLake%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89%E6%89%93%E8%B5%8F%E5%8A%9F%E8%83%BD/ ↩
  2. https://www.jianshu.com/p/16a8f15c543d ↩
  3. https://bestwing.me/hexo-donate.html ↩
  4. http://www.noobyard.com/article/p-cllisqny-bt.html ↩
  5. http://cighao.com/2016/02/23/add-donate-to-hexo/ ↩
  6. https://www.cnblogs.com/yyhh/p/11058985.html ↩