dsh
c841fa2047
Astro 的 ClientRouter 切页时会清掉 head 里它不认识的 <style>，而 twikoo
的 CSS 正是 twikoo.min.js 运行时 appendChild 到 head 的；脚本本身又只执行
一次（window.twikoo 已存在就跳过），样式不会重新注入。
表现：从一篇带评论的文章点链接进另一篇后，评论区样式整段丢失 ——
markdown 图标被 .twikoo svg{width:100%;height:100%} 撑成 768x1240px、
文件输入框 .tk-input-image 从 display:none 变回可见、.OwO-items 从 flex
塌成 block 竖排成一列；整页刷新后恢复。
修复：把官方 twikoo.css 放进 public/assets/css/（与现有 twikoo.min.js 同为
1.7.20，已核对两个文件都来自同一个 npm 包、md5 一致），在 Comments.astro
里用静态 <link> 引入，排在 twikoo-custom.css 之前。静态 link 在 <body> 里，
切页时会随新页面一起换进来，不再依赖运行时注入。
没有换用官方 twikoo.nocss.js：它是 all 完整版去掉 CSS（997 KB），比
twikoo.min.js（506 KB，CSS 打包在内）大近一倍，而本站服务器没开 gzip，
换过去等于访客多下 491 KB。
验证（headless Chrome 131，禁用缓存，对本地 dist 实测）：
- 直接打开文章页：icon 18.75px / fileInput none / .tk-submit 179px
- 文章 -> 文章切页：修复前 768px / inline-block / 2919px；
修复后与直接打开逐像素一致（diff bbox = None，差异像素 0.0000%）
- 连续切页 3 次、切页后展开 OwO 表情面板，均正常
30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
/**
|
||
* 评论系统配置。
|
||
*
|
||
* 使用 twikoo（https://twikoo.js.org），后端为自托管实例。
|
||
*
|
||
* 前端脚本不走 CDN，而是自托管的 public/assets/js/twikoo.min.js —— 国内访问
|
||
* jsDelivr 很不稳定，走 CDN 会导致评论区加载不出来。该文件版本与后端保持一致
|
||
* （当前都是 1.7.20），升级后端时记得同步替换它。
|
||
*
|
||
* 样式分两层：public/assets/css/twikoo.css（官方原样，从同一个 npm 版本取）
|
||
* + public/assets/css/twikoo-custom.css（主题适配层）。
|
||
* 两个都用静态 <link> 引入，不要改成只靠脚本运行时注入，
|
||
* 原因见 src/components/Comments.astro 里的注释。
|
||
*/
|
||
export const commentConfig = {
|
||
/** twikoo 后端地址（部署 twikoo 的那个域名）。留空则整个评论区不渲染。 */
|
||
twikooEnvId: "https://twikoo.tianxuetao.top",
|
||
|
||
/** 评论界面语言 */
|
||
lang: "zh-CN",
|
||
|
||
/**
|
||
* 评论归属路径是否去掉结尾斜杠。
|
||
* 本站 trailingSlash 为 "always"，但评论 key 统一存成不带斜杠的
|
||
* `/posts/xxx` 形式，与后端里的历史数据保持一致 —— 改掉这条，
|
||
* 老评论就会对不上。
|
||
*/
|
||
stripTrailingSlash: true,
|
||
} as const
|