评论区改为自托管 twikoo 前端,并适配主题
- 前端脚本从 jsDelivr 改为自托管 public/assets/js/twikoo.min.js, 版本与后端对齐(1.7.20)。国内访问 jsDelivr 实测 3 秒以上且常被墙, 是评论区空白的根因 - 新增 public/assets/css/twikoo-custom.css 主题适配层:选择器加 #twikoo 前缀以覆盖运行时注入的样式,颜色引用主题变量,自动跟随亮/暗色 - 修复首屏重复初始化:astro:page-load 在首屏也会触发,用 dataset.mounted 去重 - 评论配置移除已无用的 version 字段;README 与操作指南同步更新
This commit is contained in:
@@ -215,17 +215,22 @@ epigraph: 题记 # 可选
|
||||
export const commentConfig = {
|
||||
twikooEnvId: "https://twikoo.tianxuetao.top",
|
||||
lang: "zh-CN",
|
||||
version: "1.7.4",
|
||||
stripTrailingSlash: true,
|
||||
}
|
||||
```
|
||||
|
||||
`twikooEnvId` 留空则整个评论区不渲染;也可以用环境变量 `PUBLIC_TWIKOO_ENV_ID` 覆盖,优先级更高。
|
||||
|
||||
前端实现在 `src/components/Comments.astro`,从 jsDelivr 加载 twikoo 脚本,另外处理了两件事:
|
||||
**前端脚本不走 CDN**,而是自托管的 `public/assets/js/twikoo.min.js`。国内访问 jsDelivr 很不稳定(实测 3 秒以上,且常被墙),走 CDN 会让评论区长时间空白甚至加载不出来。该文件的版本要与后端保持一致(当前都是 **1.7.20**,可用 `GET_FUNC_VERSION` 查后端版本),升级后端时记得同步替换它。
|
||||
|
||||
- **切页重新挂载**:本站启用了 Astro 的 `ClientRouter`,组件监听 `astro:page-load` 事件重新初始化。
|
||||
- **评论归属路径**:`trailingSlash` 是 `"always"`,但评论 key 统一去掉结尾斜杠、存成 `/posts/xxx`,与该路径在旧站点上的历史数据保持一致。改掉这条规则,已有评论会对不上。
|
||||
主题适配样式在 `public/assets/css/twikoo-custom.css`。twikoo 的样式是运行时注入 `<head>` 的、会排在后面,所以那里的选择器统一加了 `#twikoo` 前缀来提高优先级,颜色引用主题变量因而自动跟随亮/暗色。
|
||||
|
||||
前端逻辑在 `src/components/Comments.astro`,处理了两件事:
|
||||
|
||||
- **切页重新挂载**:本站启用了 Astro 的 `ClientRouter`。注意 `astro:page-load` 在**首屏也会触发**,所以用 `dataset.mounted` 标记防止重复初始化;切页后是新容器、没有该标记,会正常重新挂载。
|
||||
- **评论归属路径**:`trailingSlash` 是 `"always"`,但评论 key 统一去掉结尾斜杠。浏览器提交的是**百分号编码**过的 `location.pathname`(如 `/posts/%E7%94%9F%E6%B4%BB/...`),后端按原样存储和匹配 —— 所以去斜杠后的编码路径正好与历史数据一致。改掉这条规则,老评论就会对不上。
|
||||
|
||||
评论出现在:文章页、关于页、友链页。
|
||||
|
||||
主题原作者的自托管评论后端 `cwd-api/` 已随迁移移除。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user