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

2025年05月23日 732 字大概 3 分钟

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

如你所见，气象台使用了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的引入代码放在后面，就可以了。

字段修改前：

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

修改后：

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

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

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

3.参考内容

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