hexo的next接入artalk评论系统

发表于

之前的评论系统由于无法做到评论通知，以及评论数据无法自行管理，本来想自己写一个的，写到一半发现ui和数据逻辑还是有点多，需要花不少时间，经过调研发现artalk这个评论系统可以满足我的需求，所以接入了artalk评论系统，这个可以自行使用docker部署，收到用户评论后可以通过webhook来通知，这个很好，基本满足我的需求，还有很多其他功能，有需要的可以进行配置。

相关环境变量说明

相关环境变量说明见artalk 文档，这里注意有个ATK_TRUSTED_DOMAINS，要加上本地调试域名http://localhost:4000，否则会出现跨域问题。我是采用docker部署的，所以需要在docker-compose.yml文件中添加环境变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
version: '3.8'
services:
  artalk:
    container_name: artalk
    image: artalk/artalk-go
    restart: unless-stopped
    ports:
      - 8086:23366
    volumes:
      - ./data:/data
    environment:
      - TZ=Asia/Shanghai
      - ATK_LOCALE=zh-CN
      - ATK_SITE_DEFAULT=东风草堂博客
      - ATK_SITE_URL=https://www.nephen.cn
      - ATK_TRUSTED_DOMAINS=https://www.nephen.cn https://nephen.cn http://localhost:4000

执行命令创建管理员账户：

1
docker exec -it artalk artalk admin

浏览器输入后台地址，比如 http://localhost:8086 进入 Artalk 后台登录界面。

前端页面

在next主题配置里面开启custom_file_path下的post-body-end.njk，这个文件在source/_data目录下创建，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- CSS -->
<link href="http://artalk.example.com:8080/dist/Artalk.css" rel="stylesheet" />

<!-- JS -->
<script src="http://artalk.example.com:8080/dist/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>
<script>
Artalk.init({
  el:        '#Comments',                       // 绑定元素的 Selector
  pageKey:   '/post/1',                         // 固定链接
  pageTitle: '关于引入 Artalk 的这档子事',         // 页面标题 (留空自动获取)
  server:    'http://localhost:8086',           // 后端地址
  site:      'Artalk 的博客',                    // 你的站点名
})
</script>

评论通知

在artalk后台的设置-多元通知-Webhook中配置，我是采用webhook的方式，配置如下：
评论通知配置

这个需要自己有一个接收通知的后台，由于我自己有可以微信通知的服务，之前文章里也介绍过，所以直接接入就好了，最后通知的效果是这样的：
评论通知效果