本篇博客将教您如何在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错误（添加了镜像源）后续在镜像后面加上最新的版本号才正常拉取了镜像

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文档后，用下面的命令运行

1
docker-compose up -d

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

image-20230105210149526

2.2 开放管理员账户

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

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

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~

未完待续

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