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的方式,配置如下:
评论通知配置

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