距离上次更新本文已经过去了 694 天，文章部分内容可能已经过时，请注意甄别

本篇博客将教您如何在 wiki js 站点上使用 artalk 评论系统

[TOC]

1. 介绍

1.1 wiki js

https://github.com/requarks/wiki/

wiki js 是一个开源的 wiki 站点，可以在线编辑页面。

页面以 markdown 编辑，同时支持富文本格式；因为其用 git 来管理提交历史，且在线编辑不需要用户知道如何操作 git，所以非常适合多人协作撰写文档

如果你只是想要一个博客站点，没有多人协作需求，那么 hexo 会更合适您

共享文档（如金山文档）的提交历史大多数都不够详细，虽然有插入/删除历史，但是其没有标明上下文，你需要猜他是在文档的啥地方改了东西，非常不方便！

git 是一个版本管理软件，能清楚地知道 xx 用户修改了 xx 文档的 xx 行，并能看到修改之前和修改之后的提交对比。这部分就不赘述了

wiki js 还有很棒的一点就是，你可以设置一个 git 仓库作为文档的备份，其会定时把整个站点的所有页面（包括图片）都上传到这个 git 仓库里面。即便站点因为某些原因出问题了，我们还有 git 仓库的备份😁

wiki js 的安装参考官方文档，建议用 docker 部署，方便的很，直接对着敲命令就行了。进入系统创建管理员账户后，可以在设置的 local 里面找到语言选择，下载中文语言包即可改成中文页面！

image-20230105212313327

Wik js 自带了评论系统，也支持 markdown 评论，但是它连最基础的回复评论都不支持，实在是有些捉急，所以才需要配置一下 artalk 来作为评论系统

1.2 artalk

https://artalk.js.org/

artalk 同样是一个开源的评论系统，作者写 v1 的时候还是一名高中生（人比人气死人，我太菜了）

咳咳，这不是重点！

image-20230105203330089

artalk 支持 markdown 发送评论，支持发送表情，还支持上传图片！作为 wikijs 的评论系统再合适不过了～

emm，其实还有另外一个原因，那就是 wiki js 目前支持的 3 个第三方评论系统，似乎只有 artalk 是免费的😥

2. 安装 artalk 后端

2.1 docker-compose 安装

基本安装方式参考官方文档，个人更加推荐用 docker compose 部署

https://artalk.js.org/guide/deploy.html#docker-compose-%E9%83%A8%E7%BD%B2

刚开始我拉取镜像的时候，一直出现 505 错误（添加了镜像源）后续在镜像后面加上最新的版本号才正常拉取了镜像

plaintext
1
2
3
4
5
6
7
8
9
version: "3.5"
services:
  artalk:
    container_name: artalk-go
    image: artalk/artalk-go:2.3.0
    ports:
      - 8080:23366
    volumes:
      - ./data:/data

创建好 docker-compose.yaml 文档后，用下面的命令运行

plaintext
1
docker-compose up -d

查看你服务器的 8080 端口（记得在云服务器防火墙里面开放端口）如果能打开下面的后端页面，那就是 ok 了

image-20230105210149526

2.2 开放管理员账户

默认情况下，管理员账户是关闭的，我们需要关闭容器后，修改配置文件开放一个管理员账户

plaintext
1
docker-compose stop

cd 进入 data 目录（这里的 data 目录是你在 docker compose 中映射的本地路径，默认应该就在 docker-compose.yaml 所在路径下会出现一个 data 文件夹）

可以看到一个 artalk-go.yml 文件，我们需要修改的就是这个文件，找到下面的字段，对应修改后保存

关于密码的部分参考文档 https://artalk.js.org/guide/backend/multi-site.html#%E7%AE%A1%E7%90%86%E5%91%98%E9%85%8D%E7%BD%AE

image-20230105210458212

plaintext
1
docker-compose up -d

重新启动容器，用刚刚设置好的账户登录；后台的管理页面可以修改很多配置，我们不需要动配置文件了！

2.3 配置 ssl

wiki js 必须要用 ssl 和 https 才能正常使用 artalk，我尝试了公网IP:端口的方式，它认不出来😥

所以我们需要在 artalk 的后台配置一下 ssl（记得点界面右下角的应用）

image-20230105211239276

再次用域名打开页面，此时就没有报错了

image-20230105211301712

备注：我是用 frp 穿透到香港来映射域名的，所以 ssl 还需要在 frp 里面设置一下，请根据您自己的情况配置 ssl！

2.4 图片上传

如果想让用户能上传图片，还需要做一些小操作；首先是启用图片上传（记得点界面右下角的应用）

image-20230105212545842

然后需要去后台在 data 目录下创建一个 artalk-img 文件夹（我刚开始没有创建这个文件夹的时候，没有办法正确上传图片）

回到 wiki js 的界面测试一下，图片上传成功

image-20230105212828221

2.5 邮箱提醒

避免有老哥之前没有用过 stmp 服务，这里也简单说一下吧

可以注册一个网易的 163 或者 126 邮箱，找到设置里面会有一个 stmp

image-20230105212944073

进入后，先把这两个服务都开启

image-20230105213005732

再点击这里新增授权密码，会弹出来一个二维码码让你用手机给一个号码发个短信，然后就会出现一个授权码，记住这个授权码

image-20230105213026563

回到 artalk 的后台进行如下配置

image-20230105213203770

这样就 OK 了，找朋友发条评论并回复，测试一下邮箱提醒能否正常使用吧！

3.wiki js 使用

这部分就很傻瓜了，直接用起来就可以了

3.1 artalk 创建站点

artalk 虽然会有一个默认站点，但是那个 wiki js 不一定能正常使用，所以我们需要自己创建一个站点

image-20230105211659399

需要填写站点名称和 url，名称建议用英文，避免编码问题

image-20230105211712137

然后为了避免错误，还可以在设置里面添加一下可信域名

image-20230105212012530

3.2 wiki js 使用

进入 wiki js 的管理页，找到评论，选择 artalk

image-20230105212237982

填入域名和在 artalk 里面配置的站点名字后，点击应用

回到 wikijs 的页面，此时就可以看到 artalk 的界面啦！

image-20230105212437682

3.3 bug

我使用的时候遇到了评论框飞到顶栏上面的 bug，已经在 wiki 的仓库中发评论了

Snipaste_2023-01-05_19-45-21

https://github.com/requarks/wiki/discussions/6015

希望能尽快修复这个 bug~

未完待续

后续有啥问题，我会在这里补充的～