为什么选 Artalk
Artalk 是前后端分离的轻量评论系统：后端一个服务负责存数据，前端一个脚本负责渲染。比第三方托管干净、比从零自建省事，数据还握在自己手里。本站「蓝色的海角」用的就是这套。
整体方案
- 后端：独立部署的 Artalk 服务端（Go 二进制或 Docker 都行），数据落 SQLite / MySQL / PostgreSQL。
- 前端：一个评论组件，从 CDN 拉 Artalk v2 的 JS/CSS，调
Artalk.init(...)渲染到指定容器。
本站后端地址 https://artalk.likeit.dev，站点名 蓝色的海角。
后端配置
后端（artalk-server）关键配置：
# artalk 配置（节选）
host: 0.0.0.0
port: 8080
db:
type: sqlite # 或 mysql / postgres
file: /data/artalk.db
site_name: 蓝色的海角 # 必须和前端 site 完全一致
admin_users:
- name: admin
password: xxxxxx之后用 nginx 把 / 反代到 127.0.0.1:8080，再套一层 TLS 即可。
前端接入
1. 站点配置
在 src/config.ts 里加一段：
artalk: {
enabled: true, // 是否启用评论
server: "https://artalk.likeit.dev", // 后端地址
site: "蓝色的海角", // 站点名，必须与后端 site_name 一致
},2. 评论组件
src/components/Comments.astro 负责渲染：
- 由
SITE.artalk.enabled控制是否显示「评论」区块； - 从
https://cdn.jsdelivr.net/npm/artalk@2/...动态加载 JS/CSS； - 加载完成后调
Artalk.init：
window.Artalk.init({
el: "#artalk-comments",
server: artalk.server,
site: artalk.site || location.hostname,
pageKey: pageKey, // 默认 Astro.url.pathname，每篇日记独立
pageTitle: pageTitle, // 默认站点标题
darkMode: isDark(), // 跟随站点明暗
});3. 在日记页挂载
日记正文模板里引入组件即可，不需要每篇单独配置。
几个关键坑
- site 名称必须和后端一致：前后端的
site/site_name对不上，评论会写到别的站点或拉不到。本站两端都是「蓝色的海角」。 - pageKey 要唯一且稳定：默认用路径
Astro.url.pathname，所以 slug 一旦发布就别乱改，否则老评论会失联。 - 明暗主题同步：用
MutationObserver监听documentElement的data-theme变化，调atk.setDarkMode(...)，否则切主题时评论区不跟着变。 - 开关留好：
SITE.artalk.enabled可以一键关评论，迁移或维护时很方便。
小结
前后端分离的好处是：换前端框架不影响评论数据，一个后端还能给多个站点共用。本站这套接法跑了一阵子，稳定。
评论