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

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

1 我想要个打赏模块

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

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

谷月姐只好自己想办法。

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

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

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

3 我只能修改主题源文件

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

3.1 两种方法

通过搜索相关教程,谷月姐发现,为 Hexo 主题增加打赏模块,其实是修改主题源文件中的文章模板(一般是 post.ejspost.pugarticle.ejsarticle.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.ejspost.pug。早期的主题,文章模块的文件名还有可能是 article.ejsarticle.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 修改成自己喜欢的打赏提示语,把 alipaywechatpay 修改成自己的付款二维码图片所在的相对路径。

4 最终效果

我这么可爱,请给我钱

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

5 参考资料