相信大部分博主都会对使用中的博客主题进行一定程度的修改。

尽管作者的代码能力并不高，但也借助网络教程摸索了一些方法。

在这里分享出来踩坑和成功的例子，仅供大家参考！

---

本文章不定期更新，且正在修改中，不保证内容完全可用！

章节顺序与博客时间线同步。

Giscus 评论系统

hexo-fluid免费部署评论功能 - Haoyu的博客

• 若网站链接变动，可直接在博客仓库的 Discussions 修改 Discussion title。

接入 Bing 和 Google 搜索引擎

hexo-seo-submit，Hexo 博客 SEO 优化插件 | kshao-blog-前端知识记录

• WIP

接入 Bing IndexNow

zkz098/hexo-indexnow: Use the indexnow protocol to push links to search engines to improve SEO

hexo-indexnow插件使用教程

页脚添加网站运行时间^[1]

Fluid 页脚增加网站运行时长 - Hexo Theme Fluid

页脚文字与网站统计数文字格式不匹配

• 两者 HTML 格式不同。

复现：右键总访客数，点击检查，此时的代码应当是

.footer-inner > div:not(:first-child) {
  margin: 0.25rem 0;	/*取消勾选后，行间距统一*/
  font-size: 0.85rem;
}

修改：进入主题目录 hexo-theme-fluid/source/css/_pages/_base/_widget，打开 footer.styl。

将第六行 margin 的值由 .25rem 0 改为 0 0 即可。

& > div:not(:first-child)
  margin 0 0
  font-size .85rem

导航栏修改和自定义图标的添加

加入开往项目的一个要求就是把开往外链放在打开网站就能看到的地方。刚好想修改下导航栏，说干就干。

由于 Fluid 主题自带图标库没有合适的，还需要额外导入。我这里选择的是 travelling。

添加自定义图标

① 根据主题指南，将选好的图标添加到购物车，然后直接点击下载代码，会得到 download.zip。

② 进入压缩包文件夹 /font_xxxxxxxx，将 iconfont.css 和 iconfont.ttf 提取到博客目录里面。

• 作者的路径是 /source/icon-font-css/travelling/iconfont.css，但你可以自己修改路径。

③ 进入主题配置文件 _config.fluid.yml，指定自定义 .css 文件路径。

custom_css: 
  - /icon-font-css/travelling/iconfont.css

• 可以使用 你的网站链接/icon-font-css/travelling/iconfont.css 检查 .css 是否成功导入。

导航栏修改

这里是作者自己修改后的导航栏，仅供各位参考。

menu:
# - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
- { key: "手记", link: "/categories/随缘手记/", icon: "iconfont icon-home-fill" }
- {
    key: "目录", 
    icon: "iconfont icon-books", 
    submenu: [
      { key: "归档", link: "/archives/", icon: "iconfont icon-archive-fill" },
      { key: '分类', link: '/categories/', icon: "iconfont icon-category-fill"},
      { key: "标签", link: "/tags/", icon: "iconfont icon-tags-fill" },
      { key: "书签", link: "/Temporary_Storage/", icon: "iconfont icon-bookmark" }
    ],
  }
- { key: "友链", link: "/links/", icon: "iconfont icon-link-fill" }
- { key: "开往", link: "https://www.travellings.cn/go.html", icon: "iconfont icon-travelling" }
- { key: "关于", link: "/about", icon: "iconfont icon-user-fill" }
- { link: "/RSS_atom.xml", icon: "iconfont icon-rss-fill" }

RSS 生成

hexo 添加 RSS 订阅功能 | 沐曦留曳

hexojs/hexo-generator-feed: Feed generator for Hexo.

全站字数统计

• 请确保插件 hexo-wordcount 已经安装！

写文前一个月就想添加全站字数统计了，又不满足官方 Github Issue 的暴力方法，但一直无法复现大佬的改法，非常苦恼。

后来找到了另一位大佬的博客备份仓库，经过仔细对比 Commits 才搞清楚。

① 在博客目录的 blog/source 文件夹创建 _inject 文件夹，在其中创建文件 word_total.ejs。

② 在主题目录的 hexo-theme-fluid/scripts 文件夹创建 theme_inject.js。

③ 在主题目录的 hexo-theme-fluid/layout/_partials/footer.ejs 倒数第二行末尾添加如下内容。

<!-- word_total.ejs -->
<script type="text/javascript">
    document.getElementById("g-post-count-id").innerHTML = "小世界总字数 <%= wordtotal(site) %>";
</script>

// theme_inject.js
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.bodyEnd.file('showword', 'source/_inject/word_total.ejs', { key: 'value' }, -1);
});

<!-- footer.ejs -->
  <!-- 此处格式同步 footer 参数 -->
  <div style="font-size: 0.85rem">
    <span id="g-post-count-id">载入字数...</span>
  </div>

• Fluid 官方指南可能有误。作者在博客目录创建 theme_inject.js 后加载失败，最后被迫在主题目录创建。
• g-post-count-id 和 showword 可以改为其他自定义字符，但后者不能为default。
• word_total.ejs 和 theme_inject.js 可以任意重命名，只要路径正确即可。
• theme_inject.js 的 bodyEnd 可以根据官方指南修改到其他位置。

参考文章

1. Fluid 页脚增加网站运行时长 - Hexo Theme Fluid ↩