相对原版改了什么

看板娘

用的是 https://github.com/stevenjoezhang/live2d-widget（npm 包名是复数 live2d-widgets）。它自 1.0 起不再需要后端 API，模型清单写在 source/live2d/waifu-tips.json 的 models 字段里，我指到 /asset/live2d/umaru/model.json。渲染核心是仓库自带的 dist/live2d.min.js，即 Live2D Cubism 2 Web SDK，所以 umaru 这种 .moc 老模型可以直接用。模型本身来自 https://github.com/HesperusVenus/live2d，那是个仓库根没有 LICENSE 的个人合集，用的是 pio 那套 live2d_model.json 字段（hit_areas、expressions、sound），widget 一样能读；这个授权缺口记在模型目录的 SOURCE.txt 里。

想换模型：往 themes/mustom/source/asset/live2d/ 放一个新模型目录，再在 waifu-tips.json 的 models 里加一条，paths 指向它的 model json；loader.js 的 tools 数组控制右下角按钮（hitokoto 一言、photo 拍照、info 介绍、quit 关闭）。

它说 " 晚安 " 是看谁的表

widget 里跟时间有关的取值只有一处：new Date() 拿 getHours()，去 waifu-tips.json 的 time 数组里找 hour 区间命中的那条。整个 bundle 里没有 timeZone、没有 Asia/Shanghai、也没有 28800 这类写死的偏移量，loader.js 里同样没传时区参数，所以用的就是访客操作系统给浏览器的本地时间，不存在 " 默认东八区 " 这一说；seasons（节日文案）用的也是本地的 getMonth()+1 和 getDate()，同一个道理。

要区分两件事：取值是访客的 ， 分档是国内作息写的。time 现在是 6-7 早上好、8-11 上午好、12-13 午餐、14-17 犯困、18-19 傍晚、20-21 晚上好、22-23 晚安＋爱护眼睛、0-5 夜猫子。一个纽约的访客在当地时间 22 点同样会收到 " 早点休息吧，晚安～"，这在语义上没错（他那边的确是夜里），要不要照着访客的白天黑夜重写这套措辞是另一回事，跟时区无关。

时段问候现在每个页面都出。原来那段取文案的代码外面套了 "/" === location.pathname，只有首页根路径给时段问候、文章页只给 " 欢迎阅读「页面标题」"，这个判断已经拆掉：根路径仍是只出时段问候（和以前一样），非根路径出 " 时段问候 + 欢迎 " 两行，跨站来的再加一行来源问候，顺序是问候在上、标题在下。改动落在 source/live2d/dist/waifu-tips.js 那个 vendor bundle 里：改动前的原文备份在 _tmp/waifu-tips.orig.js，打补丁的是 _tmp/waifu_patch.mjs（做完替换会自查标记串在不在，重跑无害），同一个 bundle 另外导出了 window.waifuShowTip 供 loader.js 复用，其余逻辑没动。

整点报时

loader.js 在 initWidget() 之后自己再拉一遍 waifu-tips.json，每 30 秒比较 new Date().getHours() 和上一次开口的小时数，换了小时就调 waifuShowTip(报时文案 + 该时段的问候, 6000, 11)。报时文案是 waifu-tips.json 里新增的 message.hourly 数组（现在 {hour} 点了， / 到点啦，{hour} 点了，，{hour} 由 loader 替换成数字，不写进 vendor 文件），拼在该小时命中的那条时段问候前面。

两个刻意的写法：

• 用 30 秒轮询而不是 setTimeout 到下一个整点。后台标签页的定时器会被浏览器节流（throttling，浏览器为了省电把后台页面的定时器最低降到每分钟一次甚至更狠），一个长 timeout 在切走的标签页里可能大幅晚点，短轮询被节流到 60 秒也不影响 " 这一小时内报过一次 "。
• 气泡节点 #waifu-tips 不存在时直接跳过、且不更新记账的小时数。访客点过 quit 按钮（写 localStorage['waifu-disabled']）后看板娘不再出现，报时也不能把它复活；而 " 气泡比 loader 晚出现 " 的情况（首次挂载慢）留到下一个 tick 照样能报。

优先级用 11，和首屏那条时段问候同级，所以报时会顶掉 idle／一言那类 9 级的碎话。sessionStorage['waifu-message-priority'] 是 widget 自己的优先级账本，同值可以互相覆盖。

手机端：看板娘缩一半、挪到右下角、横向不再撑破、列表 500 字

source/live2d/site.css（我们自己的覆盖表，在 dist/waifu.css 之后加载）加了 @media (max-width: 1023px) 一段：canvas 从 300×300 改成 150×150，气泡宽度 250→180、字号 14→13、min-height 70→44，#waifu 的上移量 translateY 25px→12px。改 CSS 尺寸不影响模型渲染：canvas 的绘制缓冲是 bundle 里写死的 <canvas id="live2d" width="800" height="800">（800×800），CSS 只决定它在屏幕上占多大，所以缩小是等比降采样、不会糊也不会错位；widget 里唯一读鼠标坐标的是拖拽（offsetX/offsetY 和 clientX 做差算位移，和 canvas 内部分辨率无关），点击摸头那套逻辑这个 bundle 里根本没有（tools 只有一言／拍照／介绍／关闭）。顺带在同一断点把 #waifu-tool 的 opacity 设成 1——原样式靠 #waifu:hover 显形，触屏没有 hover，手机访客原本永远点不到那四个按钮，包括 quit。

看板娘的位置也改了：dist/waifu.css 里 #waifu 是 position: fixed; left: 0，桌面靠 site.css 的 @media (min-width: 1024px) 覆盖成 left: auto; right: 76px；手机这条覆盖从来没有对应的一段，所以手机一直停在 左下角。现在 ≤1023px 补上 left: auto; right: 0，跟着把 #waifu-tool 从 left: -8px 翻到 right: -8px（tool 仍在看板娘左侧，只是不再贴着屏幕左边）。

气泡要多加一条 right: 0。#waifu-tips 是 position: absolute 挂在 #waifu 里，原样式只给 margin 不给 left/right，靠静态位置定位——看板娘在左下角时它向右溢出 30px 没人注意，挪到右下角后同样的静态位置就会把 180px 宽的气泡推出屏幕右沿。钉 right: 0 让它贴住看板娘的右边缘（也就是视口右边缘）向左展开。

实测（1000×700 视口、UA 钉成 iPhone）：#waifu 的 rect 从 left: 835 → right: 985，#waifu-tips 的右沿也是 985、documentElement.scrollWidth 985 等于视口宽，没有溢出；改之前 #waifu 是 left: 0。

移动端 390×844 实测到的撑破来自代码块：_plugin/highlight.styl 的 $code-block 写了 margin block-gap article-padding * -1（article-padding = $gap * 6 = 40px，即左右各负 40px 让深色块出血铺满），.markdown-body pre 和 .highlight 都继承它。父级 .p-post 是 overflow-x: hidden，所以负 margin 的净效果不是 " 铺满 " 而是整块比视口宽 40px、右侧被裁掉，读者看不见也滚不到——body{overflow-x:hidden} 加 viewport 的 user-scalable=no 把这 40px 藏起来了。修法是 ≤1023px 把 margin-left/right 归零、左右内边距从 40px 收到 8px、.highlight pre 改 white-space: pre-wrap、.gutter（行号列）隐藏、表格 width: 100%。文字侧则是 _common/layout.styl 里 .markdown-body table{word-break: keep-all}（“不在词内断行”，中文表格不断词是为了不难看）只在 ≥1024px 保留，≤1023px 给 code/a/td/th/p/li/h1–h6 一律 overflow-wrap: anywhere（长 URL、长英文单词这种没有断点的串允许硬断）。

实测：.p-post／.p-timeline 的 scrollWidth 从 413 降到 373（clientWidth 373，视口 390，documentElement.scrollWidth 373），figure.highlight 那些 right: 413／right: 495 的条目全部消失；桌面 1366 宽下 scrollWidth 1349、看板娘仍是 300×300、right: 76px，负 margin 出血只在移动端取消，桌面观感不变。剩下唯一的越界元素是通知气泡 .p-notification-message（position: absolute 藏在屏幕右边缘外，靠 transform 滑入，不撑文档宽度），与本次改动无关。

列表摘要在构建期截断：themes/mustom/scripts/plugin/hexo-generator-restful/lib/generator.js 新加 preview(str, limit)，把 post.excerpt || post.content 剥成纯文本（去标签→解数字实体和命名实体→空白压成单空格），超过 excerpt_chars 就切片再加 ......，最后重新转义 & < >。之所以不能对 HTML 串直接切片：切在标签中间会留下不闭合的 <，浏览器一解析就把后面整段吞掉。两个列表调用点（postMap 给 /api/posts.json、postlist 给分类／标签页）都换成它；单篇正文那条（api/posts/<id>.json 的 excerpt，仍是 filterHTMLTags(post.excerpt)）没动，文章页不会被砍。阈值是 _config.yml 里的 excerpt_chars: 500。

一个必须知道的连带效果：列表数据只有一份，excerpt 字段桌面和手机共用，所以 500 字截断在桌面列表页同样生效（以前桌面列表对没有 <!-- more --> 的文章会把全文塞进摘要，实测有一篇 6922 字符）。要只截手机就得改成运行时按视口截，现在没做。

实测：/api/posts.json 三条摘要 517／396／512 字符（含转义膨胀），首页渲染出的文本 innerText 去空白后 418／325／444，末条尾巴是 ......；/archives/ 同一篇也是 418。

实测记录（本地起 public/，headless Firefox 走 WebDriver BiDi，也就是 WebDriver 标准的双向协议、Firefox 通过 --remote-debugging-port 暴露的那套；脚本 _tmp/live2d_tz.mjs、_tmp/live2d_mock.mjs、_tmp/live2d_nav.mjs、_tmp/waifu_chime.mjs；改 bundle 用 _tmp/waifu_patch.mjs，页面尺寸与溢出扫描用 _tmp/mob.mjs，它按参数决定视口和要走的页面）：

• 先读浏览器自己的表：Intl.DateTimeFormat().resolvedOptions().timeZone 是 Asia/Taipei，getTimezoneOffset() 是 -480，getHours() 是 22，按 JSON 命中的正是 22-23 那条晚安。也就是说这台机器上看到的 " 晚安 " 是本地 22 点的正常结果，不是被纠偏出来的。

• 想换个时区反证：Windows 上的 Firefox 不读 TZ 环境变量，带着 TZ=America/New_York 启起来仍然是 Asia/Taipei。要动时区只有改系统时区（不能碰）或者改 getHours() 本身。

• 于是用 BiDi 的 script.addPreloadScript（在每个新 document 创建之前就注入的钩子，global: true 对之后所有导航生效）把 Date.prototype.getHours 钉成定值，其余一概让 widget 自己跑：钉到 9 点，气泡出 " 上午好！工作顺利嘛，不要久坐……“；钉到 3 点，出 " 你是夜猫子呀？这么晚还不睡觉”；同一个 9 点，机器实际时间是 22 点多。选择完全由访客本地小时数决定，代码里没有任何往东八区纠偏的分支。

• 仍然钉 9 点，在页面里 location.href 跳到 /posts/2659281223/：气泡先空几秒，随后出 " 欢迎阅读「建站流程 - takomitkm」"，没有时段问候——那是改动前的记录，当时 "/" === location.pathname 那个根路径判断还在。放开之后重测（_tmp/waifu_chime.mjs，同一个 preload 钉 getHours，跑起来第 12 秒再把钉住的小时数从 10 改成 11）：钉 10 点、路径 /posts/2659281223/，气泡是 " 上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"＋换行＋" 欢迎阅读「建站流程 - takomitkm」" 两行；钉 10 点、路径 /，只有第一行，和以前一致。

• 整点报时同一次跑里验到：12.7 秒把小时数从 10 改成 11，21 秒后（下一个 30 秒轮询 tick）气泡变成 " 现在 11 点了，上午好！工作顺利嘛，不要久坐，多起来走动走动哦！“；首页 / 上是同一句，只是后面不接欢迎行。中间穿插的 " 嗨～快来逗我玩吧！”" 拿小拳拳锤你胸口！" 是 9 级的 idle 碎话，被 11 级的报时顶掉，符合 widget 自己的优先级规则。

• 顺手记一条测试方法：这类 " 改了 Date.prototype 再验 " 的注入，必须等 document 换过来之后才装得上，直接 navigate 完立刻 evaluate 有概率装到旧 document 上、看着像没生效。另外 BiDi 的 browsingContext.navigate 在这个 Firefox 构建里对带路径的 URL（/posts/xxx/）回 invalid argument，改成页面内 location.href 赋值即可绕过，跟站点无关。

列表页的分隔符，和关于页那枚红色 " 偷 "

分隔符的字符串写在 _common/dimension.styl 的 $divider：✟⫘⫘⫘⫘⫘⫘⫘⫘✟，两头是 U+271F 粗希腊十字，中间八个 U+2AD8 双匕首运算符。以后要换符号只改这一行，两个消费点自动跟上；中间这八个是默认值，运行时 main.js 会按行宽把它重算成任意个数，见下面 " 分隔符的 ⫘ 个数按行宽算 "。

首页那条走 _part/recentposts.styl，给 .p-recentpost:not(:first-child)::before，display: table-caption; caption-side: top。用 caption 而不是普通伪元素块，是因为 .p-recentpost 本身就是 display: table，往表里塞一个 display: block 的子盒子会被浏览器套进匿名 table-row/table-cell 里、排版不可控，而 table-caption 是规范允许直接挂在 table 上的盒子，位置由 caption-side 说了算（默认就是 top，写出来是为了以后想挪 bottom 一眼找得到）。这些条目之间原本已经有一条 border-top: 1px solid var(--color-clear)，现在是 " 细线 + 分隔符 " 两层；只想要一层的，删掉那条 border 就行。

归档／分类／标签走 _part/timeline.styl，给 .p-timeline-row::after，display: block; clear: both——这一行左边是 float: left 的日期列，不 clear 分隔符就会浮到日期旁边去。这里多一层结构：.p-timeline-item 是按年分组的容器，一年里的每篇是一个 .p-timeline-row，所以 " 整列表最后一篇不画 " 要写成 .p-timeline-item:last-child .p-timeline-row:last-child::after{content:none}。跨年那一篇照旧有分隔符：桌面那里下面本来就压着年份大标题，移动端 .p-timeline-head{display:none} 把年份收掉了，不留分隔符两篇会直接粘连。

两边的颜色都是 color: var(--color-text); opacity: .45。先用的是主题自带的 " 文章结尾 " 色 var(--color-post-ending)，实测发现它在默认和 gray 皮肤里是 #dddddd，压在白底上基本看不见，只有 colorful 那套是 #009999，于是改成前景色加固定透明度，四套皮肤自己适配。

字形覆盖（这台机器上）：✟ 和 ⫘ 都是真字形，不是豆腐块。判据是拿必定无字形的私有区码点 \uE000 做参照，比较 canvas 上的涂墨像素和前进宽度——✟ 384 墨／28.4 宽，⫘ 369 墨／51.1 宽，参照 \uE000 是 310 墨／38.9 宽，三个宽度互不相等、墨数也各不相同（对照正值：偷 648 墨／40 宽，+ 135 墨／21.3 宽）。站点字体栈 "Huiwen-mincho","Source Han Sans CN",Arial,Helvetica,sans-serif 本身不含这两个符号，实际由系统符号字体兜底（Windows 上一般是 Segoe UI Symbol）。 这只核到本机：macOS／iOS／Android 的 fallback 各不相同，可能有访客看到方框，真出现就把 $divider 换成图片，或者给这两处单独指定 font-family。

关于页那枚章：source/about/index.md 正文末尾一段页内 <style> 加一个空的 <div class="about-stamp">。用页内 <style> 是沿用 /live/ 那页已有的做法——页面正文是运行时从 /api/pages/about.json 取回来、由 js/part/page.js 用 innerHTML 注入的，<style> 注进 body 一样生效（只有 <script> 需要那页里那段手动搬运重跑），好处是这个节点只存在于关于页，不用给主题的 page.styl 塞一条只服务一页的选择器。

• 图是一个内联 SVG（data:image/svg+xml，<、>、#、空格全部百分号编码，汉字 " 偷 " 写成 %E5%81%B7）：viewBox='0 0 100 100'，外圈是 circle cx=50 cy=50 r=46 stroke=#ff3300 stroke-width=3 fill=none，字用 text 加 text-anchor='middle' 和 dominant-baseline='central' 钉在圆心，font-size=60。
• 尺寸挂在 div 上：width: 50%; aspect-ratio: 1/1; background: ... right top/100% 100%。SVG 的 viewBox 是正方形，圈和字一起等比缩放，所以圆的直径恒等于文章宽度的一半，与视口宽窄无关。这也是为什么用背景图而不是 " 字符 + CSS border-radius: 50% 圆圈 " 两件事拼：CSS 的 font-size 没法写成容器宽度的百分比，字就不跟着宽度走。
• position: absolute; z-index: -1 要配 .p-page{position: relative; z-index: 0}。负 z-index 的后代画在 " 形成层叠上下文那个元素自己的背景之上、正常内容之下 "，所以章压在正文后面、面板底色前面；父级只给 position: relative 而 z-index: auto 是不构成层叠上下文的，那时负 z-index 会穿到面板底色底下去，什么都看不见。
• "70% 透明 " 写成 opacity: .3，是对整个 div（圈加字）生效，不是给颜色带 alpha；pointer-events: none 保证不挡正文选字。

实测（本地起 public/，headless Firefox 走 BiDi，脚本 _tmp/divider.mjs，它顺带做字形覆盖检测和越界元素扫描）：桌面 1366×900 下面板 613×1341，章 307×307（50.1%），距面板右沿 24px、顶 40px（正好在 32px 高的 PAGE 标题条下面），bottom - panelBottom = -994，也就是圆的下沿离面板底还差 994px，没被 overflow: hidden 切掉；手机 390×844 下面板 373 宽、章 187×187、仍是 50.1%。分隔符确实占了版面：首页第二个 .p-recentpost 的标题距该条目顶边 63px（没有分隔符时就是 32px 内边距），.p-timeline-row 的底比它内容列的底多出 30px。移动端两个列表页 scrollWidth 373 等于 clientWidth，没有新增横向溢出；桌面 1349，越界的仍然只有 .p-notification-message（通知气泡常驻屏幕右沿外，与本次无关）。截图这个构建依旧拿不到（browsingContext.captureScreenshot 恒回 invalid argument），上面全是计算样式和几何量，最终观感得在线上自己看。

分隔符的 ⫘ 个数按行宽算

CSS 的 content 是个静态串，自己不会按行宽增减，所以把串交给 JS：fitDividers() 算出该铺几个 ⫘，写成 .m-content 的行内自定义属性 --divider。自定义属性沿 DOM 继承，所以列表行自己的 ::before/::after 都拿得到，而样式里仍留一份静态兜底：_common/dimension.styl 加 $divider_value = var(--divider, $divider)，两个消费点的 content 都换成这个变量。JS 没跑、跑不出宽度（比如访客禁脚本）就退回样式里那 8 个。

• 变量写法只能是 var(--divider, $divider)。写成 convert('var(--divider,' + $divider + ')') 编译出来是 content: var(--divider, ✟⫘…✟)，字符串参数的引号被 convert 吞了，fallback 不合法、整条声明失效，页面上一个分隔符都不剩。Stylus 的函数调用形式会原样保留参数里的引号。
• 两边的 content 都补了 white-space: nowrap。个数变多以后不让它在行中间断行，断一次就上下两排符号，比原来的静态串难看。
• 可用宽度 room = 父盒子的 clientWidth − 父左右 padding − 行自身左右 margin 和 padding。不能拿行自己的宽度当可用宽度：.p-recentpost 是 display: table，分隔符是它的 table-caption，caption 的宽度会参与表格的 shrink-to-fit 计算，用 row 的宽度反推就成了 " 加的越多行越宽、行越宽就越能加 " 的自激循环。
• 量文本用一次性离屏 span，把伪元素那份 computed 的 font-family/size/weight/style/letter-spacing 全抄过来再量。分隔符带 letter-spacing: .15em，不抄这一项量出来偏窄，算出的个数会多一两个、直接溢出。
• 取哪一个行来量是个坑：.m-content 里常驻一份没填内容的 .p-recentpost 模板（它父容器 clientWidth 是 0，算出来 room 是 −64），而第一条 .p-recentpost 命中不了 :not(:first-child)，从它身上读 ::before 拿到的是没套样式的默认值（16px、letter-spacing normal）。所以遍历 .p-recentpost:not(:first-child), .p-timeline-row，取第一个 room > 0 的行；一个都取不到就原样不动。
• 个数：n = floor(room / 单个⫘宽) − 2（两头各减一个 ✟ 的位），再两头各微调一次到不能再多、不能再少。写之前和现值比一次，一样就不写，否则 " 写属性→宽度没变→observer 再触发 " 会来回刷。
• 监听挂在 .m-content 上的 ResizeObserver，不是 window.resize：pjax 换页时 .m-content 这个壳不重建、只换 innerHTML，抽屉和侧栏改变正文列宽度时也不会触发 window.resize。调用点在 final_load() 的完成块里，紧跟 biliplayer.ready()。

