给 Hexo 博客的 Fluid 主题增加打赏模块
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 页面,认真分析其结构。因为我想把打赏二维码放在文章内容的最后,所以我需要从后往前分析。
我很顺利地就在 themes/fluid/layout/post.ejs
中找到了水平线 <hr>
,并且根据变量名字猜测下面这一段代码对应文章内容。
1 |
|
这样,只需要把以下打赏模块的 HTML 代码添加到 themes/fluid/layout/post.ejs
文章模板的 </div>
和 <hr>
之间就可以辣。
3.4 打赏模块的 HTML 代码
谷月姐绞尽脑汁写了一段 HTML 代码,它实现了如下功能:
- 两张二维码放在同一行里,强制它们居中显示。
- 把图片最大宽度限制为 300 px,并且让图片根据页面宽度缩放,以免一张二维码跑到第二行里去了。
- 让用户能通过修改
_config.fluid.yaml
中的设置,自定义两张二维码图片,自定义打赏提示语。 - 放了一个盒子,显示“打赏支持”,这个盒子显示的内容,随博客的语言不同而不同,中文是“打赏支持”,其他语种是“Donate”。
将这段代码复制粘贴,添加到 post.ejs
文章模板的 </div>
和 <hr>
之间就可以辣,记得保存!
1 |
|
3.5 修改主题的配置文件
因为打赏模块的 HTML 代码需要从主题的配置文件中读取变量,因此还需要在主题的配置文件中加入相应的变量。
打开博客源文件所在的文件夹下的 _config.fluid.yml
文件(如果没有使用覆盖配置,就要打开博客源文件所在的文件夹下的 theme/fluid/_config.yml
文件),在最后添加如下内容:
1 |
|
记得把 message
修改成自己喜欢的打赏提示语,把 alipay
和 wechatpay
修改成自己的付款二维码图片所在的相对路径。
4 最终效果
你都看到这里了,给谷月姐打个赏好不好?
5 图片版权
头图:Image by Erika Varga from Pixabay
6 参考资料
![](/img/zhi-fu-bao-shou-kuan-ma.png)
![](/img/wei-xin-zan-shang-ma.png)