为你的curve主题添加基于Artalk的评论功能
前言
WARNING
在这篇文章之前,首先你需要有一个服务器
另外,请把这篇文章中的所有example.com全部换成你的
接续上一篇文章,现在要为你的curve主题添加评论功能了,我使用的是Artalk来进行部署.
服务端部署
建构新域名(comment.example.com)
我使用的是从cloudflare上面购买的域名,并将此子域名指向服务器,这里以cloudflare的操作方法为例
在Cloudflare添加DNS记录:
Cloudflare控制台->选择example.com->DNS->Add Record
方案A:DNS only
添加一条：
- Type: A
- Name: comment
- IPv4 address: 你的服务器公网 IP
- Proxy status: DNS only（灰云）
- TTL: Auto
（可选）如果你有 IPv6，再加：
- Type: AAAA
- Name:
comment - IPv6 address: 你的 IPv6
- Proxy: DNS only
方案B:Proxied
同样添加 A 记录，但把 Proxy status 设为 Proxied（橙云）。
两个方案都能用；橙云通常更安全（隐藏源站 IP、抗 DDoS、WAF），但源站 HTTPS 配置要更规范（推荐 Full strict）。
程序部署
这是Artalk的官方文档,这里是程序部署教程
我首先使用docker部署没有成功,所以进行了二进制文件进行部署,官方文档里面也有,我解压到的是/opt/artalk
验证:
/opt/artalk/bin/artalk --versionNOTE
接下来的这些东西在Artalk官方文档上也提到过,这里只是使用我的方式进行部署的一些经验
编写配置(SQLite+本机监听)
创建数据目录：
sudo mkdir -p /opt/artalk/data编辑配置文件：
sudo nano /opt/artalk/artalk.yml配置文件这么写(把exmaple.com换成你的):
host: 127.0.0.1
port: 23366
# 外部访问地址（非常关键）
public_url: "https://comment.example.com"
# SQLite 数据库文件
db:
type: sqlite
file: "/opt/artalk/data/artalk.sqlite"
# 管理员账户（用于后台登录/初始化）
admin_users:
- name: "admin"
email: "[email protected]"
# 允许你的博客站点跨域调用
cors:
enabled: true
allow_origins:
- "https://rinyuki.com"
- "https://www.rinyuki.com"保存退出后，先手动跑一下看配置是否被接受（能直接看到报错）：
sudo /opt/artalk/bin/artalk server --config /opt/artalk/artalk.yml如果看到类似 “listening on 127.0.0.1:23366” 就说明 OK；然后 Ctrl+C 退出，进入 systemd 托管。
创建Systemd服务(开机自启)
创建服务文件：
sudo nano /etc/systemd/system/artalk.service写入：
[Unit]
Description=Artalk Comment Server
After=network-online.target
Wants=network-online.target
[Service]
Type=simple
WorkingDirectory=/opt/artalk
ExecStart=/opt/artalk/bin/artalk server --config /opt/artalk/artalk.yml
Restart=on-failure
RestartSec=3
# 安全加固（可选但推荐）
NoNewPrivileges=true
PrivateTmp=true
[Install]
WantedBy=multi-user.target启动并设为开机启动：
sudo systemctl daemon-reload
sudo systemctl enable --now artalk
sudo systemctl status artalk --no-pager -l看日志：
sudo journalctl -u artalk -n 200 --no-pager本机探活（只要不是 refused 就行）：
curl -I http://127.0.0.1:23366/配置 Nginx 反代到 comment.example.com
创建站点文件：
sudo nano /etc/nginx/sites-available/comment.example.com内容：
server {
listen 80;
server_name comment.example.com;
location / {
proxy_pass http://127.0.0.1:23366;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Connection "";
}
}启用并 reload：
sudo ln -s /etc/nginx/sites-available/comment.example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx测试：
curl -I http://comment.example.com上 HTTPS
安装：
sudo apt install -y certbot python3-certbot-nginx签发并自动改 Nginx：
sudo certbot --nginx -d comment.example.com测试：
curl -I https://comment.example.com如果一切正常,那么后端就可以收尾了.
前端部署
这个curve主题已经自带了评论主题,只需要按照这个进行修改即可.
打开项目的根目录,找到.vitepress\theme\assets\themeConfig.mjs,在其中找到:
comment: {
enable: true,
// 评论系统选择
// artalk / twikoo
type: "artalk",
// artalk
// https://artalk.js.org/
artalk: {
site: "example.com",
server: "https://comment.example.com",
},
}enable：改为trueserver：Artalk 服务端 API 地址（https://comment.example.com）site：站点标识字符串（建议用域名example.com）
引入Artalk:
pnpm add -D artalk在.vitepress\theme\components\Plugins\Comments目录下,更改Artalk.vue:
把 Artalk.vue 里这两行：
import initComments from "@/utils/initComments";(把这个替换掉)const Artalk = await initComments(theme.value);(删掉这个)
替换为 npm 引入：
import Artalk from "artalk";import "artalk/dist/Artalk.css";
更改成类似于这样的:
<script setup>
import { jumpRedirect } from "@/utils/commonTools";
import Artalk from "artalk";
import "artalk/dist/Artalk.css";
const route = useRoute();
const props = defineProps({ fill: { type: [Boolean, String], default: false } });
const { theme } = useData();
const { comment } = theme.value;
const artalk = ref(null);
const commentRef = ref(null);
const initArtalk = async () => {
try {
await nextTick();
artalk.value = Artalk.init({
el: commentRef.value || "#comment-dom",
locale: "auto",
pageKey: route.path,
site: comment.artalk.site,
server: comment.artalk.server,
});
// 原来的事件和 watch 保持不变...
return artalk.value;
} catch (error) {
console.error("初始化评论出错：", error);
}
};
</script>这样应该就能正常显示评论功能了.