实测（本地 public/ + headless Firefox BiDi，脚本 _tmp/roundE.mjs）：桌面 1366×900 首页 room 549、铺到 27 个 ⫘、文本实测 548、余量 1px，单个 ⫘ 含字距 19px；手机 375×780 首页 room 342、16 个、余 8px，归档页 room 358、17 个、余 5px；两端 document.documentElement.scrollWidth 358 等于视口宽，没有新增横向溢出。

正文标题序号为什么全是 0.x

症状：目录一侧的号是对的（1、2、2.1），正文里每个标题前面的号却是 0.1、0.0.1。

原因是原来那套编号整个写在 CSS 里。_part/post.styl 用一个 headingContent($num) 把 h2 的 content 拼成 counter(h1) "." counter(h2) ". "、h3 拼成 counter(h1) "." counter(h2) "." counter(h3) ". "，再靠 h{$num}{counter-reset: h(num+1)} 逐级归零，.markdown-body{counter-reset: h1} 起头。而正文里从来没有 <h1>（Markdown 的 ## 起头，页面标题另有 .p-post-title），counter(h1) 就永远是 0，每一位前面都多了个 0。

但把 h1 那一位去掉也只是看起来对：CSS 计数器只能按标签层级累加，没法按 " 这篇文档自己的第一层 " 归一化。目录走的是 scripts/plugin/toc.js，它里面有个 firstLevel——第一个遇到的标题是 h2，就把 h2 当第一层，编号从 1 起，下一级写成 2.1。这个 firstLevel 是解析整篇之后才知道的值，CSS 拿不到，所以正文和目录是两套编号，怎么调样式都会在某些文章上错。

改法是编号搬到构建期，且只复用目录那一套逻辑：新增 themes/mustom/scripts/plugin/heading-numbers.js，先调 hexo-util 的 tocObj(html, {min_depth, max_depth}) 拿到和目录 完全同一条 标题序列（同一个解析器、同一份层级定义），用 toc.js 里同款的 lastNumber[] + firstLevel 推进算出每条的串，再按文档顺序用正则 <h([1-6])(?=[\s>]) 逐个贴 data-num="2.1"。tocObj 和这个正则都按文档顺序遍历 h1–h6，所以两者一一对照。

• 落点在 hexo-generator-restful/lib/generator.js 里单篇那条：var numbered = headingNumbers(post.content)，content 和 toc 都改用 numbered。之所以改 JSON 就够，是因为正文和目录只存在于 /api/posts/<abbrlink>.json（主题配置 posts_props.content: false，layout/post.ejs 里的 page.content 只用来拼 meta description），静态 HTML 里没有可编号的正文标题。一个文件里同生，不可能再各算各的。
• 自保护：贴标签的次数和目录条数不相等就 console.warn 并把原始 HTML 原样返回。宁可整篇没号，也不要号错。
• 样式端 h{$num}[data-num]:before{content: attr(data-num) ". "}——选择器带 [data-num]，退回未编号时不会留下只有 ". " 的空号。原来给 .markdown-body 的 counter-reset: h1 一起删了。

实测：《建站流程》这篇 37 个标题全部带号、0 个漏，正文前五个是 1、2、2.1、2.2、2.3，同一页 .toc-number 前五个是 1.、2.、2.1.、2.2.、2.3.（目录多带一个尾点，去掉尾点后逐字相同）。

关于页那三处算出来的东西

她留的三条括号说明换成了运行时计算，全在 source/about/index.md 正文末尾那段页内 <script> 里（这脚本靠 js/part/page.js 那段 " 把 innerHTML 里的 <script> 节点重建再 append" 才会执行，上一轮记过）。

• 🐣 <span id="abBorn">：new Date() 取访客设备本地时间，setFullYear(y − 17)，输出 2009 年 10 月 3 日。取的是访客本地表，和看板娘时段问候同一口径，别改时区。
• 身高：<span id="abHeight">cm：160 + now.getHours()。
• 两条装饰线（‧*˚̩͙*‧₊̊… 和 °. ☪︎* 。.:* ・° ✰…）：纹样存在元素的 data-fill 属性里，JS 用离屏探针量出纹样一组的宽度 unit，按段落所在列的 clientWidth 平铺 repeat(ceil(room/unit) + 1) 组，CSS .about-rule{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden} 负责 " 铺满之后正好截断 "。
  • 纹样 不能 直接写在正文里：* 成对出现会被 Markdown 当成强调，构建出来的 JSON 里变成 ‧<em>˚̩͙</em>…，星号消失、还白送一个斜体。属性值不走 Markdown 解析，所以只能待在 data-fill="…" 里（实测构建产物 data-fill 内 <em> 出现 0 次）。
  • 探针的字体从元素自己的 computed 样式抄，否则纹样里那些组合音标字符（˚̩͙、₊̊）宽度差得多。
  • 重算靠 ResizeObserver 挂在这两条所在段落的父节点上，ResizeObserver 不可用才退回 window.addEventListener('resize')。

实测：1366 下两条纹样盒宽 517、正好等于所在列宽 517，scrollWidth 1072 / 997（超出部分被 overflow:hidden 切掉，这就是 " 按需截断 "）；375 下盒宽 342、scrollWidth 1072 / 748。#abBorn 和 #abHeight 与浏览器自己算的期望值一致（跑探针那轮：2009 年 10 月 3 日、167＝160+7）。

slogan 换成 16 字长句之后

brand.slogan 现在是道德经那句（中文 16 字）和西语那句（35 字符），两头各一个引号。.p-brand 的内容宽只有 256px（$drawer_width − $gap*8），而 16px 下中文那句单行要 300px、西语那句 251px；.p-brand 带 overflow: hidden、.p-brand-slogan 原来带 white-space: nowrap，中文那句会被裁掉最后两三个字，西语那句只剩 5px 余量，换个字体就一起裁。抽屉里那份更窄：0.7em（11.2px）下可用宽只有 175px（.p-brand-detail{padding-left: 5em} 再叠 padding-left: 1.75em），两句都要 200px 出头。

改法是去掉 .p-brand-slogan 的 white-space: nowrap 放行内换行，line-height: 3 没动。没有选缩字号：桌面 .p-brand-name 是 1.5em，slogan 再往小缩就没法读；也没有做 JS 自适应字数：换行是 CSS 能白拿的，多出来的那点高度在可以滚动的侧栏里无害。

实测（同上面的 roundE.mjs，探针里直接把两种语言的串都塞进去量）：1366 可用宽 256，西语 1 行不裁、中文 2 行不裁；375 抽屉可用宽 175，西语 2 行、中文 2 行，scrollWidth 都等于 clientWidth，即 realClip: false。夜间／彩色皮肤只换颜色，版式不受影响。

侧栏：slogan 改四行、B 站进联系方式

上一节那个 " 靠内联换行自动折 " 的版本被推翻了：中文 slogan 现在按四行断——

1
2
3
4

至虛極也 
 守情裻也 
 萬物旁作 
 吾以觀其復也

断行的方式是在 zh-cn.yml 的 brand.slogan 值里直接写 <br>。这不用改模板也不用改 lang.js：lang.js 对 [data-lang] 的写法是一条优先级链——带 data-lang-titled 的写 title 属性、带 data-lang-placeholdered 的写 placeholder，其余才走 innerHTML = '<span>' + text + '</span>'。slogan 那个节点走的是 innerHTML 那支，所以值里的 HTML 标签会被当标签处理（上一轮的 " 能解成真引号是同一件事的另一面）；联系方式那两个 <a> 带 data-lang-titled，走的是 title 那支，所以文案只会进鼠标提示，不会把里面的图标覆盖掉。代价是 innerHTML 这支不转义，所以 lang/*.yml 里的文案只能来自构建期源，不能掺任何访客可控的文本——本站不存在这种掺法。

英文那句 y emprendo mi andar a una ruta real 保持单行，不断句，但两头那对引号去掉了（值里不再有 "）。

行高必须一起改，不然卡片会顶爆侧栏

.p-brand-slogan 原来 line-height: 3。那是单行时代的留白做法——不是排版需求，是给一行字上下撑出呼吸空间。四行之后它变成 4×48=192px，实测把整张 .p-brand 从 438 顶到 515。改成 line-height: 1.6 再加 padding: $gap 0（上下各 8px）把原来那点留白补回来：单行仍占 25.6px，四行是 4×25.6+16=118px，和实测的 118 对得上。抽屉里那份同步从 line-height: 3.35 改 1.6。

桌面侧栏原来是不许滚的定高栏，这是这一轮真正的坑

.m-drawer 在 ≥1024px 是 position: fixed + 高度 calc(100vh - 3em - $progress_height) + overflow: hidden，也就是一个高度锁死、且明令不滚动的栏。卡片一高，排在它后面的 .p-skin（实测 904–1003）和 .p-settings（1035–1275）就整体落到 847px 的栏外。注意这不是 " 要往下滚一点才能看到 "，而是 没有任何滚动入口，永远点不到——换肤和设置两个按钮直接消失。所以给它加了 overflow-y: auto（横向仍 hidden，不破坏原来的截断行为）。实测加完之后 clientHeight 847 / scrollHeight 1254，把 scrollTop 写成 300 能读回 300。

判断这类问题不能只比 getBoundingClientRect().top 和视口高，得看这个祖先的 overflow 是什么、scrollHeight 是否大于 clientHeight，再把 scrollTop 真写一遍读回来。

B 站按钮：走主题现成的 contact 机制，不新写模板

主题里有 contact: {<key>: {url, icon} }，渲染成 <a href target="_blank" data-lang="brand.<key>" data-lang-titled>icon</a>。GitHub 那条就是这么来的，所以 B 站只需要在 _config.yml 加一个 bilibili 键、在两份 lang 里加 brand.bilibili 标题，模板一行不用碰，将来加第三个联系方式同理。

图标用目标网页自带的。仓库里 bundled 的 Font Awesome 5.12 没有 bilibili 品牌图标（grep -c bilibili 在它的 css 里是 0），fab 那一套里指不出一个真图标，所以取 B 站自己的 https://www.bilibili.com/favicon.ico。空间页 head 里的 apple-touch-icon 也指向同一个图案，所以这就是站点自己的标识。另外下过它的 512×512 apple-touch 磁贴（粉渐变加 "WEB" 缎带那版），和侧栏另外两个单色小图标放一起很跳，看过之后删掉了。

这个 ico 是原文件，一字节没改（4286 字节，md5 f2d2896c488493e18c1b112cdd9bb1d9）。中间一版我把它转成了 PNG（477 字节）再放进来，那是多余的一步：<img> 能直接解码 ICO（实测 headless Firefox 里 naturalWidth=32、complete=true），转码没有换来任何好处——逐像素比过，ico 和那张 PNG 一模一样（1024 个像素里 444 个不透明，颜色全是同一个 #00A1D6，亮度 131／255），ICO 里也只有一帧 32×32／32bpp，不存在 " 多尺寸可选 " 的差别。

上面这段 " 把原文件存一份进仓库 " 的做法在同一天就被推翻了：现在两条联系方式的图标都 直接外链目标站点自己的 favicon，仓库里不留副本。理由不是我认为热链有什么先验优势，而是 " 必须把每一份第三方资源都搬进仓库 " 这条口径本身不要了——图标只是一个指向外部站点的装饰，跟着那个链接走才说得通。推翻之后重做的部分（GitHub 图标、夜间可见性、Service Worker 下的表现、离线后果）在下一节。

<img> 图标顺带避开一个换肤问题：skin.js 的 colorIcons 只挑 i.fas / .fab / .far 去轮转颜色，图片不在选择器里，所以 colorful 皮肤下它自动保持原色，不需要像 GitHub 那样专门写排除项。它自带的这个蓝色（亮度 131／255）在四套皮肤上都看得见，既不会在夜间底色上糊成一片，也不会在白底上变浅——它是自带颜色的图案，不吃 color。

两个图标要真正在同一行，得写死盒子的宽高。这里踩了两个坑，第一个是自己造的：新声明插进原有 a 块后，下面那条 display: inline-block 又赋值了一次，把 inline-flex 覆盖掉，B 站图标偏 5px；合并成一条声明后解决。第二个是 CSS 的规则本身：inline-flex 是 inline-level 盒子，默认按 基线 对齐，而字体图标的基线是字形基线、图片是替换元素、基线取底边；两个盒子又没有显式高度，一个被内容撑到 20px、一个 24px，于是中心差 4px（实测 GitHub 盒 481–501、B 站盒 475–499）。这看起来就是 " 两个图标不在同一行 "。改成 width: 2em; height: 2em; vertical-align: middle，两个盒子都成了同一行的 40×40，各自的图标再靠 align-items: center 居中，中心差归 0。hover 的那块圆角底色也因此两个都是 40×40，不再一个大一个小。

图标一律外链目标站点自带的，GitHub 那条也一起换了

_config.yml 里两条联系方式的 <img src> 现在是 https://github.com/favicon.ico 和 https://www.bilibili.com/favicon.ico。显示尺寸只在 .p-brand-contact-img 里写 1.2em，由浏览器运行时缩放，不再预先转码或裁成固定像素；仓库里那份 bilibili.ico 删了。

换成图片之后有个副作用必须处理：GitHub 原来是 <i class="fab fa-github">，吃 color: var(--color-text)，四套皮肤下自动就是 " 当前文字色 "；图片没有这回事，而 GitHub 自己的 favicon 是 近黑的——32×32 那帧里不透明像素全是同一个 #171515（简单亮度 21／255）。夜间皮肤那块底色实测 rgba(0,0,0,0.8)，直接摆上去看不见。这个不是推测：:root.night 下不加工时，图标那 48×48 个设备像素里与背景差得开（ΔL>0.02）的有 0 个，对比度 1.15∶1。主题本来那条 :root.night img{filter: brightness(0.8)}（layout.styl）对近黑图案只会更黑。于是单独加 :root.night .p-brand-contact-dark{filter: invert(1)}——invert 只改 RGB 不动 alpha，实心近黑翻成接近白，实测对比度 17.39∶1、差得开的像素 1157／2304（对照组是同一次探针里用 !important 把这条规则关掉）。B 站是自带颜色的图案，不进这条规则，当时它夜间实测 4.73∶1（brightness(0.8) 压完的结果），比 GitHub 弱——这一串数字是 2026-10-03 重算过的，第一次跑的时候相对亮度公式的系数写错了，见 " 夜间模式不再压暗任何外链图片 " 一节末尾的更正；同一条全局规则在下一节里被改成了豁免外链。

外链的两条后果，都实测过：

• 跨站取这两个文件不需要源站配合：带 Referer: https://takomitkm.github.io/ 和 Origin 头，直连与 7897 代理都是 200 image/x-icon，字节数 6518（GitHub）和 4286（B 站），且同一路径两种走法字节一致；B 站那份与刚删掉的仓库文件 md5 相同（f2d2896c488493e18c1b112cdd9bb1d9）——没有防盗链。
• 这两个外链现在进 PWA 缓存了。先更正 ：上一版这里写的是 "sw-toolbox 的 cache 里 favicon.ico 一条也没有，所以它们走网络 "，那是当时路由表里没有能命中它们的条目所致，不是 Service Worker 存不了跨站资源——这轮给 _config.yml 加了缓存路由之后重测，同一个 profile 连开 10 次，每次快照里 favicon.ico 都是 2 条（https://github.com/favicon.ico、https://www.bilibili.com/favicon.ico），github.com 这个 host 下 2 条（favicon + 头像 takomitkm.png?size=256），www.bilibili.com 1 条。 这里还要再更正一次我自己的归因 ：上一段写成 " 命中它们的是兜底的按扩展名那条，因为名单里带 ico"，那条路由在 2026-10-04 的重新分类里已经整体删掉了，favicon 的 2 条实测在换表之后仍然成立（_tmp/roundY.mjs）。真正接住这两个外链的是第一条路由——它的 pattern 是 \/favicon\.ico(\?.*)?$， 结尾锚定、开头不锚域名，所以任何站点的 /favicon.ico 都落进来，站内那个和两个外链都是；把它排在 bilibili\.com 那条 networkOnly 前面，外链图标才不会被后者按域名抢走。策略是 fastest，所以每次开页仍会发一次网络检查更新，离线可见性因此变成 " 缓存优先 "，不再只靠浏览器自己的 HTTP 缓存。

两条不顺手但留下的记录：skin.js:61 的 exclude: 'i.fa-github'（防止 GitHub 图标被 colorful 换肤轮转颜色）从此选不到任何节点，因为全站 <i class="fab fa-github"> 只有这一处——这轮把它连同 colorIcons.run 里那句 if (i.matches(that.exclude)) return; 一起删了，留着是一段永远不会成立的判断。另外 ICO 是多帧容器，GitHub 那个有 16×16 和 32×32 两帧，<img> 实测拿到的是 32 那帧，而 dpr 2 的手机上 24 CSS px 要 48 设备像素，是放大出来的，边缘比字体图标糊——源站只给到 32，这是外链路线本身的代价。

关于页那行空间链接删了

source/about/index.md 里「B 站空间：https://space.bilibili.com/675978454」整行去掉，入口换成侧栏这个按钮，和 GitHub 那条同级同机制。链接本身现在只在 _config.yml 的 contact.bilibili.url 一处。

实测

探针（_tmp/roundG.mjs 量 slogan 和卡片，_tmp/roundH.mjs 专量联系方式那一行；两个都会把中英文两种 slogan 分别塞进卡片量，因为 headless Firefox 的界面语言是 en-US，线上默认读到的是英文那条）：

• 1366：中文四行行宽 64／64／64／96，可用宽 256，clip: false，.p-brand 高 515（西语单行时 438）；
• 375 抽屉：四行行宽 45／45／45／67，字号 11.2px、行高 17.93px，clip: false，卡片高 233（西语 197）；
• 联系方式那一行（修基线之前）：GitHub 盒 y 481 h 20、B 站盒 y 475 h 24，中心差 4px；修完之后两个盒都是 y 474 h 40，图标分别是 25×20 和 24×24（原图 32×32 缩到 1.2em），各自中心差 0；.ico 在 <img> 里 complete=true、naturalWidth=32；375／dpr2 下同样两个盒都是 y 148 h 40；
• 桌面抽屉 overflow-y: auto 生效，scrollMove: 300。

换成外链之后重跑（_tmp/roundH.mjs 量布局，_tmp/roundI.mjs 截 :root.night 的图按 WCAG 相对亮度逐像素算对比度，_tmp/roundJ.mjs 连开两次验 Service Worker 接管下的加载与缓存）：

• 1366／dpr1 与 375／dpr2 两档，两个联系方式都是 icon=img、24×24、盒内中心差 0、imgOk=true、natural=32x32；盒子仍是同一行的 40×40（y 474 h 40 和 y 148 h 40），行没有因为换图标而错位；
• :root.night 下 GitHub 计算样式 filter: invert(1)，最亮 5% 像素相对亮度 L=0.819、对底色 17.39∶1；把这条规则用 !important 关掉作对照，同一位置 L=0.008、1.15∶1、可分辨像素 0 个；B 站当时夜间是 brightness(0.8)（主题那条全局规则），L=0.186、4.73∶1；这三个数是重算值，第一次那版系数写错了（见 " 夜间模式不再压暗任何外链图片 " 一节末尾）；
• SW 接管的那一次加载里，两个外链 <img> 依然 complete=true，而 sw-toolbox 的 cache 中只有 takomitkm.png?size=256，没有任何 favicon.ico。

数行数有个坑：Range.getClientRects() 会被 <br> 切成多段，四行返回 8 个 rect，所以不能数 rect 个数，要按 top 去重或者用 height / lineHeight 反推。

字体：改回逐字回退，侧栏另指定一款

上一轮立的规矩是 " 整页只停在一档，缺一个字整页换档 "（js/part/fonttier.js + :root.font-tier-N + --body-font）。这轮把整套删了，回到 CSS Fonts 默认的 逐字回退 （per-character fallback：font-family 写一列候选，浏览器对每个字符取第一个覆盖它码位的字体，一款缺某个字时只有那个字落到别款）。删的理由不是嫌麻烦，是这条规矩在本站 满足不了 ：slogan 里的 裻 U+88FB、列表分隔符里的 ⫘ U+2AD8 和 ✟ U+271F，四款外链字体声明的 unicode-range 里一个都没有（下表逐款核过）。" 只要有一个字没有就整页降档 " 因此每趟都一路降到末档，全站永远用不上汇文——判法没写错，是这个站点的字集不让它成立。

现在的链就两条：

1
2

body, .markdown-body { font-family: 'Huiwen-mincho', 'STDongGuanTi Bld', 'Noto Sans SC', Arial, Helvetica, sans-serif }
.m-drawer { font-family: 'Source Han Serif CN VF', 'Huiwen-mincho', 'STDongGuanTi Bld', 'Noto Sans SC', Arial, Helvetica, sans-serif }

