Twikoo替换Giscus

引言

我在之前写的hugo主题Stack和评论Giscus中推荐的是Giscus，优点是GitHub账户的前置要求自带筛选门槛，缺点也是GitHub账户导致评论的门槛过高，不利于交流。考虑再三，替换成Twikoo。

部署

官网教程说得挺清晰，主要就是后端处理（官方叫云函数部署）和前端交互两部分。根据个人需求，后端我选择docker部署在自己VPS上，前端适配Hugo。

私有部署（Docker）

按照官方给的Docker Compose文档，docker compose up -d安装实例。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


version: '3'
services:
  twikoo:
    image: imaegoo/twikoo
    container_name: twikoo
    restart: unless-stopped
    ports:
      - 8080:8080
    environment:
      TWIKOO_THROTTLE: 1000
    volumes:
      - ./data:/app/data

在DNS管理商处添加A记录后，配置Nginx反代文档。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name twikoo.example.com; #你的域名
    ssl_certificate /etc/nginx/example/cert.pem; #你自己的证书位置
    ssl_certificate_key /etc/nginx/example/key.pem; #你自己的私钥位置
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;
    ssl_session_tickets off;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;
    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Range $http_range;
        proxy_set_header If-Range $http_if_range;
        proxy_pass http://127.0.0.1:8080; # 宿主机端口
    }
}

PS：个人习惯仅允许HTTPS访问，80端口的配置文件详见MinIO部署与PicGo中的/etc/nginx/nginx.conf(通用配置)。
至此，Twikoo后端搭建完成。

在Hugo中使用

Hugo不同主题的前端部署方式不同。不支持Twikoo的博客主题，官方教程：通过CDN引入。我使用的Stack主题。只需修改根目录下的config.yaml：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


params:
... #省略前文

    comments:
        enabled: true
        provider: twikoo

        twikoo:
            envId: https://twikoo.example.com/
            region:
            path:
            lang:

... #省略后文

前端使用的JS版本可能落后于后端，根据官方教程：不同版本之间的区别，在根目录下创建/layouts/partials/comments/provider/twikoo.html，复制/themes/hugo-theme-stack/layouts/partials/comments/provider/twikoo.html中的内容，并替换JS文件链接：

1
2
3


<!-- 替换掉原先的<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js"></script> -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.min.js"></script>
...<!-- 省略相同部分 -->

至此，Twikoo前端搭建完成，在文章页尾部就能看到Twikoo评论区了。

Twikoo的个性化设置

在博客页的Twikoo评论区点进右下角的小齿轮进行修改。

管理员密码

首次进入面板时设置。忘记的话，参考官网教程：如何修改、重置管理员密码？重置。

通用、隐私、反垃圾

自己看着改，可以参考这个佬的文章：第三夏尔：在静态博客里添加Twikoo评论系统，并配置邮箱和TG通知。

即时通知

我个人比较喜欢用Telegram Bot的即时通知。根据pushoo.js中Telegram部分的教程，拼接Bot的api_token+#+用户的chat_id填入面板上的PUSHOO_TOKEN：

配置完成后，可以在自己的评论区测试一下，看看效果。