修复评论区切页后排版崩坏:twikoo 基础样式改为静态引入

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 表情面板,均正常
This commit is contained in:
dsh
2026-09-15 08:39:41 +08:00
parent 4810c87d30
commit c841fa2047
5 changed files with 1173 additions and 5 deletions
+13 -1
View File
@@ -223,7 +223,19 @@ export const commentConfig = {
**前端脚本不走 CDN**,而是自托管的 `public/assets/js/twikoo.min.js`。国内访问 jsDelivr 很不稳定(实测 3 秒以上,且常被墙),走 CDN 会让评论区长时间空白甚至加载不出来。该文件的版本要与后端保持一致(当前都是 **1.7.20**,可用 `GET_FUNC_VERSION` 查后端版本),升级后端时记得同步替换它。
主题适配样式在 `public/assets/css/twikoo-custom.css`。twikoo 的样式是运行时注入 `<head>` 的、会排在后面,所以那里的选择器统一加了 `#twikoo` 前缀来提高优先级,颜色引用主题变量因而自动跟随亮/暗色。
样式分两层,**两个文件必须放在 `src/components/Comments.astro` 的静态 `<link>` 里**:
| 文件 | 作用 |
|---|---|
| `public/assets/css/twikoo.css` | 官方原样,从 npm 的 `twikoo@<版本>/dist/twikoo.css` 取,**不要手改** |
| `public/assets/css/twikoo-custom.css` | 主题适配层,颜色引用主题变量,自动跟随亮/暗色 |
`twikoo.css` 必须是**静态 `<link>`**,不能只靠 `twikoo.min.js` 运行时注入。脚本会把样式 `appendChild` 到 `<head>`,而 `ClientRouter` 切页时会清掉 head 里它不认识的 `<style>`;脚本本身又只执行一次(`window.twikoo` 已存在就跳过),样式不会重新注入。症状是从一篇带评论的文章点进另一篇后,评论区排版全崩——markdown 图标被撑成几百像素、文件输入框露出来、表情面板塌成一列,**整页刷新才恢复**。静态 `<link>` 放在 `<body>` 里,切页时会随新页面一起换进来,因此不受影响。
`twikoo-custom.css` 的选择器统一加了 `#twikoo` 前缀,保证压过官方样式。
> 升级 twikoo 时,`twikoo.min.js` 和 `twikoo.css` 要**一起换**,都从同一个 npm 版本的 `dist/` 里取。
> 顺带一提:官方 `twikoo.nocss.js` 是 all 完整版去掉 CSS(997 KB),比 `twikoo.min.js`(506 KB,CSS 打包在内)大近一倍,本站服务器又没开 gzip,所以没有采用它。
前端逻辑在 `src/components/Comments.astro`,处理了两件事: