目录

博客添加Artalk评论系统

转用Hugo已经一周了,其他的都还习惯,唯一不习惯的是静态博客自身没有评论系统,很难与网友交流,我觉得一个博客,内容是肉体,评论是灵魂!

看了Hugo官方推荐的评论系统,起初相中的是IssoRemark42,主要考虑的是可以自托管,数据还是在自己手上比较放心。

Isso基于python,语言上相对熟悉些;Remark42基于go,部署起来方便些,就像Hugo一样。但这两个都有共同的缺点,那就是都有点简陋。

无意间遇到了Artalk,也可以自托管,基于go,而且还是国人开发的,语言上没障碍。更难得的是样式、功能基本满足我的需求,虽然目前在Github上的Star还不是很多,但我还是决定来支持一下。

前端部署

以下内容均基于LoveIt主题

  1. 准备静态文件。下载Artalk需要的CSS和JS文件,如Artalk.cssArtalk.js,放置到网站根目录下的assets/lib/artalk/文件夹中。如后续直接引入CDN 资源,则可忽略这一步。

  2. themes\LoveIt\layouts\partials路径下的comment.html文件,复制一份到网站根目录下对应的文件夹中,最终路径为layouts\partials\comment.html。(不建议直接改动主题文件,避免后续主题升级影响)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
	├── archetypes
	├── assets
	│   └── lib
	│       └── artalk
	│           └── Artalk.css
	│           └── Artalk.js 
	├── config.toml
	├── content
	├── data                
	├── layouts
	│   └── partials
	│       └── comment.html
	├── static
	└── themes
		└── LoveIt
  1. 修改复制的comment.html文件,在<div id="comments"></div>中添加
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{- /* Artalk Comment System */ -}}
{{- $artalk := $comment.artalk | default dict -}}
{{- if $artalk.enable -}}
	{{ $artalkCSS := resource.Get "/lib/artalk/Artalk.css" }}
	{{ $artalkJS := resource.Get "/lib/artalk/Artalk.js" }}
	<link href="{{ $artalkCSS.RelPermalink }}" rel="stylesheet">
	<script src="{{ $artalkJS.RelPermalink }}"></script>
	<div id="artalk"></div>
	<script>
	new Artalk({
		el:        '#artalk',               // 绑定元素
		pageKey:   '{{ .RelPermalink }}',   // 固定链接 (相对路径)
		pageTitle: '{{ .Title }}',          // 页面标题
		server:    '{{ $artalk.server }}',  // 后端地址
		site:      '{{ $artalk.site }}',    // 站点名
	})
	</script>
{{- end -}}

如直接引入CDN 资源,则将

1
2
3
4
{{ $artalkCSS := resource.Get "/lib/artalk/Artalk.css" }}
{{ $artalkJS := resource.Get "/lib/artalk/Artalk.js" }}
<link href="{{ $artalkCSS.RelPermalink }}" rel="stylesheet">
<script src="{{ $artalkJS.RelPermalink }}"></script>

替换为:

1
2
<link href="https://unpkg.com/artalk@2.3.4/dist/Artalk.css" rel="stylesheet">
<script src="https://unpkg.com/artalk@2.3.4/dist/Artalk.js"></script>
  1. 修改配置文件,在[params.page.comment]评论系统设置下增加Artalk的配置参数
1
2
3
4
5
6
[params.page.comment.artalk]
	enable = true
	# 配置后端地址
	server = "https://artalk.域名.com"
	# 配置站点名
	site = "NoteSth"

后端部署

以宝塔面板为例:

官方推荐使用Docker或者Docker Compose,但我这小主机,还是不要装那些吧。我选择官方说的普通方式 + 守护进程来部署后端。

  1. 进入网站菜单,点击添加站点,输入域名artalk.域名.com需先在DNS服务商处添加该二级域名的解析),其他的默认,直接提交
    1. 选择刚添加的站点,点击设置,进入设置界面
    2. SSL节点,给域名添加证书,并开启强制HTTPS
    3. 反向代理节点,点击添加反向代理,输入代理名称目标URL输入http://localhost:8080发送域名输入$host,保存

/posts/blog-add-artalk-comment-system/20220731-1.png
添加反向代理

  1. 进入文件菜单,进入/www/wwwroot/,新建文件夹artalk
    1. 进入artalk文件夹,使用远程下载功能,下载Github上最新版的后端程序ArtalkGo
    2. 解压出的文件保留artalk-goartalk-go.yml,其他的连同上一步下载的压缩包都可以删了
  2. 配置artalk-go.yml,这一步主要参照官方的说明
    1. 因为前面做反向代理的是8080端口,配置文件中的port就改成8080
    2. 前端部署时配置文件中的site要与后端配置文件中的site_default保持一致
  3. 后端运行,守护进程。
    1. 进入软件商店菜单,安装堡塔应用管理器
    2. 打开堡塔应用管理器,添加应用,输入应用名称,应用环境选Null,启动文件选择/www/wwwroot/artalk/artalk-go,执行目录选择/www/wwwroot/artalk/,启动参数输入server,点击添加
    3. 点击状态下的启动

/posts/blog-add-artalk-comment-system/20220731-2.png
堡塔应用管理器

Artalk官方文档对新手来说不是很友好,网上关于Artalk部署的文章也比较少,折腾了好久,踩了许多的坑,差点都准备放弃了,结果一下子又好了。好事多磨!

将自己折腾的经历记录一下备忘,也提供给有需要的朋友参考。