思路：向不支持的博客主题添加Twikoo作为留言板

提示#

这是小站在早期建设过程中的一些经历，彼时的站点与现在有诸多不同，仅供参考。

前排提醒，本文涉及修改主题文件，请提前做好文件备份。否则可能导致博客异常渲染甚至崩溃。

如你所见，气象台使用了Kira-hexo这个主题。主题本身还很好看，一些功能也比较方便（比如bilibili播放器，自带Aplayer）。

可是吧，Kira-hexo主题的留言板完全依赖于Github discussion，就内地Github的使用体验吧，只能说是能用，但不太能用的量子叠加态。因此计划自建Twikoo。结果在Twikoo官网上的“前端安装”上发现：Kira原生不支持Twikoo，需要通过CDN引入。

于是自己研究了一下Hexo的输出原理，采用了后端自行部署，前端在主题的layout文件里面引入代码的方式，完成了留言板的部署。

1.部署后端#

先安装node.js，之后运行这个命令，安装Twikoo后端：

1
npm i -g tkserver

之后运行这个命令，启动后端（端口号可以自己选）：

1
TWIKOO_PORT=7654 tkserver

2.引入前端（通过CDN）#

kira主题的layout文件放在主题文件夹的layout文件夹。我们希望只在文章里引入Twikoo，所以修改 post.ejs。

观察这个文件的内容，~~看不懂也没关系~~。注意到有一个kira-post-footer字段，尾随有gitalk与giscus。这是kira自带的两个留言板系统，只要把Twikoo的引入代码放在后面，就可以了。

字段修改前：

1
  <% if (page.comments){ %>
2
  <div class="kira-post-footer">
3
    <%- partial('components/comments/gitalk') %>
4
    <%- partial('components/comments/giscus') %>

修改后：

1
  <% if (page.comments){ %>
2
  <div class="kira-post-footer">
3
    <%- partial('components/comments/gitalk') %>
4
    <%- partial('components/comments/giscus') %>
5
  <div id="tcomment"></div>
6
    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"></script>
7
    <script>
8
    twikoo.init({
9
      envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
10
      el: '#tcomment', // 容器元素
11
      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
12
      // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
13
      // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
14
    })
15
    </script>

如果你使用的是kira主题，可直接使用上边的修改部分。如果不是，建议采用上面的思路，寻找文章的layout文件，然后通过观察法在正确位置插入twikoo的引入代码。

由于修改的是主题代码，在更新时会覆盖修改好的文件，因此每更新一次就需要修改一次文件，比较麻烦。如果有条件，可以向主题作者提交issue，或者贡献项目代码。

3.参考内容#

1.Twikoo官方文档。(https://twikoo.js.org/frontend.html)