前言
博客之前使用的评论系统是livere（来必力），但并不好用，国内加载速度慢，且评论通知功能也不可用。
看了下「even」主题支持的其他评论系统。
- 畅言，看网上评论提到有广告，要想去广告还需要购买VIP，直接排除。
- disqus，国内网络基本无法访问，排除。
- valine，查看网上的资料，已经不再维护了。
- gitalk、utterances、gitment，基于github，评论需要github账号，对于没github账号的用户来说有点麻烦。
总之，没有一个合适的评论系统。
由于自己的博客本来就放在服务器上，因此倾向于找一个能自建的评论系统。经过查找，发现了「twikoo」、「Waline」、「Artalk」等。没有详细的比对这几个评论系统的差异，只是最早看到了「twikoo」，且发现它满足自己的需求，因此就决定使用「twikoo」了。
但是「even」主题并不支持「twikoo」，且好久不再更新。面前是两个选择。
- 换支持「twikoo」的主题。自己对「even」主题一直很满意，再加上换主题又需要折腾一番，放弃。
- 调整「even」主题支持「twikoo」评论系统。大概看了下「twikoo」的文档，虽然自己不懂前端，但看起来也没自己想象的那么麻烦，可以试试。
后端部署
「twikoo」提供了多种后端部署方式，我决定采用docker部署的方式。自己博客的内容本来就放在自己的服务器上，「twikoo」与之放在一起刚刚好，也不用担心后续其他免费平台调整政策的风险。
直接参考官方文档的命令启动容器，这里将端口只暴露在本地，通过反代的形式对外提供访问。
1
|
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 127.0.0.1:8888:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo
|
直接使用自己博客的NGINX配置中增加以下反代配置。可以复用自己博客的域名以及SSL。
1
2
3
4
5
6
7
8
|
location /twikoo {
proxy_set_header Host 'renyili.org';
proxy_pass http://127.0.0.1:8888;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
|
之后直接访问https://renyili.org/twikoo测试是否可以访问。
前端配置
前端可以通过CDN引入，只要在html中增加以下代码即可。
1
2
3
4
5
6
7
8
9
10
11
|
<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.27/twikoo.all.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>
|
查找「even」主题中其他评论系统的代码所在位置在themes/even/layouts/partials/comments.html中，比葫芦画瓢直接添加「twikoo」的代码即可。
自己添加的内容如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!-- twikoo -->
{{- if .Site.Params.twikoo.enable}}
<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: '{{ .Site.Params.twikoo.env }}', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
el: '#tcomment', // 容器元素
region: '{{ .Site.Params.twikoo.region }}', // 环境地域，默认为 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>
{{- end }}
|
对应的主题config.toml配置如下。
1
2
3
4
5
|
[params.twikoo]
enable = true
version= "1.6.27"
env = "https://renyili.org/twikoo"
region = ""
|
之后更新主题发布，测试可用，虽然不懂前端，但整体还是很简单的。
在看文档的时候，发现「twikoo」支持统计页面的阅读量。自己之前使用的是不蒜子，但不知何时起不蒜子的阅读量统计便统计不准了，既然「twikoo」支持，那么也趁这个机会调整下。
「even」主题展示文章阅读量的代码在themes/even/layouts/post/single.html中。参考不蒜子的代码，比葫芦画瓢增加以下代码。
1
2
3
4
|
{{- if and .Site.Params.twikoo.enable .Site.Params.twikoo.visitor }}
{{ $valueSpan := `<span id="twikoo_visitors">0</span>` -}}
<span class="more-meta"> {{ printf (T "pagePV") $valueSpan | safeHTML }} </span>
{{- end }}
|
对应的配置也需要增加visitor字段。
1
2
3
4
5
6
|
[params.twikoo]
enable = true
version= "1.6.27"
env = "https://renyili.org/twikoo"
visitor = true
region = ""
|
这里注意，在设置「twikoo」的visitor字段为真时，需要关闭不蒜子的pagePV配置。
最后
若你也想在「even」主题中使用「twikoo」，可参考我fork并修改的仓库，另外提醒下，这个仓库的主题色被我调整为了「蓝色」。
livere没有提供评论导出功能，虽然我能通过爬虫方式将之前的评论抓下来，但不清楚该如何生成相应的「twikoo」导入数据，因此之前的评论可以说是丢失了，比较遗憾。