给 Hexo 博客的 Fluid 主题增加“分享到”模块

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

1 我想要个“分享到”模块

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

这个主题本身不具有“分享到”模块。开发者也明确表示没有必要再内嵌分享功能。

谷月姐在 GitHub 上提 Issue ，结果被开发者拒绝，只好自己想办法。

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

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

谷月姐想把“分享到”模块放在正文部分的最后，并且位于“分享到”模块的前面，也就是画红框的区域。
我想把“分享到”模块放在这里

3 我只能修改主题源文件

所谓给 Hexo 博客增加“分享到”模块，其实是给博客的主题增加“分享到”模块，需要修改主题的源文件。

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

展示“分享到”模块，需要引入外部 JS。

作为一个对 JS 一窍不通、只了解一丁点 HTML 与 CSS 的前端小白，谷月姐曾经尝试了 N 篇通过引入外部 JS 来为 Hexo 博客增加打赏模块的教程（记录在^[1]中），都失败了。所以谷月姐先简单地看了一遍廖雪峰的 Javascript 教程，再动手。

3.1 选择“分享到”模块

有很多第三方开发的“分享到”模块可供选择，例如最经典的 ShareJS，支持全球多种社交网络的 Social9-share，还有看起来最简单的 Social-share.js 等等。

其实我也是瞎猫碰上死耗子，乱选一气，选中了看起来比较简单的 Social-share.js。

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 文件所依赖的模板。文章模板决定了每一篇博文是如何显示的。文章模板位于 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 代码

Social-share.js 需要用 HTML 代码在文章模板，也就是 themes/fluid/layout/post.ejs 中引入外部 JS。

参考 Social-share.js 的 Readme.md 文档和示例文件，完全不懂 JS 的谷月姐绞尽脑汁写了一段 HTML 代码，并且把这段代码添加到 themes/fluid/layout/post.ejs 文章模板的 </div> 和 <hr> 之间。

<div style="text-align:right"> <!-- 自己添加的“分享到”模块：开始。用的是 social-share.js。让所有的分享按钮右对齐-->
	<div class="social-share-container3" style="margin-top: 15px;"> <!-- 生成一组分享按钮，用的是样式3（圆形主题） -->
		<% if (config.language == 'zh-CN') {%> <!--如果博客语言是中文，就显示“点击分享到：”，非中文一律显示“Share it:”-->
			点击分享到：
		<% } else { %>
			Share it:
		<% } %>
	</div>
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <!-- 加载 jQuery 库 -->
	<script src="https://cdn.jsdelivr.net/gh/slince/social-share.js/dist/social-share.min.js"></script> <!-- 加载 social-share.js 的 js 库，用绝对路径，借助 jsDelivr 的 CDN，从 GitHub 加载，另外还要加载 social-share.js 的 CSS，也是要用绝对路径，可以修改 `_config.fluid.yml` 的 `custom_css` 加载，也可以修改 `themes/fluid/layout/_partial/css.ejs` 加载。-->
	<script> <!-- 执行 js 代码，new 一个新对象，container3 代表带圆框的图标，详见 social-share.js 在 GitHub 的文档 -->
		new SocialShare('.social-share-container3', {
			theme: 'circle',
		});
	</script>
</div> <!-- 自己添加的“分享到”模块：结束。-->

上面这段 HTML 代码实现了如下功能：

根据博客的语言设置显示分享提示，如果博客语言是中文，就显示“点击分享到：”，非中文一律显示“Share it:”
从绝对路径加载 JS，因为谷月姐一开始把 JS 文件和 jQuery 库下载到本地，用相对路径加载，但是死活不成功，只好改用绝对路径。感谢 jsDelivr CDN ！
把“分享到”模块放到文章正文内容的最后，右对齐。

注意：谷月姐一开始把 JS 文件和 jQuery 库下载到本地，用相对路径加载，但是死活不成功，改成绝对路径加载就一次成功，不知道问题出在哪里。只好留待以后学会前端以后再探讨了。

3.5 链接 CSS 的两种方法

Social-share.js 需要在 <head>...</head> 区域引入 CSS。

此处有两种方法。注意：只能选择一种，不能两种都用。

3.5.1 方法一：修改 css.ejs 文件

经过细致地分析，谷月姐发现 Fluid 主题把所有要链接的 CSS 都放在 theme/fluid/layout/_partial/css.ejs 文件中。

打开这个文件，谷月姐发现 Fluid 主题的开发者在文件最后预留了一个 自定义样式保持在最底部 区域。

我们只需要在它上方添加一段引入 Social-share.js 的 CSS 文件的代码即可。

<!-- 链接 Social-share.js 的CSS -->
<%- css('https://cdn.jsdelivr.net/gh/slince/social-share.js/dist/social-share.min.css') %>

效果图如下：

3.5.2 方法二：修改 _config.fluid.yml 文件

Fluid 主题的开发者提供了自定义 CSS 功能，可以让用户从外部引入 CSS 文件。

打开博客源文件所在的文件夹下的 _config.fluid.yml 文件（如果没有使用覆盖配置，就要打开博客源文件所在的文件夹下的 theme/fluid/_config.yml 文件），找到 custom_css:，把 Social-share.js 的 CSS 文件的路径及文件名（https://cdn.jsdelivr.net/gh/slince/social-share.js/dist/social-share.min.css）写在后面即可。

效果图