Stylus 侧只剩 dimension.styl 里 $font_body / $font_drawer 两个变量；layout.styl 的 :root 四条 --body-font、frame.ejs 里读 localStorage['mustom-fonttier'] 的那段同步内联脚本、main.js 的 fonttier.watch() 一起删净，js/part/fonttier.js 移出仓库（归档在 _tmp/fonttier.v3.archived.js，不再进构建）。链尾的 Arial, Helvetica, sans-serif 本站不注册任何东西，sans-serif 是 CSS 的通用族关键字，等于 " 这台设备说了算 "。

侧栏另起一款是因为 裻：它不在汇文、上图、思源黑任何一款的码位表里，逐字回退会一路掉到访客系统字体，那一块 slogan 的字面就和整站不是一套。挑法是把托管方 https://cn-font.claude-code-best.win/index.json（26,510 字节，80 个包的目录）里 CJK 覆盖宽的几个逐个拉 result.css、解析每条 @font-face 的 unicode-range，拿本站文字去撞：

选思源宋体：字面是宋体，和正文的汇文明朝体同一路（另两款一个手写体、一个楷意，压在侧栏会和正文打架）；托管方和汇文／上图同一个域，那条 preconnect 已经在了；代价是它比小赖少 5 个生僻字，而那 5 个都不在侧栏、都在正文，正文本来就走整条链。侧栏的下载量实测是首页 8 片、167,556 字节；单片最贵的是 裻 那片 a653112064520a45104a506d465aee7c.woff2，63,724 字节、font/woff2。

判 " 这款字体有没有这个字 " 用的是静态 unicode-range 分析：@font-face 里声明的码位段就是这道字体能被浏览器选中的唯一范围，不在段里的码位浏览器根本不会问它——这是 CSS Fonts 的规范行为，不依赖网络、不依赖浏览器实测，结论确定。

换档机制作废前的那版实测，一并留着

js/part/fonttier.js 写到 v3 时跑过的三场景，作为这套判法为什么不可用的证据留下，机制本身已经不在线上。这三段和上面那节 " 作废前的那版实测 " 是 她 2026-10-04 明确要留的（原话：本项目的代码全保留，留着整页换档的证据），以后别当冗余清掉；_tmp/fonttier.v3.archived.js 那份归档同样不动。三场景如下：

• 整页换档在本站点不住末档 ： 裻 在侧栏，侧栏每页都渲染，所以 " 整页 " 口径下每一页都判不出比末档更好的档。
• v2 的 faceCount() 只数 status === 'loaded' 的切片，外链样式表还没解析完就说 " 这一档没有 "，于是 7 ms 内降到 Arial、/archives/ 上 5 ms，判定实际上在跟 CDN 延迟赛跑；v3 改成先看 @font-face 注没注册（unloaded 也算注册）、再给 8 秒 window.load 等待，跑通了，但跑通的也只是 " 慢 "，前面那条 " 本站点不住 " 没变。
• v2 还把结论写进 localStorage，判到末档之后 if (tier.family) 直接跳过无 family 的档，下次开页短路所有检查，永久锁在 Arial。v3 改成只持久化有把握的判定＋按路径记档，但这套复杂度本身就是该删的东西。

四份外链 CSS 的实测事实

托管方那三份 CSS 自带两层保险：每条 @font-face 的 src 都以 local("<family>") 开头，访客本机装过这款字就不发请求、直接用本机那份；font-display: swap 让字形下载期间先用设备默认字面画出来、下载完再换过去。jsDelivr 那份是 @fontsource 生成的，形状不同：只有 url()、没有 local()，font-display: swap 一样有。

思源黑体那份的取数事实单独记：curl 直连 index.css 是 200／105,274 字节，一片 noto-sans-sc-4-400-normal.woff2 是 200／2,300 字节、font/woff2、access-control-allow-origin: *、Cache-Control: public, max-age=604800, s-maxage=43200。101 片里 4 片按文字命名（latin／latin-ext／cyrillic／vietnamese），其余 97 片按编号命名，编号从 4 起、到 119 止但中间不连号，所以照 0 去拼编号一定 404（我踩过一次）。4 号那片覆盖的是 U+1F1E9–U+1F37E（区域指示符和 emoji 段），不是汉字段。@fontsource 另外还提供按子集切的 chinese-simplified.css，但那份没有 unicode-range、还把 100–900 九个字重全列出来，浏览器无法先按码位筛片，所以用 index.css 这份逐码位分片的。

切片按 unicode-range 划分，一片只覆盖一批码位，浏览器只下载本页文字碰到的那几片。这是 " 分包 CJK 字体 " 能用的前提：不分包的话一款中文字体是几 MB 起步。代价是链里挂几款，下载就按几款叠——具体数字见下面 " 实测 "，不是小数目。

取数路径上有三件事必须知道（curl 直连测的）：

• result.css 不带 Referer 是 403／112 字节，带 Referer: https://takomitkm.github.io/ 才 200。浏览器默认的 Referrer-Policy（引用来源策略）是 strict-origin-when-cross-origin，跨站取样式表时会带上站点根地址，本站也没有任何改过这个策略的 <meta> 或响应头，所以浏览器这一侧接得上。
• 那个 200 其实是 307 重定向 过来的：Location: https://ik.imagekit.io/< 账号 >/packages/…/result.css?t_3=< 数字 >。账号段会变——同一轮里取到过 valox72479、fonts122、fonts14 三种。结论是 绝不能把 ik.imagekit.io/… 写进仓库，只能引 cn-font.claude-code-best.win 这个入口，让浏览器每次自己跟着重定向走。
• @font-face 里的 url("./dea9cc….woff2") 是相对地址，基准是 重定向之后 的最终 URL，所以那片 woff2 的完整地址是 https://ik.imagekit.io/fonts14/packages/hwmct/dist/ 汇文明朝体 /dea9cc….woff2。实测 200、29,676 字节、font/woff2，不带 Referer 也给。

这里我自己错了一次，记下来：先手拼 woff2 地址试过 404 0 字节 ，当时以为是签名或 token 拦的。那是 拼错了——路径是 dist/ 汇文明朝体 /< 文件 >，我把中间那层目录丢了。按正确基准重拼就是 200，什么 token 都不存在。教训是手拼相对 URL 前先确认基准，拼错了别归因到对方的访问控制上。

思源黑体为什么能出库 ：themes/mustom/source/asset/font/SourceHanSansCN.otf 8,800,680 字节，是这仓库里最大的单个文件；layout.styl 里那段 @font-face{Source Han Sans CN} 一起删（那底下还留着一行注释掉的重复 src）。删完全站在主题和站点源码里 grep Source Han / SourceHan / 思源 是 0 命中，没留悬空引用。有一点要说清免得看错改动大小： 正文的主字面本来就是汇文明朝体——frame.ejs 里那条 hwmct <link> 在这轮之前就在，仓库那份思源只是接住汇文接不住的字。所以出库换的是 " 接不住时谁来接 "，日常首屏不会看到整站换字，差别出现在缺字和外链失效两种情况。这轮把那一层保险从 " 仓库里的 8.8 MB" 换成 " 链里第三项的外链思源黑体 "，按口径要求不存仓库，代价是思源也跟着托管方走（见下面 " 代价 "）。

代价，按口径要求如实写：一整块中文字面现在挂在第三方中转上，四份 CSS 里三份走 cn-font.claude-code-best.win（它不是汇文／上图／思源的官方发布渠道，是个白牌 ImageKit 桶），一份走 jsDelivr（@fontsource 的正规发布路径，但它对中国访客的可达性历史上波动过）。任何一束挂掉的后果是 " 那一款的字换成链里下一款画 "，不会出方框，但会出混排；四束全挂才整页落到访客系统字体。原来仓库里那 8.8 MB 思源是 " 外链全断也还有一档完整中文字面 " 的保险，上一轮已经出库，这轮没有把它加回来，仓库里不再有本地字体兜底。四条 <link> 都写在 frame.ejs 里 CDN_ENABLE 的 else 分支——把那个开关打开，字体会跟主题定制一起消失。

逐字回退本身的两条代价，是这轮改判换来的：一是 混排回来了 ，一行里缺的字会落到别款，字面不统一是可见的，这是 " 逐字最优 " 和 " 整页统一 " 之间选边的结果，上一版选后者、这版选前者；二是 首屏字体流量按四款叠加，具体数字见下面 " 实测 "。上一版写的 " 没降到的档一片都不下载、日常首屏只有一束字体请求 " 随整套换档机制一起作废。

Service Worker 的缓存口径这轮改了两次，最终形态是 只列两类特例、其余全部由 fastest 兜底（_config.yml 的 serviceWorker.routes，按注册顺序，sw-toolbox 只取第一个命中的路由）：

为什么不再按扩展名罗列。上一版第 4 条写的是 /.+\.(css|js|json|jpg|…|woff2|mtn|moc)(\?.*)?$/ 这样一份名单，代价是 没写进去的扩展名就漏了——.mp3、.xml、.txt 都不在名单里，于是看板娘语音落到兜底那条 networkFirst 上，每次朗读都得先等网络、最长 5 秒才可能出声。她的口径是：要单独对待的只有 networkFirst（页面本体）和 networkOnly（那批）两类，剩下的一律 fastest。所以兜底反过来写——第 4 条 /\/ 匹配任何含斜杠的 URL，也就是 " 全接 "，新出现的资源类型不需要回来加条目，天然就是 " 缓存＋每次开页核对更新 "。

第 3 条的 pattern 是按本站产物的 URL 形状选的：find public -name '*.html' 数是 47 个文件，其中 15 个是页面、全部以 /index.html 结尾或以 / 结尾（/、/posts/2659281223/、/about/index.html、/archives/），剩下 32 个都在 asset/part/ 下、既不以 / 结尾也不是 index.html，所以这条只会命中页面本体，部件 html 归兜底。

新表实测（_tmp/roundY.mjs，冷 profile 连开四趟，每趟再主动 fetch 一遍语音／atom.xml／部件／样式）：第一趟不受控，缓存只有 precache 那 56 条（页面 6、部件 31），mp3/xml/woff2/favicon 全 0；受控之后 136 → 183 → 187 条，mp3 1 条 、xml 1 条、css 7、js 49、woff2 4→50→53、favicon 2、part 31、busuanzi 恒 0。也就是说换掉名单之后，不带那些扩展名的语音和订阅文件确实被兜底接住了，而不蒜子照样一片不留。

两条策略的差别用标记法分辨（_tmp/roundZ.mjs，复用同一个已受控 profile）：往磁盘 public/index.html 的 </body> 前插 <!--MK-P-ALPHA-->，同一趟打开 页面 outerHTML 里就已经有标记，缓存里那份也从 26,408 字节变成 26,425；对照组是样式表——同一份构建里 style.css?t= 恒定，往磁盘那份末尾追加 /*MK-R*/ 之后，fastest 的表现是 " 当趟缓存变新、当趟画面还是旧的、下一趟画面才新 "。所以页面拿到的是当场为真、资源拿到的是零等待但晚一趟。

这里也更正我自己一个判据选择：本来想用导航条目的 transferSize 来分辨页面走哪条策略，实测 SW 一旦接管，performance.getEntriesByType('navigation')[0].transferSize 在 Firefox 里恒为 0（V2/V3/V4 全是 0），这个数在两条策略下都一样，不能用来分辨——分辨要靠 " 改版当趟是否生效 "，不是靠字节数。

上一轮顺带做的两件事仍然有效：cdn.jsdelivr.net 从 networkOnly 名单里拿出来（思源黑体要走它）、clustrmaps 和 icon-lib\|font-mustom\|MPlayer 那两条 networkOnly 删掉；不蒜子 busuanzi\.ibruce\.info 加进 networkOnly（她的口径是浏览量数字不留本地，见下面实测那节末尾）。旧规则里字体切片写成 cacheFirst 那个坑也一并记着：cacheFirst 命中就永不回源，改了字体访问者不会生效，现在全站没有一条 cacheFirst。

三种策略分别在做什么（读的是 sw-toolbox@3.4.3 编译进 sw.js 的那三段源码，不是文档转述）：

• **networkOnly**＝fetch(request)，一行，碰都不碰缓存。计费和统计类必须用它，否则离线时把旧响应存下来、下次开页拿旧数当新数用。
• fastest＝new Promise(race)，同时放两路：fetchAndCache(request)（发网络请求，成功后 cache.put() 把新版写回、再返回）和 cacheOnly(request)（只读缓存，命中就立刻返回，没命中返回 undefined、这一路算失败）。谁先出结果用谁。因为读缓存是本地操作、几乎瞬时，所以 画面等的是缓存，网络那一趟照样发出去、只是不挡画面——这就是 " 每次打开都核对更新，但不多等一秒 " 的实现。代价是新版永远晚一趟生效，实测就是这个样子（下面那个 /*MK-R*/ 标记测试）。
• **networkFirst**＝先 fetchAndCache，网络成功就直接用网络那份；只有网络报错或状态码不合格才回退去读缓存。加上 opts.networkTimeoutSeconds: 5 之后 sw-toolbox 会另起一个 5 秒定时器，和那条 fetch 一起 Promise.race——5 秒到点才去读缓存，所以等待上限是 5 秒，不是无限等。它同样会在网络成功时写缓存，所以 " 只有 fastest 才存东西 " 是不成立的（这点是本轮实测纠正的）。

选谁的分界：只有两处需要点名——" 必须当场为真的数字 "→networkOnly（统计、翻译、播放器、GitHub API、不蒜子），“页面本体 "→networkFirst（最多为新版等 5 秒）。其余一概不列名单，由最后那条 /\/ fastest 全接：界面、字形、正文 JSON、语音、订阅 XML、部件 html 全都 " 先发更新核对、立刻用本地”，新出现的资源类型不用再回来加条目。

cacheFirst 本站已经不用了：它 cacheOnly 命中就返回、永不回源，上一版把字体切片写成它，才出现 " 改了字体但访问者看不到 " 的死档。

Service Worker 到底存不存这些，这轮把同一份构建产物连着开了四趟（_tmp/roundR.mjs，冷 profile，本地 127.0.0.1:4162）：

• 第一趟：navigator.serviceWorker.controller 还是 false（SW 刚注册，这一页还不归它管），toolbox 缓存里只有 precache 那 56 条（页面 37、/api/*.json 10、其余 9），字体相关 0 条；这一趟 111 条 woff2 网络条目、transferSize 合计 3,024,260 字节，全走网络。
• 第二趟（已受控）：缓存 56 → 129 → 133 条，其中字体 CSS 3 条、woff2 3→4 条（域名 ik.imagekit.io）。这一趟页面只发出 3 条 woff2 请求，且 transferSize 全是 0，四份字体 CSS、style.css、5 条 /api/*.json 同样是 0——都由缓存给出。为什么只发 3 条：其余切片这时还躺在浏览器自己的 HTTP 缓存里，没走到 SW 这一层（归因未核，标 B）。
• 文章页那一趟：文字多了，55 条 woff2 请求全部经过 SW、transferSize 全 0，缓存里 woff2 累计到 59 条（ik.imagekit.io 52＋cdn.jsdelivr.net 5＋本地 2）。
• 于是上一轮那句 "woff2 一条都没进 PWA 缓存" 作废。那是 cacheFirst 那版规则下、SW 又恰好没拦到请求造成的观测缺口，不是 sw-toolbox 存不下跨站切片。

“每一次打开都核对更新 " 这条单独验过：在第一趟和第二趟之间，往磁盘那份 public/asset/css/style.css 末尾追加一行 /*MK-R*/（183,232 → 183,242 字节），URL 一个字没改（?t= 是构建时间戳，同一份构建里恒定，所以不是靠换地址刷新的）。第二趟打开后，缓存里那份就已经带 marker（长度 183,242）；页面这一趟画的还是旧版——这一条只能从 fastest 的语义推（cacheOnly 瞬间命中，fetchAndCache 稍后才把新版写回），直接证据只有 " 缓存在这趟就变成了新的”，标 B。第三趟页面吃到的才是新版。这就是 fastest 和 networkFirst 的分工：两者都发网络请求，networkFirst 在请求回来之前一直等（本站 networkTimeoutSeconds: 5 是硬等），fastest 立刻用缓存画、新版下一次生效。

缓存条数在往上走（四趟之后 191 条），sw-toolbox 的 maxEntries／maxAgeSeconds 本站没设。不会跨部署堆：换新 SW 时它会把上一版那份额外的 $$$inactive$$$ 缓存清掉（第一趟的快照里能看到这条，10 秒后再读就没了），这也正是 precache 必须存在的原因——见文末 PWA 那段。

存了什么，这轮把整份缓存逐条倒出来数过（_tmp/roundT.mjs 五类页面各连开两轮、末次快照 262 条；_tmp/roundV.mjs 复用同一个 profile 再开两趟、322 条，按扩展名）：woff2 182、js 49、html 36、json 16、png 12、css 7、ico 2、woff 1、svg 1、jpg 1、.moc/.mtn 各 1、无扩展名 13（页面 URL 本身）。按 host：本地 127、ik.imagekit.io 159、cdn.jsdelivr.net 21、cn-font.claude-code-best.win 3、github.com 2、www.bilibili.com 1、busuanzi.ibruce.info 7、v1.hitokoto.cn 1、api.ip.sb 1。三点值得记：

• 四份外链字体 CSS 全部 进了缓存（css 7 条＝站内 style.css＋waifu.css＋site.css＋那四份）。但 jsdelivr 那份 index.css 是滞后出现的：roundT 那十次快照里它一直是 0（当时 21→20 条 jsdelivr 全是被它引用的 woff2 切片），到 roundV 才数到它。为什么慢一趟没查，观测本身是 A、机制标 C。
• 三个第三方 JSONP（不蒜子、一言、api.ip.sb 取访客 IP）在改之前也被兜底那条 /\// networkFirst 收进了缓存（末次快照里不蒜子 7 条、一言 1 条、IP 1 条）——它们的 URL 没有扩展名，命中不了按扩展名那条，就归最后一条。networkFirst 同样会写缓存，所以 " 只有 fastest 才存 " 是不成立的。据此定的两条口径：不蒜子那个计数接口现在钉成 networkOnly、永不留在访问者本地（浏览量数字不能拿旧的充当新的）；一言不动，仍然进缓存——离线时侧栏那句是上一次开页存的，这是 knowingly 接受的，见下一段。
• .mp3（看板娘语音）、.xml（atom.xml）在旧的按扩展名列名单那版路由下是 0 条——它们不在名单里，那版把它们推给了兜底 networkFirst。兜底换成 fastest 之后（roundY）两个都是 1 条，实际朗读过的语音和订阅文件都留在访问者本地了。.txt 仍然 0 条，因为站点里没有页面去请求任何 .txt（不是路由拦的）。

实测：逐字链跑通，0 方框，但首屏字体流量是四款叠加

探针 _tmp/roundQ.mjs：headless Firefox（--headless --no-remote --new-instance --profile，每次先删 profile 冷启动），站点跑在本地 127.0.0.1:4162 服务构建产物，视口 1366×900。判据分两层，各管各的：

• 覆盖判据用静态 unicode-range：解析四份 CSS 每条 @font-face 的 unicode-range 并成码位集，和站点文字集求差。上面所有覆盖表都出自这里。这是规范级的确定性判断——码位不在某款声明的任何段里，浏览器就不会拿这款去画那个字，不需要实测。
• " 画出来是不是方框 " 用位图比对，但只做正向判定 ：把字画进这一档实际生效的 font-family 链，和同一条链画 U+10FFFD（未分配码位，任何字体只能画成 .notdef 框）的位图比 FNV-1 哈希，一致＝方框，不一致＝链里确实有款把字画出来了。" 和 monospace 那张一样 " 不能判成缺字——这是上一版判式的错：缺字时浏览器用隐式的 last-resort 系统字体去画，那张不保证等于 monospace，所以 " 一致 " 推不出 " 缺字 "。 裻／⫘ 当年就是这么被藏过去的，也是那套换档判法当时看起来 " 能跑 " 的原因。字宽也不能判（中日韩等宽，至 ／ 裻／虛 每款都是同一个 1em）。document.fonts.check() 同样不能判覆盖，它报的是 " 此刻有没有已下载好的字形 "。

四款齐挂时，首页在跑位图扫描之前（也就是纯页面加载）的字体流量：

113 片 woff2、transferSize 合计 3,691,160 字节（约 3.5 MB）；逐片 curl 实测各家族下载量：汇文 47 片 1,710,420 字节、上图 43 片 1,343,024 字节、思源宋体 8 片 171,556 字节（思源黑那 18 片没逐片量）。

同一份首页把另外三份 <link> 删掉、只留汇文（public/_1fam.html，测完即删）：35 片、1,132,004 字节（约 1.1 MB）。也就是说链里多挂三款，首屏字体流量从 1.1 MB 涨到 3.5 MB。

