修复评论区切页后排版崩坏: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:
+13
-2
@@ -221,7 +221,7 @@ sudo sysctl fs.inotify.max_user_watches=524288
|
||||
|
||||
1. `src/data/comments.ts` 里的 `twikooEnvId` 是否填了(留空则整个评论区不渲染)
|
||||
2. 打开浏览器控制台,看有没有 `[twikoo] 初始化失败` 或 404
|
||||
3. 确认 `public/assets/js/twikoo.min.js` 存在,且版本与后端一致
|
||||
3. 确认 `public/assets/js/twikoo.min.js` 和 `public/assets/css/twikoo.css` 都在,且版本与后端一致
|
||||
4. 直接测后端:
|
||||
|
||||
```bash
|
||||
@@ -231,11 +231,22 @@ sudo sysctl fs.inotify.max_user_watches=524288
|
||||
```
|
||||
|
||||
正常会返回 `{"code":0,"version":{"VERSION":"1.7.20"}}`。若版本和前端脚本不一致,去
|
||||
<https://cdn.jsdelivr.net/npm/twikoo@<后端版本>/dist/twikoo.min.js> 下载同名文件替换。
|
||||
<https://cdn.jsdelivr.net/npm/twikoo@<后端版本>/dist/> 下载 `twikoo.min.js` 和 `twikoo.css` 两个文件一起替换。
|
||||
|
||||
> 评论按**页面路径**归属,且存的是浏览器提交的**百分号编码**路径。
|
||||
> 换域名或改 URL 结构后,老评论会因为路径对不上而「消失」——数据还在后端,只是不再匹配。
|
||||
|
||||
**评论区排版错乱(按钮变得巨大、表情面板塌成一列、「选择文件」露出来)**
|
||||
|
||||
症状是**点链接切到另一篇文章后才崩,按 F5 刷新就正常**。
|
||||
|
||||
原因:twikoo 脚本只执行一次,第二次进文章页时不会重新执行;而 `ClientRouter` 切页时会清掉
|
||||
它运行时注入到 `<head>` 的 `<style>`,样式就没了。
|
||||
|
||||
修复早已内置:`Comments.astro` 里用静态 `<link>` 引入 `public/assets/css/twikoo.css`(放在
|
||||
`twikoo-custom.css` 之前)。如果又出现这个症状,先确认这两行 `<link>` 还在,
|
||||
并且 `public/assets/css/twikoo.css` 没被误删。
|
||||
|
||||
**想回退到之前的状态**
|
||||
|
||||
```bash
|
||||
|
||||
Reference in New Issue
Block a user