出处这枚角标，改了三版 —

作品页一直都有一行「豆瓣原页」：原件在豆瓣的哪一页，点过去能对。广播没有——它按月归档，一个月一页，一条广播只是那一页上的一个时间戳标题，没有自己的页面可以挂这么一个字段。

这一周把它补上了，改了三版。三版的差别全在版式上，而版式这件事 测试一次都没帮上忙：三版的 npm test 都是绿的。

第一版：整行时间戳变成链接

一条广播：时间戳「2021-11-28 20:26:44」整行是绿色链接，后面跟一个站外角标；下面是封面、「玩过宝可梦明亮珍珠 ★★★★☆」和短评。 — **第一版** 最省事的做法，也确实能用。问题是时间戳从此长得像个按钮—— 而它是时间，不是导航。项目主人的原话：在自己的存档里读起来太重。

顺带撞上一条更硬的限制，它决定了后面两版的形状：页内锚点是静态站生成器从标题文字生成的。往标题里塞「豆瓣原页」四个字， #2021-11-28-202644 就变成 #2021-11-28-202644-豆瓣原页，站内所有指向某一条广播的固定链接当场全断。

把链接套在时间戳上不会断（链接文字就是时间戳本身，实测锚点不变）——那正是上面这一版。而空链接文字 [](url) 也不行：那是一个念不出名字的链接，跟「图片链接的 alt 不许留空」是同一条。

所以出处只能是紧跟在标题后面的独立一段，剩下的交给主题去收拾。

第二版：缩成一个角标——只是没缩掉那一行

同一条广播：时间戳是黑色纯文字，下面一整行几乎全空，只在最左边有一个很小的绿色站外角标，再下面才是封面和正文。 — **第二版** 样式表把「豆瓣原页」四个字收成了一个角标，读屏器仍然念得出这个链接去哪儿—— 唯独忘了那一段自己还占着一个 1.7 rem 的行框。于是每条广播上面多出**一行几乎全空的白**，左下角孤零零一个箭头，谁也看不出它是什么。

这一版在 git 的 diff 里是完全正确的：HTML 多了一段，样式表多了几条规则，测试全绿。它只在页面上是错的。

量出来是这样：

	一条广播的高度	2021 年 11 月那一页
第一版	167 px	6601 px
第二版	202 px	7903 px
第三版	167 px	6601 px

每条广播 35 px，一页 37 条，整页缩掉 16%。 而第一版和第三版逐像素一样高——也就是说，第三版没有为「时间戳回到纯文字」多付一点高度。「缩成一个角标」这句话在第二版里只兑现了一半，而那一半正好是看不见的那一半。

第三版：浮到时间戳右端，加一枚豆瓣的「豆」

同一条广播：时间戳是黑色纯文字，同一行的最右端有一枚绿色的豆瓣「豆」标和一个站外角标；下面直接就是封面和正文，中间没有空行。 — **第三版** 出处那一段浮到时间戳那一行的最右端，收成一枚豆瓣标加一个站外角标。时间戳回到纯文字，锚点没动过；点之前就看得出这一下会离开存档，去的是哪儿。

HTML 只多了一个属性，版式全在样式表里——重新生成整个样张站， 195 页变化、0 新增 0 删除，其中 193 个广播页每条只多了一个 title=。

位置对不对没有靠肉眼估：装了个无头浏览器，把角标逐个量了一遍——最大垂直错位 0.59 px，没有一枚压到时间戳文字，没有一枚没贴住内容列的右缘。（量的范围后来还不够，见文末。）

真正要修的东西藏在选择器里

正文是 Markdown 生成的，没有地方挂 class，所以主题原来是靠位置加形状 认出「哪一段是出处」的：时间戳标题紧跟着的、整段只有一个站外链接的那一段。

它今天工作得很好。而它说的不是「这一段是出处」，只是一个恰好等价的代理：