这多出来的量不是 " 补缺 " 补出来的：上图那 41 片一共声明 2,312 个码位，其中 2,271 个（98%）汇文也声明 ， 的 U+7684 在汇文片 5f771bfa….woff2 和上图片 d023a214….woff2 里都有，两片 都下载了。所以 Firefox 是照 unicode-range 把链里每一款的对应切片都拉，而不是只在首款画不出时才拉下一款（为什么会这样我没查，机制归因标 C 未核；数字本身是 A，直接读网络条目）。上一版 " 没降到的档一片都不下载 " 那句就是被这个观测否掉的。

字形表现（位图扫描，方框＝和 .notdef 对照同哈希；_tmp/roundS.mjs 扫七类页面，_tmp/roundW.mjs 把直播页和关于页按 " 落位后再扫 " 重跑了一遍）：

七类页面全部 0 方框。字符数在不同趟之间会差十几个，因为侧栏的一言和时段问候是每次随机／按钟点取的，不是判定漂移。

getComputedStyle 回读：body 和 .markdown-body 是 "Huiwen-mincho", "STDongGuanTi Bld", "Noto Sans SC", Arial, Helvetica, sans-serif，.m-drawer／.p-brand-slogan／.p-menus 前面多一项 "Source Han Serif CN VF"——Stylus 那两条链在编译产物里名字和顺序都在，.m-drawer 的继承覆盖到了侧栏全部子块。

零墨迹那几例不是缺字：U+FE0E／U+FE0F 是变体选择符、U+329 是合字用 "（一）“、U+A0 是不换行空格，这几个码位单独画在空画布上本来就没有墨。判定只用一个方向——位图和 .notdef（拿 U+10FFFD 做对照）同哈希才算方框，所以 " 零墨迹 " 永远不等于 " 缺字形”。