3503 条广播里，10 条没有出处（那条 URL 没抽到）
站点上，3 段正文整段只是一个裸链接（Markdown 引擎会自动把它变成链接）
今天撞车：0 处

撞上的那天，一段你自己写的话会被当成出处，收成一枚 13 px 的图标——正文就这么没了，页面照常渲染，测试照常全绿。这个项目一直说，一份会悄悄改写你写过的东西的存档，比没有存档更糟，因为它看着可信。

判据换成生成器写死的一个链接 title：它是 Markdown 的核心语法，换任何一个静态站生成器都会渲染成 title=，而自动识别出来的裸链接永远没有 title——所以这是个精确的判据，不是一个碰巧成立的。它顺带还是个真功能：这个链接的文字在视觉上被收掉了，鼠标停上去总得说得出它去哪儿。

这是这个项目记下的第五条代理断言。每一条的形状都一样：一句话在写下来的那天是对的，因为它站的位置刚好和它要说的事重合；等两者分家的那天，它不会报错，只会开始说另一件事。

两条顺带定下来的规矩

站点自己的标识不用豆瓣的商标，指路牌上可以。 主题里早有一条注释写着「像它的配色可以，用它的标记不行」——那说的是页眉上代表这个站点的那枚方块。而一个出口上画着目的地的标，正是它该画的东西。两处注释现在互相引用，免得下一个人读成前后矛盾。
那枚豆瓣标是内联进样式表的（32×32 的 PNG， optipng 压完 296 字节），不是一张外部图片。页脚那句「这个页面也不发一个外部请求」得继续是真的。现在有一条测试守着：样式表里一个外部地址都不许有—— 哪天有人把它换成豆瓣图床上的一张图，页面照样好看，只有那句话变成了假话。

三版都是看页面看出来的

值得记下来的不是最后那个版式，是三次的发现路径完全一样： 第一版太重、第二版白占一行，都不是任何一条测试能告诉我的事。 测试能守住「接不回本地的作品名不许变成站外链接」这种性质，守不住「这一页读起来是什么感觉」。

这一条在这个项目里已经反复出现：广播里 1411 条被吞掉的正文是看页面看出来的， 15 张印着豆瓣地址的封面也是。所以流程里那一步——改完重新生成整个样张站，然后去读那个 diff ——不是仪式。

补：还有第四版，因为这篇文章自己的教训又应验了一次

发出去之后项目主人问：样张站首页上怎么还是「豆瓣原页」四个字？

首页的广播预览和广播页用的是同一段 Markdown，但那一页 <main> 的类名是 section-home，不是 section-broadcast——角标那几条规则一条都没生效。接住它的是另一条规则：

.section-home p:not(:has(img)) > a:only-child { …药丸按钮… }

那条规则说的是「首页每一节末尾那个『看全部 →』」，写的却是 「整段只有一个链接的那一段」——又一次代理，同一个形状。于是出处被画成了一个跟「看全部 1344 →」一模一样的胶囊：它既不是导航，也不通向站内，而首页是这个站点第一眼看到的地方。

而漏掉它的原因，正是这篇文章自己在讲的那件事的另一面：我量的范围跟着我的预期走了。「3493 枚角标全部量过」听着很硬，可那 3493 枚全都在 broadcast/*.html 里——一个只在你以为它会出问题的地方巡逻的检查，和没有检查差别不大。

判据还是那把钥匙，只是从另一侧用：a:only-child:not([title])。实测首页上带 title 的链接只有那 5 条出处，「看全部」一条都没有。新的测试不再照着记忆列页面，而是从产出目录自己数出「哪些小节里出现了出处」，再要求样式表每一个都有规则。重新量的范围也换成全站：4815 页里 194 页有出处， 6839 枚角标，问题 0。

修这一版只改了样式表，样张站重新生成之后 HTML 一个字都没动。

改动都在 doubak-site-generator，效果在样张站首页和广播页上。