两处观测缺口顺手记一下。.markdown-body 在文章页扫出来 n=0，是选择器顺序的假象：页面上第一个 .markdown-body 是列表摘要那个空占位，正文在 .p-post-content 里，所以单列了一行。直播页第一趟（roundS）只有 63 字符、侧栏 3 个字符，看着像侧栏没渲染，_tmp/roundU.mjs 对着它和关于页逐项比了 innerText／textContent、计算样式 display／visibility、[data-lang] 填充数（92 个里填了 78）、meta[name=layout-parts]（两页都是 ["page"]）、/asset/part/*.html 的请求数与状态码——两边完全一致，差别只在直播页多挂了 3 个 iframe 和 1 个 video，部件落位更慢。改成轮询到 .m-drawer 文本稳定再扫，就是上表那行 217／39。这是探针采样太早，不是页面 bug，但这轮没动直播页的任何代码。

外链断掉的后果这轮没重测（上一版测过 " 强制只留某一款 " 的三场景，但那是给换档机制测的，链的口径已经变了）。按 CSS Fonts 的行为，某一束挂不住＝那一束的字全部落到链里下一款，font-display: swap 期间先拿设备默认字面画，不会留方框；这条是规范推论，标 B。

夜间模式不再压暗任何外链图片

layout.styl 原来是一条 :root.night {#live2d-widget, img { filter: brightness(0.8) } }，站内站外一起压。上一轮图标换成外链之后这条就成了麻烦：外链图片本来就是别家品牌的固定配色，压暗只会让它更糊。现在拆成两条，豁免条件写在规则本身里：

1
2
3
4
5

:root.night
  #live2d-widget
    filter brightness(0.8)
  img:not([src^="http"])
    filter brightness(0.8)

img:not([src^="http"]) 是按 "src 属性是不是以 http 开头 " 判的，所以以后新增的外链图片自动豁免，不用再回来改样式表。两个边界说清：

• 它只看 src 开头，协议相对写法（src="//example.com/x.png"）选不中、会被当成站内图片压暗。实测全站 <img> 没有这种写法（外链都是 https://，站内是 /asset/…），所以现状下豁免到的正是那 3 个外链：两个 favicon 和头像 https://github.com/takomitkm.png。要新增外链图片就照 https:// 写，别用 //。
• 只管 filter。夜间底色和文字色那套变量没动；gray（灰阶）皮肤底色本来就是浅色，不需要豁免，也没给它加规则。
• 上一轮为 GitHub favicon 加的 :root.night .p-brand-contact-dark{filter: invert(1)} 保留。它跟 " 压暗 " 不冲突：invert（反色）只改 RGB 不动 alpha，那条近黑的 #171515 翻成接近白；而且它选择器更具体（:root.night + 一个 class），实测计算样式就是 invert(1)。

实测（_tmp/roundP.mjs，1366／dpr2，把 night 挂到 <html> 上，逐像素按 WCAG 相对亮度算图标与其左右留白底色的对比度）：

• 外链三张的计算样式：takomitkm.png → none、github.com/favicon.ico → invert(1)、www.bilibili.com/favicon.ico → none；站内三张（/asset/img/icon.medium.png、qf3cu.huaji.png、qq.png）仍然都是 brightness(0.8)，豁免没有漏到站内图片上。
• B 站图标夜间对比度：豁免之后 7.07∶1（可分辨像素 1025／2304）；把这条豁免单独撤掉、恢复旧的 " 外链也压暗 "（给那个 <img> 写行内 filter: brightness(0.8) 模拟改动前那一版）是 4.73∶1（1021／2304）。也就是说豁免换来的是对比度上浮，" 看得出来有几个像素 " 那一列几乎没变。这一张只取 B 站那列：同一次会话里上一状态注入的 " 关掉 GitHub 反色 " 样式还在生效，所以那张图在 nightdim 里也显示成 none。
• GitHub 图标那组顺带重算了一次，并且 要更正上一轮写的数字：_tmp/lumcheck.py 里相对亮度的绿色系数当时写错成 0.0722（应为 0.7152，0.0722 是蓝的），B 站那个图标主体是全青 #00A1D6、亮度几乎全在绿通道上，所以被系统性低估。修正后：夜间有 invert(1) 是 17.39∶1、可分辨像素 1157／2304；用 !important 把这条规则关掉作对照，1.15∶1、可分辨像素 0 个——" 不翻就完全看不见 " 这个结论没变（0 像素那条不依赖系数），只有比值数变了。上一版正文里的 6.81∶1／1.06∶1 是错的，已就地改成修正值。

ShiftNav（已删除）

现在这个仓库里已经没有 ShiftNav 了，这节留着记它是什么、为什么来、为什么走。

ShiftNav 原本是 WordPress 的一个抽屉菜单插件，前端本身只是「一份 CSS + 一个 jQuery 插件 + 一段 off-canvas DOM」，所以当年不装 WordPress 也能移植进来：

1. jquery.min.js → shiftnav.min.js（原样取自插件 SVN trunk）
2. shiftnav_data 这个全局对象原本是 WP 用 wp_localize_script 注入的，我在胶水脚本里手工补齐了它读取的 16 个键
3. 抽屉 DOM 照 vcb-s 线上渲染结果的结构搭：.shiftnav[data-shiftnav-id] > .shiftnav-inner > nav.shiftnav-nav > ul.shiftnav-menu，开关按钮 #shiftnav-toggle-main.shiftnav-toggle[data-shiftnav-target]
4. 菜单项从主题渲染好的 .p-menus .p-menu 里读；主题是用 JS 异步填充这块 DOM 的，所以胶水脚本每 250ms 轮询一次，拿到内容就停
5. shift_body 留空，即不做「推挤主体」的位移，抽屉直接盖在上面——主题的布局有自己的 fixed 头部，推 body 会错位
6. 断点 991px：宽屏隐藏 ShiftNav 开关、用主题自带抽屉；窄屏反过来，并给 .m-header 让出左上角的位置

手机端抽屉改回主题自带的那个，然后把 ShiftNav 整个删掉

原来窄屏走 ShiftNav、宽屏走主题抽屉。ShiftNav 那个抽屉里只有 buildMenu() 从 .p-menus 抄出来的一组链接，也就是「只有 main」——个人信息、皮肤、设置、分类、标签一块都没有，而且 .p-menus 只有一个分组（groups.length === 1），所以连二级菜单都没有。

根源是它 只能抄菜单：.p-menus 是主题渲染的那一块，主题自己的抽屉里 brand / menus / skin / settings / panels 五块它一概搬不了。与其把这些再抄一遍，不如直接用主题那个抽屉——它本来就是给这两个断点写的，移动端样式（position: fixed、272px 宽、overflow-y: auto）都是现成的。

所以手机端改回 .m-drawer，并把分类 / 标签补进去，只做两件事：

1. frame.ejs 的 .m-drawer 里加一份 _part/panels。于是页面上现在有 两个 .p-panels（抽屉一份、.m-aside 一份），而 common/part.js 的 part() 只 querySelector 第一个、panels.js 也只往 element 里填——第二份会永远是空的。改成 panels.js 自己 querySelectorAll('.p-panels') 逐个填、逐个去 HIDE，并把原来的字号 / 透明度分配抽成 scale(items, box) 复用。
2. 两份各管一个断点：.m-drawer .p-panels 在 ≥1024px 隐藏、.m-aside .p-panels 在 ≤1023px 隐藏。两块都在 DOM 里、都会被填，但任一宽度只有一块可见。

确认抽屉比 ShiftNav 全之后，source/shiftnav/ 整个删掉，frame.ejs 末尾那 6 行引用（3 个 <link> + 3 个 <script>）一并去掉。只删文件不改样式是不行的——shiftnav-site.css 里有两条规则是现在还在生效的，搬进主题里：

.m-app-inner, .m-frame, .m-main, .m-footer {width: 100% !important; margin: 0 !important} 那几条 没有 搬。它们当初是给 ShiftNav 那个 fixed 抽屉让位的（主题自己在 ≤1023px 已经写了 .m-drawer, .m-frame, .m-aside, .m-main {width: 100%} 和 .m-footer {width: 100%}），现在用回主题抽屉就不需要了。

顺带解决的三件事：

• skin 在手机版原本根本不初始化。main.js 的 skin.init() 只写在 util.run 的 desktop(final) 分支里，手机分支只有 xdrawer 和 settings；skin.styl 里还写着 @media (max-width: $app_mobile_width) display none。现在删掉那条 display none、给 .p-skin 补一份手机版布局（width 100%，和 .p-menus／.p-settings 一样——抽屉净宽 257px，桌面那条 width 256px + margin 32px 会横向溢出），并在手机分支里 skin.init()。applyConfig() 里的 skin.set(config.get('skin')) 也从 util.runOnDesktop 里提出来，现在两个宽度都回填访客存的皮肤。
• transfigure / lyride / autoplay 三项在手机版是隐藏的 （settings.styl）。transfigure 对应桌面端 evanyou 那个画布，手机没有， 继续隐藏；lyride 是给早先删掉的 APlayer 歌词用的；autoplay 是 biliplayer 的开关——播放器现在手机上也有了，所以把它放出来，并给手机分支的 settings.init 补上 key === 'autoplay' 的处理（原来只有 desktop 分支有）。lyride 那项后来整个改名重做成 " 隐藏播放器 "，见下面 " 隐藏播放器 " 一节。
• .p-brand-contacts（GitHub 图标）手机上是 display: none，抽屉够宽，改成显示，和桌面一致。

实测（把 UA 钉成 iPhone 再看）：手机 UA 下进度条到 100%、.m-spinner 的 .active 摘掉、html 上 closeDrawer 正常；点开抽屉 innerText 依次是 takomitkm / slogan / 3 2 7 / MAIN(Home, Archive, About, Live) / SKIN / SETTINGS(简体中文, Night Shift, Hide Lyric, Autoplay) / CATEGORIES / TAGS；点灰圆点 html 上多出 gray、localStorage['config'].skin === 'gray'、configChosen 里记上 skin（说明确实走的是访客点击那条路径）；抽屉 scrollWidth === clientWidth === 257，逐个量 .p-brand／.p-menu-items a／[data-skin-key]／[data-settings-key]／.p-panel-items a 没有一个越过抽屉右沿；documentElement.scrollWidth 985 < 1000，不撑文档宽度。两个 .p-panels 各 2 个分类、7 个标签，两份都填上了。

删掉 ShiftNav 之后 public/ 里不再有 shiftnav/ 目录，document.querySelector('#shiftnav-toggle-main') 和 '.shiftnav' 都是 null，window.jQuery 也不再被注入（主题自己的代码不依赖它），每页少加载约 120 KB。

加载界面

主题启动时叠了三层：.m-launch 是整屏 --color-link 红底，.m-spinner 是整屏 #ffffffee 白纱加一个转环，.m-progress 是顶部进度条。前两层太刺眼，做法是：

• .m-launch 直接 display: none
• .m-spinner 只删 background，转环动画和 .active 期间的 pointer-events: all 都留着，进度条不动

DOM 节点本身一个都不能删。main.js 的启动清单是靠这些节点计数决定 " 加载完了没有 "，少一个节点 activateSpinner(false) 就永远不执行，页面卡在加载态。

Markdown 配置

_config.yml 里写了一段显式 markdown:，值就是 hexo-renderer-markdown-it 7.1.1 当前的默认值，所以它对产物是逐字节的 no-op——这点是构建前后对 public/api/posts/*.json 取 md5 比出来的（比对时要排除 api/site.json，它内嵌 swPath: /sw.js?t=< 构建毫秒 >，每次必变）。写死它的唯一目的是钉住渲染行为，将来升级 renderer 时排版不会静默变化。

直播间页

front-matter 是 layout: page + name: live + parts: [page]。三个约束值得记：

1. parts 里只能写主题认识的名字。main.js 只对 page 这个 part 做初始化，写一个不存在的 part 会让启动清单凑不齐，和删 DOM 节点同一个死法。
2. 正文里的 <script> 由 part/page.js 重新执行——它照抄一个新建的 script 元素再插进文档，原来的 id 会丢。所以页内脚本的全局数据必须写在脚本第一行，不能靠 getElementById 去捞一个带 id 的 script 标签。
3. markdown-it 把 <style> / <script> 当 HTML block type 7，里面 不能有空行，有空行就会被截断。

线路表 routes 支持三种形态：字符串是直连媒体地址（m3u8 走 hls.js、mp4 走原生 canPlayType 判断），带 embed 的对象是第三方播放器的 iframe，带 room 的对象是 B 站直播间的跳板卡片。点赞数只写 localStorage，没有服务端计数。

B 站直播嵌不进来的部分，和唯一能嵌的那个

所以：弹幕是 " 有 " 的，但只有借 B 站自己的播放器才有。想自己写代码读弹幕、自己取流，静态托管上做不了，得有个后端做中转（把带 Origin 的请求换成不带的服务端请求，再把 FLV 和弹幕转发出来）。

加一个菜单项要改三处

themes/mustom/_config.yml 的 menus.main.<key>、asset/lang/zh-cn.yml 的 menus.main.items.<key>、以及同文件的 pather.<key>。少最后一项，页面顶部面包屑就打印 undefined。英文那份 en.yml 同理两份都要加。

换壁纸和半透明面板

颜色全在 themes/mustom/source/asset/css/_common/color.styl，是一份份 CSS 自定义属性，按皮肤分四块：:root（默认）、:root.gray、:root.colorful、:root.night。切皮肤只是给 <html> 加减 class（asset/js/part/skin.js 的 set()），所以改之前要先确定改的是哪一块——不带 class 的那块才是打开页面看到的。

背景图不是单独写 background-image，而是塞进 --color-body-back。layout.styl 里 body 已经带了 background-repeat:no-repeat; background-size:cover; background-attachment:fixed，所以只要这个变量的值是 url(...)，整站就是一张固定铺满的壁纸。图放在 themes/mustom/source/asset/img/bg.jpg，路径由 dimension.styl 的 $picurl 给出。原版只有 :root.colorful 的 body 背景用这个变量，它指向 https://source.unsplash.com/1920x1080/?wallpaper，实测现在请求只拿到 503 加一个 heroku 的 “Application Error” 页，取不到图，也就是说 colorful 那套皮肤的 " 随机壁纸 " 一直是加载失败的——换成本地图之后这块顺带修好了。

" 透明 " 就是在十六进制色后面拼两个字母的 alpha。改的背景类变量是这些：--color-background、--color-clear、--color-header-background、--color-progress-back、--color-menus-hover、--color-extension-back、--color-extension-hover、--color-recentposts-more-back、--color-iconlib-iframe-back、--color-settings-switch-off。没动的两类：--color-menus-active-background 和 --color-toc-active-background 是选中项的深底白字，透明了字就压在照片上；gray 和 night 两套整体保持原样（gray 的 --color-body-back 是纯色 #f1f1f1、night 是 #000000，都没有壁纸可透，透明了只会露白或露黑）。

这个后缀试过三档：4d（30% 不透明 = 70% 透明）正文区还能读，但引用块、灰色小字这类本来就浅的文字压在照片亮部会糊；b3（70% 不透明 = 30% 透明）是可读与通透的折中，先定在这一档；现在是 80（50%），2026-09-30 按 " 白底背景透明度调整成 50%" 改的。要再调就改这一处后缀，想保住通透感也可以给面板加 backdrop-filter: blur(...)。

注意 stylus 会把带 alpha 的十六进制色编译成 rgba() 形式，所以源码里是 #ffffff80、产物里是 rgba(255,255,255,0.502)，别在 public/ 里按 #ffffff80 搜不到就以为没生效。

改这一档时顺手把 :root.colorful 里那几个 纯不透明 的白底一起压到 50%（--color-clear、--color-header-background、--color-settings-switch-off、--color-recentposts-more-back，以及本来就是 dd／99 的 --color-background、--color-progress-back、--color-menus-hover）。原因是开屏 3 秒后会自动切到 colorful（见 " 记忆规则 " 一节），访客实际看到的大多是 colorful 这一套，只改 :root 那套等于改了看不见的地方。改完四套皮肤逐个读计算样式实测（_tmp/bg_alpha.mjs，headless Firefox 读 getComputedStyle）：默认皮肤与 colorful 的 .m-header／.m-heaper／.p-menus／.p-hitokoto 全是 rgba(255, 255, 255, 0.5)，gray 是 rgb(255, 255, 255)，night 是 rgb(34, 34, 34) 或 rgba(0, 0, 0, 0.8)——只有前两套变了。这个 Firefox 构建里 browsingContext.captureScreenshot 一直回 invalid argument，所以这轮没留截图，只有计算样式和编译产物两份证据。

图本身是 pixiv 作品 67481841（画师 lemontea），来源地址记在 dimension.styl 的那行注释里。pixiv 上的作品默认不含任何再发布授权，这条只是把出处留在仓库里，不构成授权。

一言面板的换行，和作者行那块底色

句子容器是 .p-hitokoto-word（asset/css/_part/hitokoto.styl），原版没写 word-break，而中文排版允许在任意两个汉字之间断行，所以句子一超过一行就被腰斩——" 离离原上草，一岁一枯／荣。" 这种。改成 word-break: keep-all 之后，CJK 之间的断行机会全部取消，只剩下标点后那些，实测（420px 宽、24px 字）：

1
2
3

君不见，黄河之水天上来，
奔流到海不复回。君不见，
高堂明镜悲白发，朝如青丝暮成雪。

三行都收在 ， 或 。 上，没有一行是从词中间断的。真实面板里把 .p-hitokoto-word 压到 300px 复测也是同样：小荷才露尖尖角， / 早有蜻蜓立上头。。

keep-all 有个必须配兜底的副作用：整句不带标点时就一个断点都没有，文字直接撑破容器横向溢出（实测 32 字无标点句 scrollWidth 744 > clientWidth 420，而 .p-hitokoto 是 overflow: hidden，等于把后半句裁掉）。所以同一块补了 overflow-wrap: break-word——它只在 " 这一行无论如何放不下 " 时才强制断，同一句 32 字变成 17+14 两行，正常句子仍然只在标点处断。这套是纯 CSS，逐字打字的动画（asset/js/part/hitokoto.js 每 160ms 改一次 innerText）不用动，重排自然跟着走。

作者行 .p-hitokoto-from 是 position: absolute，压在面板底部那张 pixiv 图上，图没有底色，字直接糊在画上，所以要一块和面板同款的底色。这块底色 不能 加在 .p-hitokoto-from 这个块上：块上有 line-height: 6，整块铺底会在图上盖出一条 6em 高的横带。可行的形态是把 -「 、名字、 」- 三段收进一个盒子——伪元素挂在行内的 .p-hitokoto-name 上，再给它 background: var(--color-background) 加 display: inline-block，这样一个盒子的宽度天然等于 " 装饰 + 名字 + 装饰 " 的总长，底色是一整块。用的变量和面板、句子同一个，所以跟着皮肤走（默认与 colorful 是 rgba(255,255,255,0.5)、gray 是 #ffffff、night 是 #000000cc）。

为什么要收成单盒：先前那版把底色分别加在 .p-hitokoto-from::before、.p-hitokoto-name、::after 三个兄弟行内盒上，实测在名字和 」- 之间留了一道 6.667px 完全没被涂到 的缝。症状是 ::after 的 content 以空格开头（'」-'）时那个空格不被绘制，背景从 」 才开始画；-「 和名字之间实测 0px，没缝（尾随空格被画了，前导没有——只复现到这一层，规范上为什么不对称没核，B 级）。常见的绕法是那个位置换成不换行空格 \a0 或改 padding，但那样装饰和名字之间的间距得重调，所以这里选了收单盒。改成单盒以后，量到的白框 rect 宽 114.2px，正好等于旧版三段的并集（27.1 + 60 + 6.667 + 20.43）；截图放大四倍逐列扫，框内没有一列掉回图片本身的亮度（框左外沿 123、右外沿 121，框内 236-238，只有字墨处才下陷到 188/109/51）。

顺带修了一个改之前就在的问题：:root.night img {filter: brightness(0.8) }（写在 layout.styl 末尾那一段夜间规则里）会让 img 变成层叠上下文，和 .p-hitokoto-from 落在同一层、DOM 序又在后面，于是夜间模式下作者行整条被图片盖住、根本看不见。给 .p-hitokoto-from 加 z-index: 1 后夜间才真正看得到那块底色。三种皮肤 + 480px 移动端各自截图核过。

页脚那三个数字

<div class="p-footer-count"> 里三个数（layout/_partial/_part/footer.ejs）不是一回事：

不蒜子（busuanzi，接口域名 busuanzi.ibruce.info）是一个免费的极简访问计数器：不用注册、不用后端，页面里放一段脚本，它按这次请求的 Referer 域名返回几个数，走的是 JSONP（所以也不需要对方允许跨域）。它拿不到任何访客身份，UV 只能按访客侧特征粗去重（圈内一般说法是 IP 加 UA，官方没公开算法），换网络、换浏览器、运营商复用出口 IP 都会算错，所以这四个数的定位是 " 图个乐的大致量级 "，不是分析数据。

所以你看到的那个 3.1k 是 " 这个站一共多少字 "，不是人数——往这篇里加完这几节再构建，它就变成了 4k，正好当场验证了这个数的性质。GitHub Pages 是纯静态托管，没有服务器记账，但不蒜子是按请求 Referer 的域名统计的第三方服务，所以 PV/UV 在 Pages 上照常能跑——curl "https://busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback_999" 实测回来的是 try{BusuanziCallback_999({"site_uv":10,"page_pv":10,"version":2.4,"site_pv":10});}catch(e){}。参数名必须是 jsonpCallback，写成 callback 会回 Bad Request。这类第三方计数的两个固有问题：被刷没有防护，服务哪天关了就永远停在最后一个值上（初始占位是 ∞）。

文章页头部眼睛旁边那个数字是 " 本文阅读量 "。原版它走 LeanCloud（leancloud_visitors 配 Valine 的 visitor 模式），而 LeanCloud 官方公告 写的是：2026 年 1 月 12 日起停止新用户注册，2027 年 1 月 12 日正式停止服务，之后数据按合规要求清除。这条依赖不值得接，所以换成了同一个不蒜子的 page_pv。

不蒜子的响应里除了全站两个数，还带一个按请求 Referer 的 URL 记账的 page_pv，实测：

也就是说 " 这一页被打开过几次 " 本来就是现成的，不用再引第二个服务。填充点在 main.js 的两处不蒜子回调里（启动时一次、每次 pushState 之后一次），写进 .p-post-pv-num；comment.js 里原来那段给 .leancloud_visitors 设 id 和 data-flag-title 的代码删掉了。代价是三个数现在全押在同一家第三方上，它哪天停了整站统计一起回到 ∞；真要换，方向是可自托管、带导出接口的 GoatCounter 一类，但那要先有账号和自己的域名。Valine.min.js 和 LeanCloud 的 av-min.js（合计约 268 KB）现在还在每页加载，只是评论本来就没开，要清随时能清。

site_pv 和 site_uv 能清零吗：不能

这两个数是 域名维度的累计，存在不蒜子自己的服务器上，统计键是你站点的 hostname，站方没有任何写入口。三条核过的证据：

网上 " 不蒜子 UV/PV 初始化 / 清零 " 的教程全部是 显示层加偏移（在自己页面里给返回值再 + 一个基数，用来给新站补历史），反向做不出清零，只会让显示数字和真实数字永久错开。所以这两个数保留原样显示，含义写在页脚气泡里，不做任何加工。

这个站的 site_uv 一度等于 site_pv，是因为我为了测接口用 curl 反复直连打请求——curl 没有浏览器特征，每次都被当成一个新访客。要真想让计数从零开始，唯一的杠杆是换统计键（不蒜子按 hostname 记账，换自定义域名后新域名从 1 开始），那是换域名，不是清零。

不蒜子一共能给什么

接口一次请求返回四个字段：site_pv、site_uv、page_pv、version（最后一个是服务自己的版本号，不是统计量）。三个统计量现在全站都用上了：

官方文档另外两条能力：一是 只计数不显示 （只引脚本不引标签）；二是明确写了 不做 列表页逐篇阅读量——“不蒜子为保持极简，暂不支持在站点文章摘要列表中（如首页）逐个显示每篇文章的阅读次数”，所以归档页每篇后面那个数拿不到，除非引第二个服务。

page_pv 是按 URL 记账的，所以同一个填充点（main.js 里那两处回调写 .p-post-pv-num）顺手也能喂独立页面——页面模板 layout/_partial/_part/page.ejs 的标题条右侧加了一个 .p-page-pv，元素沿用 .p-post-pv-num 这个 class，JS 一行没改。

页脚注释气泡

三个图标各包了一层 .p-footer-count-item，里面挂一个 .p-footer-tip，文案走主题的 i18n：data-lang="footer.tipPv|tipUv|tipWd"，中英两份在 asset/lang/{zh-cn,en}.yml。桌面靠 :hover/:focus，触屏靠 main.js 里给这些元素绑的 click 切 .on（点另一个会自动关掉前一个）。两个坑：.p-footer 自己是 overflow:hidden，所以气泡的定位上下文必须是整行 .p-footer-count 而不是单个图标，否则最左边那个会被裁掉一半；stylus 里 &:hover, &:focus, &.on 这种并列父选择器嵌子元素时会编译出一个光秃秃的 .p-footer-tip，把默认隐藏样式覆盖掉，得把三条选择器整行写全。

播放器

右下角那块面板现在是一个 B 站官方 iframe，组件叫 biliplayer，见下面 " 换成 B 站官方 iframe" 一节。再下面两小节是替换之前的调查记录：meting/APlayer 的代码已经全部删掉了，但结论留着有用——它解释了 " 公共 meting 端点为什么只有 30 秒 "“音频流为什么不能自己转发”，这两条以后换任何方案都会再撞上。

网易云 meting 面板（已删除）

主题自带 APlayer + MetingJS（asset/js/plugin/APlayer.min.js、Meting.min.js），面板在 layout/_partial/frame.ejs 里无条件渲染，开关只有一个字段：themes/mustom/_config.yml 的 meting.id。判定在 main.js 里——

1
2
3

const mj = el && el.querySelector('meting-js');
if (mj && mj.getAttribute('id')) _run_Meting();
else el && el.remove();

也就是说 id 给空字符串时整个 .p-audioplayer 面板会被删掉（原版作者的歌单 id 之前就是这么清掉的），填上就重新出现。<meting-js> 的 type 支持 song / playlist / artist / album，单曲就写 type: song。

MetingJS 这个版本默认调用 https://api.i-meto.com/meting/api?server=< 服务商 >&type=< 类型 >&id=< 号 >，域名确实写在 Meting.min.js 里，但那只是 默认值——同一行是 this.api = this.meta.api || window.meting_api || "https://api.i-meto.com/..."，而 api 正是 <meting-js> 认的属性之一，所以换端点不用碰插件源码。主题模板（build-time 和 runtime 两份 audioplayer.ejs）因此多输出一行 api="<%- theme.meting.api %>"，值写在 _config.yml；这个字段留空时属性是 api=""，空串 falsy，会回落到 i-meto 默认，等于没改。

先看 i-meto 那份实测：这个端点 走本机代理会 403（Cloudflare 挡的，直连 200）；元数据（标题 / 作者 / 封面 / 歌词）拿得很顺，但 音频地址是按曲目授权给的——

也就是说端点是活的、配置是对的，448155（あなたがいた森 (TV サイズ) / 樹海）在 i-meto 上放不出声。换成同协议的 https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&r=:r 之后能响——

但 只有 30 秒：把那个 481115 字节的流存下来 ffprobe 是 duration=30.000000、bit_rate=128297，浏览器里 aplayer.audio.duration 同样是 30。fee: 1 的曲子网易云只发免费试听段，公共 meting 端点只是替客户端签了个 CDN 地址，绕不过授权——换端点改变的是 " 响不响 "，不是 " 完整不完整 "。要整首只有两条路：换任意 fee: 0 的曲目号（改 meting.id 一行），或者把音频文件自托管挂上去。

两个已知代价：injahow 是社区公益端点、没有可用性承诺，它哪天挂了面板就退回 " 封面歌词在、播放不响 "，回退动作是删掉 meting.api 那行；另外它响应时间方差大，headless Firefox 里等 6 秒时 meting-js.aplayer 还没实例化、14 秒才稳，写验证脚本时 --wait 要给够。

换成 B 站收藏夹当歌单：数据拿得到，音频放不出

想把自己那个收藏夹（fid=1190530554，即 https://www.bilibili.com/list/ml1190530554）挂成歌单、只播音频。分三层，前两层没问题，第三层是死路：

meting 端点这一侧也帮不上：api.i-meto.com 对 server=bilibili 直接回 "server 参数不合法 "，api.injahow.cn 回 {"error":"unknown type"}，两家都没有 bilibili 服务商。Meting.min.js 里的 server 字段是原样拼进请求 URL 的，客户端没有白名单（源码里 netease/tencent/xiami 那几个字符串只出现在 _parse_link，也就是 " 粘链接解析 " 那条分支），所以插件这边改不出花来。

结论：静态站（GitHub Pages 只有静态托管）做不到，必须有个服务端去带 Referer: https://www.bilibili.com/ 转发音频流——Workers / Deno Deploy / 自己那台 Debian 都行，代价是这条链路变成 " 依赖我自己的服务器 "，服务器挂了播放器就哑。唯一不需要中继的路子是官方 iframe：player.bilibili.com/player.html?bvid=&page=1 实测 200、无 X-Frame-Options、Access-Control-Allow-Origin: *，能嵌，但那是整块视频播放器，出画面，APlayer 的进度条和歌词面板都用不上，等于把右下角那块面板换成一个 iframe。

换成 B 站官方 iframe：biliplayer 组件

上面那句 " 唯一不需要中继的路子 " 就是最终采用的：收藏夹 ml1190530554 当歌单，逐首用 player.bilibili.com/player.html?bvid=<BV>&page=< 页 >&danmaku=0&high_quality=1&autoplay=1 嵌进右侧栏面板。删掉的文件是 plugin/APlayer.min.js、plugin/Meting.min.js、plugin/md5.min.js、css/_plugin/APlayer.min.css、css/_part/audioplayer.styl、layout/_partial/_part/audioplayer.ejs、source/asset/part/audioplayer.ejs、source/asset/js/part/audioplayer.js，main.js 里两个插件的 import 和 _run_APlayer() 一并清掉，color.styl 的 16 行 --color-audioplayer-* 变量、dimension.styl 的 $audioplayer_height/$audioplayer_list_height、layout.styl 里 :root.lyride .aplayer-lrc 整块都跟着删。新面板的两份模板（layout/_partial/_part/biliplayer.ejs 与 source/asset/part/biliplayer.ejs）字节相同，这是主题 part 的固有要求。

歌单是构建期快照，不是运行时拉的。 tools/bili_fav_dump.mjs 翻页调 api.bilibili.com/x/v3/fav/resource/list?media_id=1190530554&pn=&ps=20，写成 source/data/bili-playlist.json（收藏夹原始 993 条，核验剔除 12 条后落盘 981 条、194460 字节，每条 bvid/title/duration/page/upper/pubtime，按 pubtime 倒序），面板用 data-playlist 指向它。为什么不让页面自己去拉——三条对照实测：

浏览器发起的 fetch 一定带 Origin，而且 Origin 是 forbidden header，脚本改不了，所以本站域名去拉这个接口拿到的是 403，连 " 有没有 CORS 头 " 都轮不到判断。要运行时拉就得有自己的服务端，与 " 不要中继 " 这个选型前提冲突，因此固化成构建期文件。这个白名单不是收藏夹接口特有的 ：后面为了做 " 失效自动跳过 " 而想改问逐条探活的 x/web-interface/view 和 x/player/pagelist，带 Origin: https://takomitkm.github.io 一律 403，带 Origin: https://www.bilibili.com 才回 200 + Access-Control-Allow-Origin 回显——所以运行时逐条问也是问不到的，检测只能全部放在构建期（见下面 " 失效条目 " 一节）。 往收藏夹加歌后不会自动出现，刷新方法是 deno run -A tools/bili_fav_dump.mjs（走 7897 代理）→ deno run -A tools/bili_playlist_fix.mjs（剔失效 + 补时长，见下面两节）→ 重新构建。

加载完成 3 秒后是一个带取消按钮的倒计时，然后自动开播：

面板标题是 " 我的歌单 "（英文站 MY PLAYLIST），走 biliplayer.caption 这个语言键，不写死在模板里。

danmaku=0 是关弹幕（headless 里弹幕 socket 六种握手全被零字节关闭，嵌进来的 iframe 也拿不到，留着只会转圈）。官方 iframe 没有 postMessage 控制接口，所以进度、音量、播放暂停全在那个 iframe 内部，外层只能整块换 src，上下首必须由自己做。

手机端：B 站播放器接进一言面板当底图

面板本体在 .m-aside 里，位置在手机上其实是能看见的（.m-aside ≤1023px 是整幅宽、排在正文之后）；看不见的原因是 biliplayer.init() 只写在 main.js 的 desktop 分支，手机分支里从没跑过，.p-biliplayer 一直带着 HIDE。现在手机分支的 checklist 里加上 biliplayer，并补了 settings.init 的 autoplay 分支（原来也只有 desktop 有）。

但 " 放到右栏底部 " 不是要的。要的是 拿播放器替掉一言面板里那张 /asset/img/qf3cu.huaji.png，让它当面板的背景——所以手机分支的 checklist 之后多搬一次 DOM：

1
2
3
4
5
6

let panel  = document.querySelector('.p-hitokoto');
let player = document.querySelector('.p-biliplayer');
let content = document.querySelector('.m-content');
content.parentElement.insertBefore(panel, content);   // 面板先挪出 .m-content
panel.insertBefore(player, panel.querySelector('img')); // 播放器接到 <img> 原来的位置
panel.classList.add('p-hitokoto-bgm');

为什么要多挪一步面板、而不是直接把播放器塞进 .p-hitokoto： pjax 会整块换掉 .m-content 的 innerHTML（main.js 的 pjax.run）。播放器一旦待在里面，下一次站内跳转连同 iframe 一起被销毁，biliplayer.js 里缓存的 element 就指向一个脱节点的 detached 元素，播放器再也不会回来。所以先把面板本身搬到 .m-content 外面（.m-main 里、.m-content 之前）——它在 pjax 的替换范围之外，面板和播放器一起活下来。视觉位置不变：.p-translater 在手机上本来就是 display: none，面板挪到 .m-content 前面仍然排在正文最上面。

代价是面板躲开替换之后，显示与否得自己按路径管。final_load() 开头加了一段 util.runOnMobile：按 pathname() 给面板 toggle('HIDE')（只有 / 和 /index.html 显示，和原来 " 一言只在首页 " 一致），并把 .m-content 里 pjax 带进来的那份没人初始化的旧面板 remove() 掉——不删的话 part() 的 querySelector 有可能挑到那一份。

配套的样式（hitokoto.styl 的 ≤1023px 一段）全部挂在 .p-hitokoto.p-hitokoto-bgm 底下，class 由上面那段 JS 加。这么写是因为 **“窄窗口 + 桌面 UA”** 这种组合：CSS 断点是按宽度的、JS 分支是按 UA 的，桌面用户把窗口拖到 1023px 以下时 JS 不会搬，CSS 却已经生效——不加 class 的话那块面板就变成图没了播放器也没来，空白一块。

面板内部三处跟着变：<img> 让位给播放器（.p-hitokoto-bgm > img {display: none}）；.p-hitokoto-from（作者行）从 position: absolute 改回常规流——原来它靠绝对定位压在图的下缘，视频比图高得多，继续绝对定位会整个盖在画面上；.p-biliplayer-caption（" 我的歌单 "＋×那条）隐藏，面板自己已经有一言的标题了，两条标题栏叠着没意义。

手机上没有关闭入口，这是有意的。 config.autoplay 的默认值是 false，所以手机访客看到的是遮罩里的 " 播放 " 按钮、不会被倒计时自动开播（“倒计时 " 那条只在 autoplay: true 时跑，见下）。既然不会自己响，就没有需要关掉的东西，最早做的那一栏 " 关闭 bgm”（.p-biliplayer-offbar，连同 biliplayer.closebgm 文案）也就没必要了，删掉。代价是访客手动点 " 播放 " 之后，这一页里没法把播放器收起来——只能等自动切歌或者离开页面。桌面版不受影响，标题栏右边那个 × 照旧是整块 HIDE。

实测（UA 钉 iPhone、1000×700）：面板的 class 是 p-hitokoto p-hitokoto-bgm，父节点 .m-main，子节点顺序 caption → word → from → .p-biliplayer → img；<img> 计算样式 display: none，播放器 985×633，.p-biliplayer-caption display: none，页面上不存在 .p-biliplayer-offbar。把 config.autoplay 设成 true 再刷一次，遮罩里照旧是 " 即将开始播放我的歌单 / 1 / 取消自动播放 "，倒计时没受影响。

pjax 往返实测：首页 → 文章页，面板 display: none、.p-hitokoto 始终只有 1 个；再回首页，面板重新 display: block、播放器 985×633、图片仍然让位。documentElement.scrollWidth 985 < 1000，不撑文档宽度。

反过来 " 窄窗口 + 桌面 UA" 实测：面板 class 只有 p-hitokoto（没有 -bgm），图片 display: block 985×523 照常显示，播放器留在右栏（256×208）、只有标题栏那个 ×——和改动前一样。

这里没有顺手把 hitokoto.init() 也跳过：final_load() 的 checklist 是按 meta[layout-parts] 里列的 part 建的，首页的 parts 含 hitokoto，不调它 checklist.hitokoto 永远是 false，那个 600ms 的轮询就永远凑不齐，activateSpinner(false) 不会执行、页面卡在加载态（同一个坑在本篇 " 加载界面 " 一节记过）。代价是手机首页仍会打一次 v1.hitokoto.cn 的请求。

标题和分类的颜色

--color-post-title / --color-post-categories 两个变量加在 _common/color.styl 的四块里（:root / :root.gray / :root.colorful / :root.night），值分别是 #000000 和 #999999——只有夜间那块标题给 #cccccc，因为夜间背景是纯黑，写死黑字会看不见（.p-post-ending 就是这么处理的，night 下给 #444444）。

用在三处：.p-recentpost-title a、.p-timeline-title a（列表里的文章标题，原来直接吃 a {color: var(--color-link) } 的橙红 #ff3300），以及 .p-post-categories（文章页头部那一栏，连里面的分类链接一起 color: inherit）。桌面端 hover 时标题底下那道下划线也跟着从 --color-link 换成 --color-post-title，免得黑字配橙线。

文章页那个大标题 .p-post-title 没动——亮色皮肤下它本来就是 --color-text = #000，已经是黑的。用户确认过指的是列表里的标题。

顺带把 .p-recentpost-categories（首页列表每条下面的分类）也压成灰色，和文章页那一栏一致；--color-post-categories 在四套皮肤里全是 #999999，夜间背景纯黑上这个灰也是够的。

实测（彩色皮肤下）：.p-recentpost-title a 和 .p-timeline-title a 是 rgb(0, 0, 0)，.p-recentpost-categories 和 .p-post-categories（含里面的 a）是 rgb(153, 153, 153)，同行的 .p-post-date span 仍是 rgb(0, 0, 0)——只有分类那行被压下去了。

顶栏站名是个回首页的链接

.p-sitename 那一栏（图标 + takomitkm 的自留地）每个页面都有、每个断点都在（.m-header 是 fixed 的），原来纯展示。整条包进 <a class="p-sitename-link" href="/">，两份模板（layout/_partial/_part/sitename.ejs 与 source/asset/part/sitename.ejs）字节相同，这是主题 part 的固有要求。

样式两处：.p-sitename-link 要 color: inherit，不然会吃到全局 a {color: var(--color-link) } 变成橙红；再加 display: inline-block; max-width: 100% 配 overflow-x/white-space/text-overflow 那一套，让父级 .p-sitename 的省略号在长标题时仍然生效（换了一层包裹就断在这层了）。桌面 hover 时 " 文字换成图标 " 那套靠的是 .p-sitename:hover 下的后代选择器，图标和文字都在 <a> 里，不受影响。

不用自己写跳转：listen2Links() 会给所有 a:not([target="_blank"])... 绑 linksStore.setClick，走 pjax。已经在首页时 url === window.location.href，点它不触发导航（直接 return）。

实测（1000×700）：.p-sitename-link 是 A，href="/" 解析成 http://127.0.0.1:4321/，getComputedStyle 的颜色是 rgb(51, 51, 51)，和 .m-header 一致（不是 var(--color-link)），图标和文字都在链接内，pjax 已绑上（data-listened="true"）。在 /posts/2659281223/ 点它，2.5 秒后 location.pathname 变成 /。构建产物里 16 个完整页面全部带这个 <a>；asset/part/*.html 那 31 个片段不带是应该的，它们本来就没有头部。

隐藏播放器

设置里原来那个 lyride（标签 " 隐藏歌词 "）是个 空壳：歌词面板早跟着 APlayer/Meting 一起删了，它只干一件事——给 .p-footer 加 12px／20px 的 padding-bottom（当初给歌词条留位置）。所以这个开关按下去什么也看不见，但 :root.lyride 确实每页都在。

现在整个重做成 " 隐藏播放器 "：键从 lyride 改成 hideplayer，_config.yml 的图标键、两个 lang 的文案、config.js 的默认值（true → false，原来默认是开的，现在默认显示）、main.js 两个分支的 handler 一起换掉。旧的 :root.lyride .p-footer 规则删掉。

真正干活的是 biliplayer.js 新导出的 hidden(flag)，flag 是 " 要藏起来 " 的意思：

1
2
3
4
5
6
7

const hidden = flag => {
  if (!element) return;
  let panel = element.closest('.p-hitokoto');
  panel && panel.classList.toggle('p-hitokoto-restored', flag);
  if (flag) { stop(); element.classList.add('HIDE'); }
  else { element.classList.remove('HIDE'); }
};

两点值得记：

1. 手机版要连带把图还回去。 播放器在手机版是接在 .p-hitokoto 里 <img> 的原位上的（见 " 播放器 " 一节），只给播放器加 HIDE 会在面板底部留一块空白——.p-biliplayer 是 HIDE（display: none !important）而 <img> 已经被 .p-hitokoto-bgm > img {display: none} 藏起来了。所以顺带切 .p-hitokoto-restored，CSS 里补一条 &.p-hitokoto-restored > img {display: block}。桌面版播放器在右栏、<img> 照常显示，closest('.p-hitokoto') 是 null，这两句都不执行。
2. 桌面版要重算布局。 右栏少一块，aside 的高度和滚动偏移都变了，所以 desktop 分支里照原来 lyride 的做法调 scrolling(); fixMainHeight();（两个函数内部都有 runOnDesktop 保护，mobile 分支没加）。

顺手把标题栏那个 × 也改成走 hidden(true)，和设置项共用一条路径。

顺带把老访客存下来的废键清掉

lyride 改名成 hideplayer 之后，老访客 localStorage['config'] 里那个键并不会自己消失，原因是 config.js 原来那句 Object.assign({默认表}, 已存) 会把 已存对象里默认表没有的键原样并进 config，而 set() 每次都把整个合并结果写回 storage（storage.set('config', config)）——于是废键被一次又一次地抄回去，永远清不掉。localStorage['configChosen'] 那个数组同理，里面记着的 'lyride' 也留着。

改成只挑默认表里有的键：

1
2
3
4
5
6
7

const isKnown = key => key in defaults;
const raw = storage.get('config') || {};
const keys = Object.keys(raw).filter(isKnown);
const kept = {};
keys.forEach(key => kept[key] = raw[key]);
if (keys.length !== Object.keys(raw).length) storage.set('config', kept);
const config = Object.assign(defaults, kept);

configChosen 也 filter(isKnown) 一遍。只在真的挑掉东西时才写那一次 storage，所以配置本来就干净的访客不会因为这一行多写一次。

实测（先手工塞一份 " 老访客 " 配置进去再刷新）：

顺带一个副作用是好的：以后再改任何设置键的 名字，老访客那份不用等下一次 set() 才清掉，第一次打开页面就被挑走了。

清空 storage 当新访客跑了一遍：什么都不写（config/configChosen 仍是 null），开屏 3 秒自动切彩色照旧（html class colorful），进度条 100%，播放器显示。

实测：全新配置（清掉 localStorage 再刷）播放器是 display: block；点一下 → class p-biliplayer HIDE、display: none、iframe 已摘掉、configChosen 里记上 hideplayer、config.hideplayer === true；再点 → 回来、false；刷新后仍然保持隐藏、开关是 active 状态。

划词翻译的底色改成不透明

划词条 .p-translater-bar 和结果框 .p-translater-result 原来都用 var(--color-background)，也就是那套 50% 半透明的白底（夜间是 #000000cc）。它要压在正文上面、结果框还会顺着选区弹出来盖到图上，半透明底读不清，所以单独给一个不透明的变量 --color-translater-back：三套亮色皮肤 #ffffff，夜间 #222222（和夜间头部同色）。

实测四套皮肤读 getComputedStyle：.p-translater-bar 和 .p-translater-result 都是 rgb(255, 255, 255)，夜间 rgb(34, 34, 34)；同一页面上 .p-post 仍是 rgba(255, 255, 255, 0.5)，确认只有这两块脱离了半透明那一档。

站名改成 " 自留地 "

个人网站 / personal blog 这个说法换成 自留地，动了三处：

sitename 只在 data-lang="sitename" 上，运行时从 asset/lang/*.yml 取，不进构建产物，所以改 yml 就够；description 是构建期常量，必须重新 hexo generate。

实测：document.title 是 Home / 首页 - takomitkm（_config.yml 的 keywords 里那个 home, 首页, 前缀没动），顶栏 .p-sitename-text 的 innerText 是 takomitkm 的自留地。

默认没声音，不是浏览器里存了什么东西，是自动播放策略。 真人访客的 Firefox 打开这个页面：加载完 3 秒倒计时归零、歌直接开始放，但 是静音的 （muted:true, paused:false），这和 headless 冷 profile 的表现一致。原因在浏览器：页面从头到尾没有被真实点击过，navigator.userActivation.hasBeenActive 是假，Firefox 就不允许未静音自动播放，B 站播放器于是自己把 <video> 挂成静音。浏览器里存的 cookie、历史、媒体参与度（media engagement，浏览器给常访站点放宽自动播放的那套内部计分）只会让策略更宽松，不会让 " 没激活 " 变成 " 有激活 "。 这里更正一次：上一版我写过一句 " 真人浏览器实测默认有声 "，那是把一条指令当成了测量结果，出处是编的，实际方向正好相反。

方向定了，能做的就清楚了：声音不是 " 设 " 出来的，是 " 激活之后重新挂一次 " 拿回来的。同一个 player.bilibili.com iframe，四种挂载路径逐一实测（探针在本地页面直接挂 iframe，input.performActions 造真实点击）：

第三条最关键：不需要销毁重建，只要换 src 重新加载那一个 iframe，声音就回来了。所以 " 要声音 " 这件事不需要访客去找按钮——组件自己在静音挂载时等页面第一次被点，点下的瞬间 play(elapsed())：用本地记的 startedAt 算出已经播了几秒，带着 &t=< 秒 > 重挂同一个 index。之前删掉这套兜底是因为我把 " 默认有声 " 当成了事实，静音兜底就成了反向操作；前提反过来之后它是正着用的，但形态要改：让访客去点一个 " 开启声音 " 等于把浏览器策略的账算到访客头上，现在把它做成自动的，访客点什么都是它，甚至点页面别的地方也算。

顺手把静音参数也试了一遍，只有一个拼法有效：

最后一行决定了 " 放完自动下一首 " 只能怎么做：外层收不到 ended，也不知道实时进度，只能按清单里每条自带的 duration 自己掐表。

会话内固定一首，新会话才随机。 init 拿到清单后先读 sessionStorage 的 biliplayer:index：在且没越界就用它，否则随机挑一首并写回去。上一首 / 下一首 和自动切歌都会把新 index 写回 sessionStorage，所以同一个标签页里刷新始终是同一首，关掉标签页重开才换。存储选择 sessionStorage 而不是 localStorage，是因为要的就是 " 跟着会话走 "，config 那套 localStorage 记忆是给跨会话的偏好用的，不该混。

放完自动接下一首：先是根本没切，查出来是时长造假。 第一版按清单每条自带的 duration 下了一次性 setTimeout，实测在 headless 里用那首 12 秒的能正常切，但真人那边 " 播完不动 "。翻了清单才发现根因：收藏夹接口给的 duration 是 整个稿件 的时长，而多 P 合集的总时长离谱得很——BV18s411o7wn 那条写着 6,854,609 秒（79 天），BV1zx411P7os 是 3,638,302 秒，BV1Ms411m7Pf 是 172,557 秒。嵌进去的是其中某一个 P（&page=< 收藏夹记的那一 P>，实际两三分钟），表却按 79 天去掐，等于永远不会切。清单 993 条里时长超 600 秒的 36 条，30 条是多 P 合集，全部需要按 P 校正。

校正工具是 tools/bili_playlist_fix.mjs：读 bili-playlist.json，逐条请求 api.bilibili.com/x/web-interface/view?bvid=（不带 Origin 就能 200，理由见上面接口那一节），拿 pages[] 里对应 page 的那一段时长替换掉总时长，同时把放不出来的剔掉。第一次只挑时长超 600 秒的 36 条跑，改了 30 条、0 失败（BV18s411o7wn P2878 6854609 → 1419、BV1Ch411S7HH P198 46340 → 300、BV1NU4y1K72S P66 14816 → 35）；改成全量 993 条之后又发现 69 条 时长不对（不止超 600 的那批，多 P 合集里也有整包几千秒、单 P 三四分钟的），这轮连同剔 12 条一起落盘，清单从 993 变成 981 条，校正后只剩 10 条超过 10 分钟，最长的是 BV1ZS4y1z7gM 单 P 12186 秒。它就地改写 JSON 并记 checked_at；重新导清单之后要再跑一次它。

“为什么不放完就换、非要挂个时间” —— 因为播放器根本不会自己换，而且它连 " 放完了 " 都不说。两条都是实测：想让它接管歌单，把收藏夹 ID 按 mid= 传给 player.bilibili.com，<video> 加载的是播放器自带的 error.mp4（17 秒，标题 “External Player - 哔哩哔哩嵌入式外链播放器”），mid 根本不是它的播放列表参数；想让它至少放完同一个稿件的下一 P，拿一个 66 P 合集挂 &page=65 从头等到尾（用 &t=185 快进到片尾也验过一次），P65 结束后停在 " 进入哔哩哔哩，观看更高清 / 重播 "，不会滚进 P66。加上顶层 message 监听收到 0 条——放完既不接、也不通知，那 " 什么时候算放完 " 就只能外层自己算，而算的依据只能是清单里那条时长。这也回答了 " 时长测了有什么用 "：时长不是我去测出来的额外指标，它本来就随清单一起给，我要做的是把接口给错的那个值改成对的，否则切歌点会被推到 79 天以后。

时钟本身也从 " 一次性 setTimeout" 改成 记一个截止时间 deadline、每 2 秒对一次表：后台标签页的定时器会被浏览器钳制，一次性长定时可能被整体推迟，而对表最坏只迟一个 tick。play(at) 里 deadline = now + (duration - at)*1000 + 4000（4 秒给起播缓冲，宁可晚切不要漏切），带 &t= 重挂时按剩余时长重算，所以第一次点击换来的有声续播也不会把切歌点推后；stop() 清掉这个 interval。仍是纯本地时钟——播放器里手动拖进度条外层不知道，切歌点会偏，没有 postMessage 这就是上限。

移动端不出这块面板。 biliplayer.init() 只写在 main.js 的 desktop 分支里，移动端那条 checklist 根本没有 biliplayer 这一项，所以面板在手机上既不初始化也不显示（模板自带的 .p-biliplayer HIDE 永远不会被去掉）。biliplayer.ready() 虽然在完成块里无条件调用，但 element 为 null 时 start() 直接 return，无副作用。

实测（headless Firefox，本地 public/ 起服务；切歌这类要等真分钟数的，临时把 public/data/bili-playlist.json 换成三首的定点清单——第 0 首是那首 12 秒的，验完再还原）：

失效条目：运行时全瞎，那就构建期逐条问。 清单里本来有 6 条标题写着 " 已失效视频 "，随机到就是黑屏，而外层跨域读不到 iframe 内部、播放器又不 postMessage，运行时没有任何一条渠道知道 " 这一条放不出来 "（x/web-interface/view 带本站 Origin 也是 403，连问都问不到）。能做的只有把它挪到构建期：tools/bili_playlist_fix.mjs 现在不再只挑时长异常的，而是把 993 条 全部 过一遍 x/web-interface/view（不带 Origin 就能 200），凡是回非 0 内容状态码的一律不进口袋。为什么 " 非 0 就剔 " 是站得住的——把这几种码各自挂进嵌入播放器实测，<video>.currentSrc 读到的都是同一个东西：

也就是说 " 失效 " 不止标题那 6 条：error.mp4 是播放器自己塞进来的 17 秒短片，标题看着完全正常、code 非 0 的条目同样是在放这 17 秒，而外层按清单时长（比如 1419 秒）去掐表，等于黑屏播二十多分钟还不切。跑完一轮的结果：993 → 保留 981，剔除 12（6 条 -404、4 条 62002、2 条 -403，其中 6 条标题一切正常），0 条拿不到结论、也没触发限流中止。工具里 -352/-412 这类风控码单独算，连续超过 20 条就中止且不落盘，避免把 " 我被打穿了 " 误判成 " 她的歌都失效了 "。

剩下唯一做不到的是 两次构建之间新失效的歌——那个窗口里它还是会播 17 秒错误短片然后按表切走，因为运行时确实没有任何信号。刷新频率就是把这个窗口压小，成本是一次导出 + 一次全量核验（993 条请求，实测约十几分钟）。

首访默认是 " 开 "，但存储里的默认值是 " 关 "。 common/config.js 的 autoplay 出厂值是 false，直接 config.get('autoplay') 的话新访客永远进不了倒计时。判定改成 config.has('autoplay') ? !!config.get('autoplay') : true——has() 读的是 configChosen 那个 " 访客真的点过哪些键 " 的数组，见下面记忆规则一节。applyConfig() 里回填那行也同步改成 settings.set('autoplay', biliplayer.enabled())，否则界面开关和实际行为会反着。

倒计时必须等加载完成，否则按钮点不动。 组件初始化时清单可能还没回来、页面还在启动遮罩下面，所以倒计时由两个条件共同决定：ready()（final_load() 完成块里、applyConfig() 之后调）置 pageLoaded，清单到手置 list，两边都齐才 begin()；先到的一侧先让遮罩显示 waiting 状态。之前没做这个门控时实测倒计时期间 document.elementFromPoint() 返回的是 DIV.m-spinner active，加载转环盖在面板上，取消按钮的点击全被它吃掉。

两个纯样式 / 模板的坑：.HIDE {display: none !important} 优先级高于组件一切规则，早期把 " 播放 " 按钮写成带 HIDE、又想靠 JS 去掉，结果它永远不出现——改成按钮不带 HIDE，由遮罩的模式 class（.manual / .counting / .waiting）决定显示哪块；另一部分是 common/lang.js 在运行时才把 [data-lang] 的文字填进按钮，填之前按钮是空内容，实测 getBoundingClientRect() 高度为 0（[1031, 469, 48, 0]），看着在、点不到，所以给面板按钮加了 min-width: 3.5em; min-height: 1.9em。

顺带修了一次白屏。 排查上面那条 " 脚本完全没跑 " 时发现：frame.ejs 里引汇文明朝体的 <link rel="stylesheet">（cn-font.claude-code-best.win）只要没完成，未加载好的外链样式表就会阻塞它后面的脚本执行，ES module 也一样被压住，于是 main.js 整条启动链不跑，.m-launch 遮罩永不撤下——页面全白但 DOM 是好的。代理不通那个域名时必现。改成 media="print" onload="this.media='all'" 让它非阻塞加载，再加 <noscript> 里的原始链接兜底。

Service Worker 那边给 bilibili\.com|bilivideo\.com|hdslb\.com 补了路由；/data/*.json 落在最后的 /\// networkFirst 规则里，不需要加 precache。

访客能改的样式，和它们存在哪里

全站一共五组 " 访问者可以自己调 " 的东西，全部落在 localStorage，读写都在 source/asset/js/common/config.js：

其中皮肤、transfigure 和划词翻译是桌面端专属：settings.styl 在 @media (max-width: $app_mobile_width) 里把 transfigure display none（看板娘在手机上要跟页面分开、不能压半透明），translater.styl 让整条划词条在移动端不显示，applyConfig() 里包皮肤那段走 util.runOnDesktop。hideplayer 和 autoplay 现在两个宽度都有——播放器在手机版也被搬进一言面板里（见上面 " 播放器 " 一节），所以这两项跟着放开。

记忆规则：访客选过的优先，没选过的才用默认

applyConfig() 在页面所有部件加载完之后跑，把 config.get(...) 的值逐个 set 回界面。原来这里有个坑：skin.set() 和 settings.set() 会回头调用自己注册的 onclick 监听，而监听体的最后一句就是 config.set(...)——于是 第一次访问、还没等人动手，整套默认值就被当成 " 访客的选择 " 写进了 localStorage。任何 " 访客有没有选过 " 的判断都会因此失真，所以 skin.js / settings.js 的 set() 多了一个 byUser 参数，只有点击路径传 true，监听里改成 byUser && config.set(...)。

光堵这一层还不够：config.set() 写的是整个合并后的对象，访客只要改过任意一项（比如只选了翻译语言），skin 的默认值也会被一起存进去。所以 " 选没选过 " 不能看 config 这个键——config.js 里另开一个 configChosen 数组，只在真正发生写入时记下键名，config.has(key) 读它。

自动切 colorful 就建立在这条判断上：加载完成时如果 config.has('skin') 为假，3 秒后执行 skin.set('colorful')；这 3 秒里访客自己点了皮肤，skinPicked 标记会让这次定时器作废。自动切换本身 不写存储，所以下次来还是 "3 秒后变彩色 "，除非他自己选过。

GitHub 图标不参与彩虹色

colorful 皮肤做的事是 colorIcons.run()：把所有 i.fas / i.fab / i.far 按 color_1…color_5 轮转上色，color_3 就是那个 #00CC99。skin.js 里加了一张排除表 exclude: 'i.fa-github'，命中的直接跳过，连 data-colored 标记都不打。实测 colorful 皮肤下联系方式里的 GitHub 图标 class 仍是 fab fa-github fa-fw，getComputedStyle().color 是 rgb(0, 0, 0)。

上面这段是当时那条 <i class="fab fa-github"> 的实测。联系方式的 GitHub 图标后来换成了外链 <img>（见 " 侧栏：slogan 改四行、B 站进联系方式 " 一节），<img> 本来就不在 colorIcons 的选择器里，所以这张排除表现在选不到任何节点——它没有副作用，留着没删，但别再把它当成 "GitHub 图标为什么是黑的 " 的答案。

划词翻译换成谷歌公共接口

原来是 util.baiduTranslate，走百度翻译开放平台的 JSONP，要 appid + appkey 签名（密钥用 decodePass 从 api/site.json 的 baidu_translate.pass/pointer 还原）。这套凭据从来没填过——site.json 里那两个字段是空串，所以划词翻译此前一直是 " 点了没结果 "。

现在换成 util.googleTranslate，用 Chrome 内置翻译自己在调的那个免密钥接口 https://clients5.google.com/translate_a/t?client=dict-chrome-ex&sl=auto&tl=< 目标 >&q=< 文本 >，返回 [[" 译文 "," 识别到的语种 "]]，逐段取第 0 个拼起来。界面里的 zh/en/jp 映射成谷歌的 zh-CN/en/ja。

浮动条上那个标题写明是谁在翻：asset/lang/zh-cn.yml 的 translater.to 改成 " 划词翻译（谷歌）"、en.yml 改成 HIGHLIGHT 'N TRANSLATE (Google)。这两个 key 由 translater.ejs 里的 <span class="p-translater-bar-to" data-lang="translater.to"> 在运行时填（build-time 和 runtime 两份模板同一个标记），所以只改 yml 就够，不用碰模板和 JS；hexo generate 会编译成 public/asset/lang/{zh-cn,en}.json，实测 480px 移动端下条宽 260px、没有横向溢出。

三条要记着的：

1. 免密钥不等于免依赖。谷歌这套接口没有 SLA 也没有配额承诺，translate.googleapis.com 那条对数据中心出口 IP 直接 429，clients5 只是另一条暂时能用的。
2. 大陆访客不开代理就用不了，这是网络事实不是代码问题（直连 8 秒无响应）。失败时结果框给 TRANSLATE FAILED / 翻译失败：…，并有 8 秒 AbortController 超时兜底，不会让顶部转环一直转。
3. 译文 先转义再进 innerHTML（escapeHtml），机翻结果里带尖括号也不会被当标签解析。

顺带清掉的依赖：plugin/md5.min.js 只被百度签名用到，util.js 里 import fetch（那个 JSONP 装载器）也只有它在用，两个引用都删了；文件本身后来也删了，理由见下。

那个文件是什么：一份 MD5 的实现，MD5 是把任意长度输入压成 128 bit（写成 32 位十六进制）的摘要算法，这里被打包成 ES module（export default o=>{...}，3478 字节）。主题用它算百度翻译开放平台的请求签名 sign = md5(appid + 原文 + salt + appkey)——那个接口要求把签名放在 query 里，密钥不能直接发出去，所以必须有本地 MD5。换掉百度之后整条签名链没了，全仓库（排除 public/）对它的引用数是 0。它虽然没人 import，但因为在主题的 source/asset/ 下，仍会被原样复制到 public/（约 3.4KB）白占一个上线文件，所以直接删掉；同批删除的还有上一节列的 APlayer/Meting 那几个插件文件。

侧栏署名改成 TaKoMi

只改 asset/lang/zh-cn.yml 和 en.yml 里的 brand.name 两行，中英文共用同一个显示名（实测首页 .p-brand-name 的文本是 TaKoMi）。根 _config.yml 的 title: takomitkm 和 lang 里的 sitename: takomitkm 的自留地 没跟着动——那两处是站点标题（浏览器标签、顶栏站名、<meta> 读它），不是署名，要不要一起换是另一件事。

时空胶囊（已删除）：让单篇文章自己指定链接

10-04 定的最后一条就是 " 算了胶囊不要了，删了 "，所以 themes/mustom/scripts/$permalink.js 这个文件已经删掉了，capsule: 这个 front matter 开关现在不存在、写上也无效。这一节整段留着，因为两件事还活着：一是下面那个 urlOf() 的坑和它的两处防护（hexo 自己就认 front-matter 里的 permalink，不需要胶囊这套也能踩出双斜杠）；二是探针记录在 _tmp/ 胶囊探针.md，要复跑放回 source/_posts/ 就行。

他的文章链接是 /time-capsule/YYYYMMDD-slug/ 这个形态（例：https://blog.douchi.space/time-capsule/20261003-maple-pass/），日期在 URL 里、尾段是自己起的短名，比 /posts/< 一串数字 >/ 好认。当时做成 front matter 开关：

1
2

capsule: maple-pass      # 这一篇用 maple-pass
capsule: true            # 或者退回用文件名（slug）

规则只有一行，写在当时的 themes/mustom/scripts/$permalink.js（现已删除）：__permalink = 'time-capsule/' + date.format('YYYYMMDD') + '-' + slug + '/'。没写 capsule 的一篇都不受影响，照旧走 posts/:abbrlink/。

挂在 before_post_render 而不是再注册一个 post_permalink 过滤器，是因为 hexo 的 post.path 虚拟属性把整篇文档交给 post_permalink 链，内置那条（node_modules/hexo/dist/plugins/filter/post_permalink.js）第一个分支只认 data.__permalink，而链上后一个过滤器拿到的是上一个返回的 字符串，已经看不见 front matter 了。before_post_render 拿到的就是 Post 文档本身（plugins/filter/before_generate/render_post.js 里 post.render(post.full_source, post) 之后才 post.save()），在这儿写 __permalink 正好赶在路由之前，也不用像 hexo-abbrlink 那样把生成的字段回写进 md 文件。

连带的坑必须记：__permalink 分支出来的 post.path 是 带头斜杠 的（内置过滤器强制补的），而 restful 插件拼 URL 用 cfg.root + post.path，cfg.root 已经带 尾斜杠，于是 api/posts.json、api/search.json、每篇的 api/posts/<abbrlink>.json 和 sw.js 的 precache 列表里全成了 //time-capsule/…——浏览器把双斜杠开头当协议相对 URL（去解析主机名），点开是 404。修法是两处各加一个 urlOf()（root 去尾斜杠 + path 去头斜杠再拼）：scripts/plugin/hexo-generator-restful/lib/generator.js 里 14 处，scripts/renderer/$template.js 的 precache 里 2 处。

实测：探针文章（capsule: probe-run）生成出 public/time-capsule/20261004-probe-run/index.html，上面四处 URL 都是单斜杠。探针文件本身已移出 source/_posts/（留在 _tmp/ 胶囊探针.md，要复跑放回去即可），移出后重建，api/posts.json 三条 URL 逐条比过，老的 /posts/:abbrlink/ 一个没变。

文章页顶部那行 " 本文总计 X 字 "

他的写法是 <blockquote class="book-hint info"> 本文总计 5.75k 字, 阅读约需要 14 分钟 </blockquote>。数字口径他没写，但两篇实测样本能对上一个很朴素的算法：5750/400 = 14.4 → 14、3430/400 = 8.6 → 8，也就是 分钟 = floor(字数 / 400)，字数保留两位小数写成 k。本站照抄这两个参数：generator.js 里的 hintOf(content) 产出 hintWord = (chars/1000).toFixed(2)+'k'、hintMinute = Math.max(1, Math.floor(chars/400))。chars 用主题自带的 $count（stripHTML 之后中文按字、英文按词数），跟 Hugo 的 .WordCount 是同类口径，所以数量级能直接跟他比。

字段只落在两处 JSON：api/posts.json（列表，热力图读它）和每篇的 api/posts/<abbrlink>.json（文章页读它）。这里我错过一次：一开始以为 api/posts.json 是那个叫 postMap 的函数产出的，其实 postMap 喂的是分类 / 标签 JSON 里的 postlist，真正产出 api/posts.json 的是另一个 postlist = posts.map(...)——漏加的话热力图拿不到 chars，整块面板是空的。反过来，分类 / 标签那份加了也没人读（全仓库对 hintWord/hintMinute/.chars 的引用只有 heatmap.js 和 post.js 两处），所以那处最后又删掉了。

文案在 lang/*.yml 的 post.hint，两个 %s 由 common/lang.js 按 data-lang-params 逐个替换，post.js 填文章数据时 setAttribute('data-lang-params', JSON.stringify([hintWord, hintMinute]))。模板里不要预先写一个空的 data-lang-params：这个属性只要存在，lang.js 就拿空数组去替换，非文章页（首页、归档）上那行会留下半截 %s。实测文章页文本 本文总计 0.61k 字, 阅读约需要 1 分钟、属性 ["0.61k",1]；首页那行是空文本，且父级 .p-post 为 display: none。样式沿用他的类名 book-hint info，左边框 #7aa874、底色 rgba(122,168,116,.1)。

侧栏产量热力图

做法来自他那篇 hugo-blog-heatmap：echarts（Apache ECharts，开源图表库）的 calendar 坐标系配 heatmap 系列，一格一天，颜色深浅 = 当天写了多少字。他用 Go 模板在构建期把数据直接写进 <script>，本站的正文数据本来就只存在于 /api/*.json，所以改成运行时从 /api/posts.json 取 chars 按天求和。echarts 走 jsdelivr CDN（cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js），要画的时候才注入 <script>，不进仓库。

位置：桌面在 .m-aside 里紧跟 biliplayer（歌单）之后，手机在 .m-drawer 里 panels 之后、.m-drawer-mark 之前，也就是抽屉最后一块。markup 写两份（layout/_partial/_part/heatmap.ejs 和 source/asset/part/heatmap.ejs）是主题 parts 机制的要求，不是重复代码；source/asset/part/*.ejs 会被 scripts/renderer/$template.js 自动列进 precache，所以新加这块不用动路由表。

main.js 里它 不进 checklist（开站动画要等的那份清单）：它依赖两个外部资源，任一个取不到都只该让这块面板空着，不该把整站卡在遮罩后面。

副本只画可见的那一份：document.querySelectorAll('.p-heatmap-chart') 逐个过，clientWidth === 0 的跳过（跟 panels.js 同一个办法）。实测桌面下 aside 那份 display:block, boxW 254、drawer 那份 display:none, boxW 0，430px 宽时正好反过来。画几个月按面板宽度算：Math.floor(width / 48) 夹在 3–12（一周约 48px），254px → 5 个月，实测区间 2026-05-04 ~ 2026-10-04。

图例为什么收起来

他教程里那版 visualMap 是 showLabel: true + itemGap: 20，那是给 600px 宽的示例容器写的；侧栏面板只有 254px，四条带数字区间的图例（10.75 - 21.50 这种）横排下来直接溢出面板左边界，截图上数字被裁掉半截。他自己线上那份打包脚本里本来就把整个 visualMap 收起来了（show:false），颜色分档照常生效、具体数字交给 tooltip——所以这里跟线上版对齐，而不是跟教程对齐。

" 收起来之后还分不分档 " 不能靠猜：从 zrender（echarts 底下的画布层）的 displayList 里数填充色，实测 {rgba(243,243,243,.5): 154 个, rgba(122,168,116,1): 1 个}，那 1 个正是 9-27 那天（三篇同一天，合计 42.1 千字，落在最高档）。夜间换挡后底色那 154 个变成 #333、月份标签 #ccc、绿色格不变——颜色每次 setOption 都从 CSS 变量现读，:root 上 class 一变就由 MutationObserver 触发重画。

首绘那一刻 unit()（从隐藏的 .p-heatmap-unit span 取 " 千字 " 两个字）拿到的是空串：common/lang.js 填 [data-lang] 比热力图第一次画要晚。图例既然隐藏了就没影响，tooltip 每次 hover 现读，实测正常。同一个时间差这轮又撞到一次：探针在文案填好之前去量标题栏，读回来 capRect 高度 0、气泡文本空串，看着像 " 出处没挂上 "，等 caption-text.textContent.length > 2 之后再量就对了——量文案驱动的盒子，必须先等文案落地。

面板改叫 " 博客废话产量 "，出处挂在标题行上

他那篇里 option.title.text 写的就是 " 博客废话产量 "（《如何给 Hugo 博客添加热力图》，作者署名椒盐豆豉），名字照抄他的：heatmap.caption: 博客废话产量。英文那档我意译成 WAFFLE OUTPUT，这一条是我的措辞、不是他的；她下一轮回 "WAFFLE OUTPUT 可以 "，这条就此定稿。

出处注释挂在同一行标题上：.p-heatmap-caption 里加一个 <em class="p-heatmap-tip" data-lang="heatmap.source">，lang/*.yml 的 heatmap.source 直接写了一段带 <a href> 的 HTML——common/lang.js 对既没有 data-lang-titled 也没有 data-lang-placeholdered 的元素走的是 innerHTML = '<span>'+text+'</span>'，所以链接、<br> 这类标记能用（侧栏品牌卡那一节用的就是同一个口子）。这些串是构建期从 yml 编进 asset/lang/*.json 的，不是访客输入，innerHTML 在这里不引入注入面。

弹出的做法抄页脚那三个气泡：:hover、:focus、.on 三个选择器各写一遍全名（写成 &:hover, &:focus, &.on 再嵌子元素，编译出来是一条裸的 .p-heatmap-tip，会把默认隐藏那条盖掉，这个坑之前踩过）。标题栏加 tabindex="0"，触屏那一下由 heatmap.js 里 .p-heatmap-caption 的 click 切 .on、并且先把别家开着的关掉。跟页脚那版有两处不一样：气泡朝 下开（面板贴在侧栏最底下，往上开会顶出可视区）；宽度不用页脚的 min(90vw, 22em)，改成左右各钉在标题栏内边距上、让文本自己折行——第一版按视口算，量出来气泡右边溢出面板 25px、压到正文上，改完是 -9px（在面板内）。

第一行为什么右移了一格（这一条已回退）

echarts 的 calendar 坐标系是 一列一周、一行一个星期几，七行从上到下按周日排。rangeOf() 的起点是 " 今天往前推 N 个月 "，落在周中（10-04 往前推 5 个月是 5-04，周一），那一列的周日格在区间之外、画不出来，于是第一行整体缺一个格、看着就往右挪了一格。上一轮的修法是起点再退到所在那一周的周日：start.setDate(start.getDate() - start.getDay())。

对照实测（_tmp/roundL_ui2.mjs：从 zrender 的 displayList 里按 shape.y 分行、取每行最小 shape.x）——把起点手动改回 " 不回退到周日 " 的那个日期，第一行 minX 是 17、其余六行是 6，正好差一格（格子加间隔约 11px），跟她看到的现象对上；改完之后七行 minX 全是 6。

她下一轮的原话是 " 热力图回退到上次方案 "，理由没给，所以这里只记事实：那句 setDate 已经删掉，起点回到 2026-05-04，第一行重新缺周日那半格。上面这组 17 / 6 的对照数字留着——故障成因是核实的（不是猜的），撤掉它是取舍，不是 " 当时判断错了 "。代码里在 rangeOf() 上面写了一句注释记这件事，别再 " 顺手修好 "。

随机文章入口顶掉了那个二维码钮

他那篇 hugo-random-post 的做法是构建期把全站 URL 数组写进脚本，前端随机取一条跳转，链接尾上带 ?utm_source=random（这样他自己看统计能认出 " 闲逛 " 进来的）。本站不再造一份构建期数组：/api/posts.json 本来就是全站文章 URL 索引，点了才取一条。

入口位置：左下角那个浮框上原来的 fas fa-qrcode color_3 圆钮（.p-adframe-qrcode）整个换成 .p-adframe-random（fas fa-random），文案键 adframe.random，中文 " 闲逛 "、英文 feeling lucky，都是他的措辞。FontAwesome 5.12 free 里有 fa-random（码点 f074），没有 fa-shuffle，别照别的图标库的名字写。圆钮上必须 e.stopPropagation()：.p-adframe 整块挂着 " 点一下开关浮框 " 的监听，不挡掉的话跳转之前会顺带把框开关一次。

这条改动换来的代价当时就说清楚了，是设计如此不是漏了：那个框只有两个状态——收起来时只剩圆钮（CSS .close 下 .p-adframe-close 和 .p-adframe-content 都 display:none），展开时圆钮本身 display:none、露出图片和右上角的叉。圆钮改管随机之后，收起状态下 再没有任何把手能把它打开，框的状态存在 localStorage 的 adFrameState，要恢复只能清这个键。首访默认是展开（isClose 出厂 false），所以访客第一次仍会看到那张本站徽标（icon.medium.png），点叉之后就永久收成随机钮。这个框只在桌面端存在（@media (max-width: $app_mobile_width) 里整个 display:none）。

她看到这条之后的处理是 " 没有办法打开就直接删了 "，所以同一轮里那个浮框已经整个拆掉：.p-adframe-close、.p-adframe-content 两块 markup、adframe.js 里读 / 写 adFrameState 的那套开关、adframe.styl 里 .close 门控和那两个盒子的规则、_config.yml 里的 adframe.icons.close 和 adframe.ad 全删了，左下角只剩 .p-adframe-random 这一个圆钮（.p-adframe 还是 position:fixed 的老位置、老尺寸，视觉上跟收起态一模一样）。icon.medium.png 这个文件留着，它同时是 favicon.medium、顶栏站名的图标在用；老访客 localStorage 里那个 adFrameState 键没人读了，不用清。圆钮上那条 e.stopPropagation() 现在其实没有东西要挡了（整框的点击监听已删），留着是防以后又在这块挂监听。

再下一轮她追问 " 两处随浮框留下的死物删了 "，那两处是：layout.styl 里 gray 皮肤（白天不透明那档）给 .p-adframe-content 补的那条 box-shadow——那个盒子已经不存在了，同一块里开头的 .p-adframe-random, .p-goingto-top, .p-goingto-bottom, .p-xcanvas 还是活的，只删了 .p-adframe-content 那两行；另一处是 adFrameState 这个 localStorage 键，代码里已经没有一行读它或写它（grep -rn adFrameState 在 themes/ 下只剩一处注释和这篇文章），所以 没有代码可删，只剩老访客浏览器里那个没人读的键，动不了也不该动（清它得访客自己清）。

这条删除被覆盖过一次，值得记下来：另一条并行改动（宽屏 fluid 布局）在 21:54 把 layout.styl 整文件提交，我 19:30 删的那两行被它的版本带了回来——git reflog 里能看到那次 commit，git status 显示它还没推。发现后按同一位置再删一次，并在合并后的构建产物上重跑探针：public/asset/css/style.css 里 p-adframe-content 出现 0 次，首页和文章页 DOM 里 .p-adframe 只有 1 个子节点（那个随机圆钮），控制台无报错。宽屏那套改动没动侧栏宽度，热力图面板实测仍是 254px、仍画 5 个月，第一行 minX 17 / 其余 6 那组数字原样成立。

实测：点圆钮后 location.href 变成 /posts/1501581470/?utm_source=random，页面里挂的 window.__errs 为空。

划词翻译那条栏：语言组另起一行，英文标签缩短

栏里五块内容（复制 / 划词翻译（谷歌） / 中文 | English | 日本語 ）原本全是 float: left（ 复制 是 float: right），排成一行，装不下才靠自动换行折。英文那条标签 HIGHLIGHT 'N TRANSLATE (Google) 太长，一行的形状就保不住，中英两种界面下换行的位置还不一样。改成显式断行：translater.styl 里给 .p-translater-bar-zh 加 clear: left，语言那一组自己占一行，上面那行只剩标签和右边的 " 复制 "；自动换行退回成窄屏兜底，不再是决定形状的那一步。文案同步缩短成 TRANSLATE (Google)（lang/en.yml 的 translater.to），中文那条没动。

clear 加在 zh 上而不是包一层 <br> 或改 flex，是因为这条栏的五个块都在同一个父级里浮动，clear: left 是这套布局里唯一 " 从这里起另起一行 " 的写法，改动面最小；父级 .p-translater-bar 有 overflow: hidden，两行浮动的盒子高度照样被包住，不需要额外清除浮动。

实测（_tmp/roundL_ui3.mjs：把 asset/part/translater.html 那份 markup 插进页面、按 asset/lang/*.json 填好文案，在 640 / 420 / 300px 三种容器宽度下量每块相对栏顶的偏移）：中英文两档、三种宽度下都是同一个形状——第 0 行 to（左）+ copy（右），第 42px 行 zh | en | jp，栏高恒 84px（两行）。

正文表格底色从纯白降到 70% 不透明

表格行的底色不是主题写的，是打包进来的 asset/css/_plugin/github-markdown.min.css：.markdown-body table tr{background-color:#fff}、tr:nth-child(2n){background-color:#f6f8fa}。那是给纯白页面写的值，本站白底只有 50% 透明度、colorful 皮肤还压着背景图，表格两行就成两块死白。改成 #ffffffb3 / #f6f8fab3（alpha b3 = 70% 不透明），写在 layout.styl 的 .markdown-body table tr 上。

两条边界要说明白。一是 代码块不会跟着变 ：hexo 的代码块本身就是 figure.highlight > table > tr，会被这条规则打到，但 _plugin/highlight.styl 里早就有 .markdown-body .highlight table tr{background-color:transparent}，特异性 (0,2,2) 高于这条的 (0,1,2)，所以代码块一直是透的、这次也还是透的。我一开始没查到这条，写了一组 " 把代码块按原值钉回 #fff" 的覆盖规则，那等于把主题原有的透明底改成了不透明白，构建完在 public/asset/css/style.css 里看到两条同特异性的规则打架才发现，那组规则已删。二是 夜间不受影响：:root.night .markdown-body table tr 那组用 CSS 变量，特异性更高、排在这条之后。

实测（_tmp/roundL_ui.mjs 读 getComputedStyle）：白天普通表格奇偶行 rgba(255,255,255,0.7) / rgba(246,248,250,0.7)，代码块行 rgba(0,0,0,0)；夜间 rgba(0,0,0,0.8) / rgb(51,51,51)，跟改动前逐字一致。

robots.txt：线上那份不改，只放一份备用的

她的原话是 " 本站 robots.txt 不要换，放一份备用 robots 里面写着因为现在是放在 GitHub Pages 所以不用防爬虫 "。所以线上一个字没动：themes/mustom/source/robots.txt 还是那 13 字节的 User-agent: *（站点根 source/ 下没有第二份），构建产物 public/robots.txt 逐字同一串、末尾没有换行——按 REP（Robots Exclusion Protocol，robots 排除协议）这等于对所有人放行。

备用那份写在 仓库根 的 robots.standby.txt：hexo 只把 source/ 和主题的 source/ 往 public/ 里拷，仓库根的文件不进产物，所以它既是 " 拿来即用 " 的完整文件，又不会被发布上线（实测这次构建后 public/ 里 robots* 只有那一串 13 字节的）。文件头部写的就是她给的理由，并把它拆成三条具体的：① GitHub Pages 是静态托管，抓取打在 GitHub 的边缘节点上，不是自己的服务器，防爬虫的实际收益（省带宽、防过载）在这个形态下不存在；② 这个仓库本身是公开的（api.github.com 查 takomitkm/takomitkm.github.io 得 private:false），正文 markdown 就跟着 source/_posts 一起可读，而 robots.txt 是给守规矩的抓取器看的 声明、不是访问控制；③ 改成屏蔽版会牵动 Google/Bing 需要的 User-agent: * 放行状态，属于只有代价没有收益的那类改动。文件里 6 条 A 级规则是解开注释的状态（GPTBot、Google-Extended、Google-CloudVertexBot、ClaudeBot、Amazonbot、Applebot-Extended），8 条 B 级和所有 C 级只作注释说明。

一处公开更正：这一条我一开始交付过两个错数——把 A 级说成 "18 个 token / 8 家 "，并把 CCBot 当成 A 级写进生效块。判据混淆了：那 18 个是 " 名字在厂商自己页面上逐字出现 "，而 A 级要求的是 " 厂商还明说它用于 AI 抓取 / 模型训练 "。按后者重数，A 级 6 条；CCBot 降回 B（Common Crawl 那页确实给了现成的 User-agent: CCBot + Disallow: / 和 UA 串 CCBot/2.0，但它自述的用途是公开语料库，那一页没写模型训练）。nixCraft 那份 17 个名字的清单里只有 4 个够得上 A，另外两处与他相反的说法也记在核对文档里（Applebot 应为 Applebot-Extended；"Common Crawl 不提供 CIDR/IP 段 " 与厂商页那句 “CCBot is now run on dedicated IP address ranges with reverse DNS” 相反）。取证与逐字引文在 S:\apps\llm\agentwork\robots-ai\，不进博客仓库。

死物普查：除了那两处，还有没有别的

她问 " 还有别的死物吗 "，所以跑了一遍普查。三条线，脚本 _tmp/deadcss.py、_tmp/deadscan.py、_tmp/deadscan3.py（v3 修了 v2 的两处假阳性），语料是构建产物 + 主题模板 /JS/ 脚本 + 两份配置；_tmp/roundM_ui.mjs 是无头 Firefox 那头的复核，本地起 python -m http.server 服务 public/，不碰线上（碰线上会给不蒜子计数）。

能删的只有一类：5 张没人引用的图 ，合计 125,513 字节——asset/img/author.large.png 39,145、author.small.png 25,293、qf3cu.temp.bw.png 25,718、yao.large.png 32,316、icon.large.png 3,041。其中 author.small（_config.yml:18）和 favicon.large（:15）是 " 两头都空 "：模板里没有任何一处读 theme.author.small / theme.favicon.large（grep 无命中），产物里也没有这两个文件名；剩下三张连配置都不挂，qf3cu.temp.bw.png 是那张黑白中间稿（在用的是 qf3cu.temp.png 和 qf3cu.huaji.png）。 但它们不占访客流量：public/sw.js 的 precache 清单里 /asset/img/ 命中 0 次，这 125KB 只占仓库和 public/ 的体积，删不删是整洁问题不是性能问题。

两处假阳性要说出来，因为它们差点被写成 " 死代码 "。一是 share.min.css 那 15 条 .icon-qq / .icon-weibo / .icon-douban 规则：静态普查判它们孤儿，是因为 socialShare.min.js 用 "icon-" + 站点名 拼类名，字面量根本不在源码里；探针在文章页读到 typeof window.socialShare === 'function'、.p-post-share 节点 1 个，说明这套是活的。二是普查第一版报的 8 个 " 死配置键 "（about、live、short_name、start_url、theme_color、background_color、orientation、sizes）：menus 的键名是数据驱动的（模板按 map 迭代，不会逐字写出 about），manifest 那 6 个是插件整块原样拷进 public/manifest.json 的——把生成物也当语料之后，112 个键里 死键 0 个。

剩下的孤儿类都是 " 条件触发 " 而不是死代码：_plugin/highlight.styl 里的 gist-file/gist-data/line-numbers 和 perl/coffeescript/hexcolor 那批，只有正文真插 gist 或用了那种语言才出现；_part/recentposts.styl:16 的 .footnote-ref 只有正文有脚注才出现；_common/color.styl:170,174 的 .color_2/.color_4 是主题自带五个配色工具类里恰好没人用的那两个（.color_3 在随机钮的图标 markup 里）。github-markdown.min.css 编译进 bundle 后仍留着 46 条 .pl-*（GitHub 语法高亮 token 类）——本站正文高亮走的是主题自己的 highlight.styl，这批确实是白带的字节，但那是 vendored 文件整体，拆它等于改第三方文件。

结构层面查过没问题的：内联副本 layout/_partial/_part/*.ejs 与运行时副本 source/asset/part/*.ejs 一一对应、没有落单，每个 js/part 模块都有 markup、每份运行时 part 都在 precache 清单里。

最后一处按 " 代码全保留 " 的口径不算死物、但数出来给她看一眼：main.js:1-2 无条件 import 并在 :44 起调 _run_AV() / _run_Valine()，av-min.js 142,311 + Valine.min.js 126,335 = 268,646 字节，评论没开也是每页抓（探针在首页 performance.getEntriesByType('resource') 数到 50 个 JS 请求，这两个都在里面）。这是上游主题原本就有的写法，不是这几轮改出来的；要动就是 " 没开评论就不 import"，那属于改上游行为，等她点头再说。

部署链路

git push 之后由仓库里的 deploy workflow 构建并发到 Pages，不需要任何个人访问令牌，也不需要把本地 public/ 传上去。本地推送走代理：git -c http.proxy=http://127.0.0.1:7897 -c https.proxy=http://127.0.0.1:7897 push origin HEAD。

PWA 这块：正文和列表都是运行时从 /api/*.json 取的，而 sw-toolbox 在 activate 时会清掉运行时缓存，所以页面 HTML、/api/site|posts|tags|categories|search.json、每篇的 /api/posts/<abbrlink>.json、每个 /api/pages/<name>.json、以及 /asset/part/*.html 必须走 precache 才能在离线时打开——这些列表写在 scripts/renderer/$template.js 里，加新页面时构建会自动带上。文章的固定链接是 /posts/:abbrlink/，只靠 front-matter 里的 abbrlink，所以 改 md 文件名和标题不会改 URL；曾经有的那个例外（写了 capsule: 的走时空胶囊）已经删掉了，见上面 " 时空胶囊（已删除）" 一节。

怎么验的

截图核对用 _tools/ffshot.mjs：WebDriver BiDi 直连一个 headless Firefox，参数 --url --out --profile --wait --size --eval --navwait --ua --proxy。三个非默认项是补的：--navwait none 用于 " 页面里挂着流媒体 iframe 时 complete 永远不触发 " 的情况，--ua 通过 general.useragent.override 首选项改 UA，--proxy 给 BiDi 会话设 network.proxy.*（headless Firefox 不吃系统代理，测谷歌必须带）。退出前改成先调 browser.close 再 kill：只 kill 的话 localStorage 来不及落盘，跨启动的记忆测试会全假；即便如此，写入之后仍要在 eval 里 await 几秒等它 flush。样式和页内脚本改完要 hexo clean && hexo generate 才会落到 public/，光改文件不看构建产物等于没验。这次给 .p-hitokoto-from 加 z-index 时增量 hexo generate 只重写了 17 个文件、连 public/asset/css/style.css 的时间戳都没动，新规则完全没进去，clean 之后才出现——别信增量构建。

" 这块底色是不是连续的 " 不能靠肉眼看缩略图：用 --eval 取 getBoundingClientRect() 量盒宽，再把截图按 4 倍 NEAREST 放大、用 PIL 沿某一行逐列读亮度，看框内有没有哪一列掉回框外图片的亮度——这次就是这样才量出旧实现名字和 」- 之间 6.667px 没涂。另一个坑：eval 里 classList.add('night') 之后立刻读 getComputedStyle 会拿到换肤前的颜色，哪怕中间 await 了两帧 rAF 也一样，得再 setTimeout 400ms 让主题的 CSS 变量落地，否则 " 夜间底色不对 " 是假的。

验 iframe 里的播放器不能在主文档里 document.querySelector('video')——那样永远拿到 null，会误判成 " 根本没播 "。WebDriver BiDi 的 browsingContext.getTree 把子框架放在每个 context 的 children 里（不在顶层那个扁平数组里），必须递归下去，再 script.evaluate 指定 target.context 到那个子上下文，才读得到 video.paused / muted / currentTime / duration。同理，el.click() 在 BiDi 里不算真实交互，navigator.userActivation.hasBeenActive 仍然是假，要产生用户激活必须用 input.performActions（pointerMove/pointerDown/Up）。但这条要分清是哪一类结论：headless 冷 profile 在 " 刚打开页面、没人点过 " 这一点上跟真人是一样的，所以它读到的 " 静音起播 " 后来对上了真人侧的反馈；它读不到的那一档是媒体参与度（media engagement，浏览器给常访站点放宽自动播放的那套内部计分），老访客在真浏览器里可能比冷 profile 更宽松。换句话说，冷 profile 能说 " 没激活时会被静音 "，不能说 " 有激活 / 有参与度时会怎样 "。这一轮更大的教训其实跟测试环境无关：我把一条 要求 当成了 测量结果 写进文章还标了出处——凡是自治策略这类拿不到真值的结论，能钉多少写多少，钉不到就直说钉不到，别替读者造出处。

这一轮（改 " 点开才有声 " 和 " 失效自动跳过 "）另有三条。一是 别把浏览器的账算到访客头上：上一版给 " 开启声音 " 做成一个按钮，等于让访客替代码去做它做不到的事——有声自动播放的开关在浏览器手里，按钮只是把成本转移给访客；正确的形态是静音挂载时自己等页面第一次被点，点下那一刻原位重挂接上进度，访客点了什么、点在哪都算。二是 **" 能不能自动检测 " 要先问检测信号存不存在，再问代码会不会写 **：外层读不到跨域 iframe、播放器 postMessage 0 条、探活接口带本站 Origin 又 403，三条都没信号，那 " 运行时遇到失效就跳过 " 就是做不到，硬写只能写成猜测；把同一套判定挪到构建期（那里没有 CORS）立刻就成立了，这也是 " 能不能做 " 的答案要跟着 " 在哪一层做 " 一起给的原因。三是 **" 播放器应该会自己接下一首吧 " 这类想当然必须实测 **：mid= 参数直接落到自带的 error.mp4，66 P 合集放到 P65 结束停在 " 重播 " 不滚 P66——两条都是十分钟能验完的事，不验就会写进文章当常识。

拿不到截图的时候（这个 Firefox 构建的 browsingContext.captureScreenshot 恒回 invalid argument），纯 CSS 的改动靠两样东西落地：一是 getComputedStyle(el, '::before') 读伪元素的 content/display/color，证明规则真的命中了那个节点；二是几何差值证明它真的占了版面——伪元素没有自己的 rect，于是量 " 宿主元素顶边到它第一个真实子元素顶边 " 的差（首页 63px，没有分隔符时是 32px 内边距）和 " 宿主元素底边到它最后一个真实子元素底边 " 的差（timeline 行 30px）。判断一个符号是不是豆腐块，用必定无字形的私有区码点 \uE000 当参照，比 canvas 涂墨像素数和 measureText().width：两者都与参照一致就可疑，各不相等就是真字形（这轮 ✟ 384/28.4、⫘ 369/51.1、参照 310/38.9）。注意这只能证明 本机 有字形，跨平台 fallback 不在同一台机器上测不出来。

这一轮（正文编号、分隔符按行宽、关于页算出来的三处、长 slogan）新增四条。一是 动态串的验证不能只看命不命中 ：content 读出来是 JS 写进去的那一串还不算完，要同时报 " 文本实测宽 "“可用宽”" 余量 " 三个数，余量 1px 说明已经贴到极限、但也说明字体度量差一点就溢出，所以两头各微调一次而不是直接 floor(room/unit)。二是 **“被裁掉 " 和 " 换了行 " 要分开判 **：white-space: normal 之后 scrollWidth == clientWidth 才是真没裁，行数用 rect.height / parseFloat(lineHeight) 反推，别按字符数猜。三是 构建期注入的属性要两端对齐验证：正文侧读 getComputedStyle(h2, '::before').content，目录侧读 .toc-number 的文本，去掉目录多带的尾点逐字比，再各数一次总数和 " 没有 data-num 的标题数”，只比前几条会漏掉后半篇错位的情况。四是 **public/ 是 gitignore 的构建产物 **：在 public/ 里手改文件既进不了提交，也会被下一次 hexo clean 整目录抹掉，改东西一律改源（themes/mustom/source/**、source/**），再 clean && generate 看产物里有没有——这轮的 lang/*.yml、_part/brand.styl 都是这么确认落到 public/asset/lang/*.json 和 public/asset/css/style.css 的。

这一轮（侧栏四行 slogan、B 站按钮）新增两条。一是 探针要量对像 ：我给联系方式那两个链接记的是 " 图标中心 vs 自己盒子中心 "，两个都报 0，于是写进结论说 " 居中已修正 "，但她看到的是两个盒子 彼此 错开 4px——因为盒子的 高度 就不一样（20 和 24）。同排元素必须比 " 元素之间的 top/center"，不能只比 " 元素在自己内部的位置 "；前者的数字一个都没有，后者全是 0 也照样是错的。二是 **" 转码后再用 " 要证明转码带来了什么 **：把 B 站的 favicon.ico 转成 PNG 我当成一件正经事做了，被问 " 为什么不能直接用 " 之后逐像素一比，ico 和 PNG 完全一致（同样 444 个不透明像素、同一个 #00A1D6），ico 里也只有一帧 32×32，也就是说转码只多出一个中间产物和一条依赖，收益是零。这类 " 我顺手加工了一下 " 的地方，写之前要先问加工换来了什么，换不来就原样存文件。

补一条测试环境的坑：这一轮 Firefox 157 的 BiDi 在 browsingContext.navigate 上开始回 invalid argument（同一个脚本上午还能跑，session.new 的 capabilities 里没有 setWindowRect 之外的变化），探针里改成先试 navigate、失败就 script.evaluate 里 location.href= 赋值，后续 setViewport 和求值都不受影响。另外 Git Bash 会把命令行里以 / 开头的参数改写成 Windows 路径（"/|11000" 变成 C:/Users/.../Git/），跑探针必须 MSYS_NO_PATHCONV=1 MSYS2_ARG_CONV_EXCL='*'，否则浏览器打开的是 404 页、量到的全是空——这类 " 探针返回 null" 先怀疑参数没传进去。

这一轮（署名、时空胶囊、字数行、热力图、随机入口）新增三条。一是 **" 两处都加了 " 这种话要逐处点名 **：api/posts.json 和 " 每篇的 JSON" 是两个不同的 map，我把第三个 map（分类 / 标签里的 postlist）记成了前者，结果真正那份列表一处都没加；改完要拿构建产物的键名列表核对，别拿 " 代码里出现了几次 " 核对。二是 版面装不装得下，只有截图会告诉你 ：getOption() 读回来的 visualMap 参数全对、canvas 尺寸也对，图例却被面板左边裁掉半截——DOM/option 探针看不见这种溢出，必须把那一块裁出来放大看；反过来 " 图例隐藏后还分不分档 " 这种问题 DOM 也答不了，得下到 zrender 的 displayList 去数填充色。三是 探针等的时间不够会得出 " 点了没反应 "：随机入口连着两次在 3.5 秒读回时 URL 没变，我按站点 bug 去查了一遍处理器（typeof onclick 是 function、手动调 onclick({stopPropagation(){}}) 能跳出跳转），把等待放到 6 秒才确认它一直是好的——api('posts') 是一次网络往返，读回时间必须盖过它。另外这版 Firefox 的 BiDi 仍然不接受 browsingContext.captureScreenshot 的 clip / origin 参数（invalid argument），要局部图就整屏截了再用 PIL 按 getBoundingClientRect() 裁；抽屉那种 position:fixed 又自己滚的容器，scrollIntoView 会连页面一起滚走（量出来 y 是负数），得手动改最近可滚祖先的 scrollTop。

这一轮（翻译栏换行、热力图首行、表格底色、出处气泡、删浮框、删胶囊）新增四条。一是 **“改完看起来对了 " 不算对了，要把故障复现出来再修 **：热力图首行右移那一条，我没有停在 " 起点回退到周日之后 minX 一致 " 就收工，而是在探针里用 setOption 把起点手动改回不回退的那个日期再量一次——第一行 minX 17、其余 6，正好一格，这才确认我修的是她看到的那个现象，不是另一个巧合（这个修法下一轮按她的要求撤掉了，见上面 " 第一行为什么右移了一格（这一条已回退）“和 Round M 那条）。二是 Firefox 157 的 BiDi input.performActions 形状跟规范文档不一样：source 对象上直接放 actions（不是套在 parameters 里），动作类型叫 pointerMove（不是 move），错了统一回 invalid argument、不给字段级提示；用真指针 pointerMove 到标题栏上量 element.matches(':hover')，才第一次把 :hover 这条链验实——el.focus() 在无头里不产生 :focus 计算样式，别拿它当 hover 的替身。三是 探针自己的容器能造出假结论 ：翻译栏那份 fixture 我第一版把宿主宽度写成 " 取 .p-post 的 clientWidth”，首页那个盒子宽度是 0，于是五个浮动块全被挤成一列、每块各占一行，看着像 " 我的 clear 没生效、排版炸了”；把宿主写成固定 640/420/300px 之后同一份 CSS 立刻给出正确的两行。量版面之前先量一下自己那个探针容器是不是 0 宽。同理，setViewport 之后不重新导航，注入的 fixed 盒子会读到 0×0，这条别当成站点回归。四是 加覆盖规则之前先 grep 同一条链上有没有别人已经写过：表格那两条我差点把代码块的透明底改回不透明白，靠的是构建产物里把 .markdown-body ... table tr 全列出来看了一遍——源文件里查不如产物里查，产物是最终顺序和最终特异性的唯一真相。

这一轮（热力图回退、备用 robots、死物普查）新增三条。一是 回退也要留对照 ：_tmp/roundM_ui.mjs 在本地 python -m http.server 服务 public/ 上量（不碰线上，碰线上会给不蒜子计数），成品区间 2026-05-04 ~ 2026-10-04、第一行 minX 17（23 格）、其余六行 6（各 22 格）；正对照是在探针里用 setOption 把起点手动回退到周日（2026-05-03），第一行立刻变 24 格、minX 6，七行对齐。撤掉一个机制和装上它要用同一套数字，才说明撤的就是那一个。二是 普查的结论要分成 " 静态看不见 " 和 " 真的没有 "：.icon-* 那 15 条规则和第一版报的 8 个 " 死配置键 " 都属于前者——类名是运行时的字符串拼接（"icon-" + 站点名 ）、键名是数据驱动的 map 迭代，静态 grep 天生看不见；要判 " 真的没有 " 就得往生成物那一侧看（performance.getEntriesByType('resource')、public/manifest.json 的实际内容）。三是 先量代价再报数：那 5 张孤儿图 125,513 字节看着吓人，但 sw.js 的 precache 里 /asset/img/ 命中 0 次，说明它不进访客的流量账；反过来 av-min.js 加 Valine.min.js 是 268,646 字节、每页真抓（首页那 50 个 JS 请求里就有这两个）。一条 precache 命中数把 " 占仓库 " 和 " 占访客 " 这两种死物钉开，报数时这两个数得一起给。

还没接的

• 评论：主题只支持 Valine，需要 LeanCloud 凭据，而且主题把 appid/appkey 编码成 pass + pointer 两段存进 part 文件，不是填一行就完事的。要开评论再说。
• 一言（hitokoto）和背景粒子（evanyou）是主题原有功能，取句接口没换；一言面板的换行和作者行底色改过，见上面 " 一言面板的换行 " 一节。
• 直播画面能不能在真人浏览器里出画还没核到：headless Firefox 里那个 h5 播放器始终 video.readyState=0、提示 " 拉流失败，重试播放 "，桌面 UA 和安卓 UA 一样；但同一个浏览器打开 live.bilibili.com/< 房间 > 是能出 blob: 流的，所以不是编解码或网络问题。可嵌性和弹幕层是核到了的。
• 看板娘的时段问候：取值已经是访客本地时间（见上面 " 它说’晚安’是看谁的表 " 一节），但 waifu-tips.json 里 time 的分档和措辞是按国内作息写的（0-5 叫 " 夜猫子 "、22-23 说晚安），seasons 那 12 条也全是国内的纪念日与购物节；要不要照访客那一侧的白天黑夜和节日体系重写这套措辞，还没定。
• BGM 面板的几条已知边界：歌单是 checked_at 那天的快照，收藏夹加歌不会自动同步，要跑一次导出工具再跑一次核验工具，最后重新构建；放不出来的条目（稿件删除 -404 / 不可见 62002 / 权限不足 -403）已由核验工具在构建期全部剔除（993 → 981），但 两次构建之间新失效的那条 还是会被播成播放器自带的 17 秒 error.mp4——跨域读不到 iframe、播放器不 postMessage、探活接口带本站 Origin 又是 403，运行时没有任何信号，只能等本地表走到点自己切下一首；自动切歌是本地按时长掐的表（多 P 合集的总时长已按 P 校正，校正后清单里只剩 10 条超过 10 分钟，最长的是 BV1ZS4y1z7gM 单 P 12186 秒），有人在 iframe 里拖进度条就会偏移；开播默认静音是浏览器自动播放策略，代码改不了，只能在页面第一次被点时自己重挂接上声音；歌词没有（官方 iframe 不给外层进度和歌词），lyride 那个设置项因此变成只影响页脚内边距的空壳。