laoyang
76c69b31e8
需求：目录里有编号、正文标题没有，读长文时要回头去目录找对应关系。
本版给 h1/h2/h3 加编号，样式为灰色小号（标题字号的 0.62 倍），
不抢标题视觉重心，与目录 .yang-toc-num 同风格。
编号规则（编号范围跟着后台 toc_levels 设置走，默认 1/2/3）：
- 按「实际出现的最外层」归一，没有 h1 时 h2 直接是一级（1/2/3），
不会编成 2/2.1。天然满足用户"h1 没有就是 h2 一级"的要求。
- 作者已手写编号的标题跳过并占位（1./1、/1)/1.2/一、/（一）/第一章
等写法），不叠加成"3.1 1. xxx"，但编号序列不错位。
实现要点：
- 抽出 yang_toc_pick / yang_toc_depths / yang_toc_number_map 三个纯函数，
目录与正文共用同一份编号计算，杜绝两边漂移（用户痛点正是"两边不一致"）。
- 插入按 id 回填：条目清单只来自 scan() 那一份，id 是唯一键。
- 用 preg_match_all + PREG_OFFSET_CAPTURE 拿字节偏移、从后往前拼接插入。
早期写成 preg_replace_callback('#<h([1-6])([^>]*)>(.{0,120})#is')，
那个 .{0,120} 贪婪跨过块边界，导致 5 个标题只有第 1 个拿到编号且不报错。
- 幂等用 strncmp(substr($html,$end), $needle, strlen($needle))，不手数字节
（写成固定 26 而实际 25 会让幂等静默失效、编号插两层）。
CSS 修一个自己造的问题：编号把标题撑高 3px。
line-height:inherit 无效——同行高下小字号半行距更大，盒底反而更往下探
（h2 46→49）。改为 display:inline-block + line-height:1 成为原子行内盒，
实测 46→46、37→37。八组隔离试验数据见 _tooling/_diag362b.js。
验证（全部本地/线上实跑，非推断）：
- 正向判据 43/0；反证 22/0（10 组注入均红在预期条目）
- 线上 4 篇真实文章 20/0（含"只有 h3"、"h1+h2"、"h2+h3"三种形态）
- 新旧两版目录 HTML 逐字节比对 7/0（4/4 篇相同，证明重构没改坏老行为）
- 几何判据 68/0，含两条反证：回到 inline+inherit ⇒ 高度差 3.00px；
编号 display:block 掉行 ⇒ G3 差 14.88px
- 打包自检 59/0 + 4 组注入反证全红
322 lines
15 KiB
CSS
322 lines
15 KiB
CSS
@charset "UTF-8";
|
||
/**
|
||
* 站点级公共样式（3.2.29 起）
|
||
*
|
||
* 这些规则原来是站长手填在「主题设置 → 自定义代码 → 自定义 CSS」里的，
|
||
* 3.2.29 把它们并入主题公共样式，配置项因此留空。
|
||
*
|
||
* ⚠️ 选择器与声明**必须与原来的自定义 CSS 逐字一致**：
|
||
* 自定义 CSS 是以 `<style>` 形式紧跟在 kratos.min.css 之后输出的，
|
||
* 所以「排在最后 + 同选择器」才等价于原来的层叠结果。
|
||
* 本文件的加载顺序同样是 kratos.min.css 之后（enqueue 依赖 'kratos'），
|
||
* 改选择器范围（例如把 ul 收窄到 .article .content ul）会改变实际渲染。
|
||
*
|
||
* @author Yongquan Yang <yangyq.net>
|
||
* @license MIT License
|
||
*/
|
||
|
||
/* 正文段落首行缩进两字 */
|
||
.article .content p {
|
||
text-indent: 2em;
|
||
}
|
||
|
||
/* ── 正文插图：不吃段落的首行缩进，自成一行、左右都不缩进（3.2.60 / 工单 #28）
|
||
*
|
||
* 🔴 为什么必须有这一段：`text-indent` 是**可继承属性**。
|
||
*
|
||
* WP 把图片插进段落时，DOM 是 `<p><img></p>` 或 `<p><a><img></a></p>`。
|
||
* 图片（或包着它的 <a>）作为**行内级盒子**落在段落首行
|
||
* ⇒ 继承 32px 缩进，整体右移。
|
||
* 而 `max-width: 100%` 里的 100% 是**包含块（p）的内容宽度**，
|
||
* 不是"缩进之后剩下的宽度" ⇒ 图片仍按全宽铺开。
|
||
*
|
||
* 结果：左边缩进多少，右边就溢出多少，**二者永远相等**。
|
||
* 线上实测（2022/05/set-font-in-latex）：左缩进 32px、右溢出 32px，
|
||
* 正文可绘制区 111~902.33，图片却是 143~934.33。
|
||
*
|
||
* ── ⚠️ 只给 img 清零 text-indent 是**不够**的（第一版就这么错）────────
|
||
*
|
||
* 实测：`.article .content img{ text-indent:0; display:block }` 之后，
|
||
* 图片自己的 computed text-indent 确实是 0px、display 也是 block，
|
||
* 但几何仍停在 143（照样偏 32px）。
|
||
*
|
||
* CDP `CSS.getMatchedStylesForNode` 抓到的真相：
|
||
* WP 会把图片包进 `<a class="yang-lb-item">`（灯箱），
|
||
* 而 lightbox.css 给它设了 `display: inline-block`。
|
||
* **inline-block 盒子的起点同样受父级 text-indent 影响** ——
|
||
* 它继承了 p 的 32px，于是整个「链接 + 图片」盒子被推进去 32px。
|
||
* 图片在盒子内部再怎么清零，也改不了盒子自己的起点。
|
||
*
|
||
* ⇒ 缩进必须清在**真正参与父级行内排版的那个盒子**上，
|
||
* 也就是 a.yang-lb-item / 裸 img 两者都要清。
|
||
*
|
||
* 修法：
|
||
* ① `text-indent: 0` 切断继承（不改 p 上的规则本身 ——
|
||
* 段落首行缩进是站长期望的效果，去掉会改变全站观感）；
|
||
* ② `display: block` 自成一行，不参与首行的行内排版；
|
||
* ③ 图片用 `margin: … auto` 居中。
|
||
*
|
||
* ⚠️ 只看 `.content img`（后代）而不是 `> img`：图片外面常套一层
|
||
* `<a class="yang-lb-item">`（灯箱），直接子元素选择器量不到。
|
||
*
|
||
* ⚠️ 对齐类图片用 `:where()` 把特异性降到 0，让 kratos 的
|
||
* `.alignright{float:right}` / `.aligncenter` 等**照常生效**：
|
||
* 浮动的图本来就不该吃缩进，也不该被强制成块级居中。
|
||
* `:where()` 是 CSS4，Chrome 88+ / Safari 14+ / Firefox 78+ 支持；
|
||
* 更老的浏览器会整条规则失效 —— 退化成"维持现状"，不会更坏。 */
|
||
.article .content img {
|
||
text-indent: 0;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 🔴 灯箱链接：必须一起清零。它是 inline-block，本身就是参与父级
|
||
* 行内排版的盒子 —— 只清 img 无论用，位置由它决定。
|
||
* 见上面实测说明。 */
|
||
.article .content a.yang-lb-item {
|
||
text-indent: 0;
|
||
display: block;
|
||
line-height: 0;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 表情图必须保持行内：正文里它是夹在文字中的小图，
|
||
* 变 block 会换行、把句子拆断。特异性 (0,2,1) 压过上面那条。 */
|
||
.article .content img.wp-smiley,
|
||
.article .content img.emoji {
|
||
display: inline;
|
||
margin: 0;
|
||
vertical-align: middle;
|
||
text-indent: 0;
|
||
}
|
||
|
||
/* 对齐类图片交还给 kratos 的浮动/居中语义（特异性 0，不参与竞争）。
|
||
* 连包裹它的灯箱链接一起处理 —— 否则链接是 block、图片却 float，
|
||
* 会空出一整行。 */
|
||
:where(.article .content) img.alignright {
|
||
display: inline;
|
||
float: right;
|
||
margin: 0 0 8px 16px;
|
||
}
|
||
|
||
:where(.article .content) img.alignleft {
|
||
display: inline;
|
||
float: left;
|
||
margin: 0 16px 8px 0;
|
||
}
|
||
|
||
:where(.article .content) img.aligncenter {
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
:where(.article .content) a.yang-lb-item:has(img.alignright) {
|
||
display: inline;
|
||
float: right;
|
||
margin: 0;
|
||
}
|
||
|
||
:where(.article .content) a.yang-lb-item:has(img.alignleft) {
|
||
display: inline;
|
||
float: left;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 正文二级标题：左侧蓝条 + 浅灰底，横向铺满（负 margin 吃掉正文的 16px 内距）
|
||
*
|
||
* 3.2.61（工单 #29 追加）：字号 20→24、字重 500→700。
|
||
* 🔴 这是 3.2.60 留下的层级倒挂的修复：3.2.60 把 h3 提到 20px/600，
|
||
* 而 h2 一直是 20px/500 —— 结果 h2 和 h3 同字号、h3 还更粗 100，
|
||
* 三级标题比二级标题更抢眼。用户一眼就看出"h3 比 h2 还大"。
|
||
* 根因是当时只动了 h3，没把 h2 一起拉起来，而且判据里
|
||
* **没有任何一条断言 h2 > h3**，所以 52 条全绿也照样漏了。
|
||
* ⇒ 往后调任一标题级别，必须同时断言相邻两级的**字号 + 字重**
|
||
* 都单调递减（见 _geom361_route.js 的 G 组）。
|
||
*
|
||
* 行高 41→46：24px 字配 41px 行高，上下各只剩 8.5px，灰底看着发扁；
|
||
* 46px 让上下各留 11px。这个 11px 是**算出来的**：
|
||
* 24px 字的实际墨迹高约 24×0.88 ≈ 21px（中文黑体 ascent+descent 之内），
|
||
* 行框 46px 减 21px 再除以 2 ≈ 12.5px，与 3.2.60 的 20px/41px
|
||
* （20×0.88=17.6，41-17.6=23.4，/2≈11.7px）基本持平。 */
|
||
.k-main .details .article .content h2 {
|
||
margin: 16px -16px;
|
||
padding: 0 10px;
|
||
border-left: 5px solid #00a2ff;
|
||
background-color: rgba(243, 243, 243, 0.7);
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
line-height: 46px;
|
||
}
|
||
|
||
/* ── 正文三级标题：左侧细竖线 + 底部细线（3.2.60 / 工单 #29）
|
||
*
|
||
* 3.2.60 之前 h3 只有 `font-size:18px; font-weight:500`，没有任何装饰，
|
||
* 而正文是 16px/350 —— **只差 2px 字号、150 字重**，放在长文里根本分不出来。
|
||
*
|
||
* 层级梯度（3.2.61 定稿，三级 + 四级同步调整）：
|
||
* h2 24px / 700 / 左 5px 蓝条 + 浅灰底 ← 最重，分节
|
||
* h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线，无底色
|
||
* h4 17px / 500 / 纯文字，无装饰
|
||
* p 16px / 350
|
||
*
|
||
* 🔴 两条铁律（3.2.60 违反第 1 条，导致 h3 比 h2 还抢眼）：
|
||
* ① 字号与字重**同时**严格递减：24>20>17>16、700>600>500>350；
|
||
* ② 装饰强度也递减：蓝条+灰底 > 蓝条+细线 > 无 > 无。
|
||
* 任一级调了，必须回头核对相邻两级的下行关系，别只盯自己那一级。
|
||
*
|
||
* 为什么 h3 竖线用 3px 而不是 h2 的 5px：同族但更轻，一眼能看出次一级。
|
||
* 为什么 h3 不加底色：h2 已经有灰底，h3 再铺一层整篇会碎成一块块。
|
||
* 为什么 h4 用 500 而不是 600：600 与 h3 同字重，就只剩字号 3px 的差别，
|
||
* 视觉上"像同一个级别被缩了一点"。降到 500 后，字重也参与分层。
|
||
* 500 仍然明显重于正文的 350（差 150），不会糊回正文里去。
|
||
*
|
||
* ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死：
|
||
* kratos 的 `.k-main .details .article .content h3` 是 (0,4,1)，
|
||
* 只写 `.article .content h3`（0,2,1）会被它压掉 —— 这在本项目
|
||
* 踩过一次（archives.css 里 22px/700 写了两版都没生效，实际一直是 18px/500）。
|
||
* 所以这里与 h2 用同一套前缀，并且 font-size / font-weight 都显式声明。 */
|
||
.k-main .details .article .content h3 {
|
||
margin: 24px 0 16px;
|
||
padding: 2px 0 2px 10px;
|
||
border-left: 3px solid #00a2ff;
|
||
border-bottom: 1px solid #eaedf2;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
line-height: 32px;
|
||
}
|
||
|
||
/* ── 正文四级标题：17px / 500（3.2.61 定稿）
|
||
*
|
||
* 字号 17px 保持不动（h3 20px 之下、正文 16px 之上的唯一合理档位，
|
||
* 再往下压到 16px 就与正文同大、层级直接断层）。
|
||
* 字重 600 → 500：600 与 h3 完全同重，等于只有 3px 字号差，
|
||
* 看着像"同一级被缩小"，不像下一级。降到 500 让字重也参与分层。
|
||
*
|
||
* 不加任何装饰 —— 到第四级再加线就满屏都是线了。 */
|
||
.k-main .details .article .content h4 {
|
||
margin: 20px 0 12px;
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
line-height: 30px;
|
||
}
|
||
|
||
/* 🔴 归档页的年份标题也是 `<h3 class="ar-year">`，而且它就在
|
||
* `.article .content` 里面（[Archives] 是正文短代码）。
|
||
* 上面那条 h3 会命中它 —— 于是年份会多出一条左竖线和一条底细线，
|
||
* 而 archives.css 里 `.ar-head` 已经有自己的底边线，会变成**两条线**。
|
||
*
|
||
* 这不是"顺手加个补丁"，是必须的：archives.css 的 `.ar-year`
|
||
* 靠 (0,5,0) 才压过 kratos，本文件若也用 (0,5,0) 且排在它后面，
|
||
* 谁赢就变成"看入队顺序"，非常脆。
|
||
*
|
||
* 这里主动让路：把 ar-year 的装饰清零，尺寸仍交给 archives.css 管
|
||
* （它写 26px/700，本规则不碰字号，避免两边抢）。 */
|
||
.k-main .details .article .content h3.ar-year {
|
||
padding: 0;
|
||
border-left: 0;
|
||
border-bottom: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── 正文标题的自动编号（3.2.62 / 工单 #30）
|
||
*
|
||
* 结构由 PHP 插入：<h2 id="x"><span class="yang-h-num">1.1</span>标题</h2>
|
||
* 编号是**独立 span**，不是改标题文本 —— 所以不进编辑器、不进 RSS、
|
||
* 不进搜索结果、不进摘要。作者手写编号时压根不插这个 span。
|
||
*
|
||
* ── 为什么用灰色小号（用户选定的方案）──────────────────────────
|
||
* 标题的核心是**文字本身**，编号只是索引辅助。若与标题同色同粗，
|
||
* 视觉上"1.1"会和标题正文抢注意力，长文章里满屏都是粗体数字。
|
||
* 灰色 + 小一号让编号退到背景，眼睛扫标题时能忽略它、需要定位时
|
||
* 又能看见 —— 这也与目录里 `.yang-toc-num` 的处理一致（同为灰色小字），
|
||
* 正文和目录的编号看起来是同一套东西。
|
||
*
|
||
* ── 字号为什么要跟标题走而不是写死 ─────────────────────────────
|
||
* 编号要跟着标题一起缩放才有"附属于标题"的感觉。这里用 em：
|
||
* 0.62em 在 h2（24px）上是 14.9px、h3（20px）上 12.4px，
|
||
* 正好落在 12~15px 这个"能看清但不抢眼"的区间。
|
||
* ⚠️ 若写成固定 px，h2 的编号会显得太小、h3 的又偏大。
|
||
*
|
||
* ── font-weight / font-style 必须显式重置 ────────────────────
|
||
* span 会继承标题的 font-weight（700/600）和可能的斜体。
|
||
* 不重置的话"灰色但加粗"仍然很重，弱化就白做了。
|
||
*
|
||
* ── margin-right 用 0.35em 而不是固定 px ────────────────────
|
||
* 同样是为了跟标题字号联动；h2 的 24px ⇒ 8.4px，h3 的 20px ⇒ 7px，
|
||
* 在两级上都刚好是"一个空格多一点"的呼吸感。
|
||
*
|
||
* ── 🔴 为什么必须 `display: inline-block`（这是本规则最不直观的一处）──
|
||
* 小字号的行内元素会把行盒**撑高**，实测 h2 46 → **49px**、h3 37 → **40px**，
|
||
* 每级都多 3px。3px 不起眼，但它出现在**每一个**标题上：长文 10 个二级标题
|
||
* 就多出 30px，h2 的灰底跟着变高，整篇标题的节奏全变；更麻烦的是它**只在
|
||
* 该标题有编号时出现**，于是「有编号的文章」和「没编号的文章」行距不一致，
|
||
* 极难归因。
|
||
*
|
||
* ⚠️ 我先试过 `line-height: inherit`（以及写死 46px）—— **完全无效**，
|
||
* 仍 49px。原因值得记下来，因为直觉是反的：
|
||
*
|
||
* 同行高下，行内盒的上下边界由「半行距」决定，而半行距
|
||
* 把 content-area **居中**塞进 line-height：
|
||
*
|
||
* 盒底 = baseline + desc×fs + (L − fs) / 2
|
||
* h2 (fs=24, L=46): 0.25×24 + (46−24)/2 = 17.00
|
||
* span(fs=14.88,L=46): 0.25×14.88+ (46−14.88)/2 = 19.28 ← 多探 2.28
|
||
*
|
||
* **字号越小，半行距越大**，盒底反而越往下走。所以「让两者共用行高」
|
||
* 不是解药，恰恰就是病根 —— line-height 怎么调都救不回来。
|
||
*
|
||
* ⚠️ `vertical-align` 也试过：`baseline` 仍 49px；`middle` 48.52px。
|
||
*
|
||
* ✅ 真解：把编号变成**原子行内盒**（inline-block），它就只按自身内容
|
||
* 高度参与行盒，不再受半行距拉扯。配 `line-height: 1` 让盒高正好
|
||
* 等于字号（14.88px），基线落在 asc 处 —— 上下都远在 strut 之内，
|
||
* 实测 h2 46→**46**、h3 37→**37**，一分不多。
|
||
* （八组隔离试验的完整数据见 `_tooling/yang_theme_test/_diag362b.js`。）
|
||
*
|
||
* 副作用检查：inline-block 不会跨行断开 ⇒ 编号永远留在标题第一行开头，
|
||
* 正是想要的；`white-space: nowrap` 随之只作用于这个原子盒，不会影响标题文字。
|
||
*
|
||
* ⚠️ 归档页 `h3.ar-year` 同样不会带编号 —— 编号是在 the_content
|
||
* 过滤器里按「目录条目」插的，而归档短代码的年份标题不在
|
||
* yang_toc_scan() 的结果里（它们是 [Archives] 渲染时才产生的），
|
||
* 所以天然不受影响。评论区 h3 同理（不在 .content 内）。 */
|
||
.k-main .details .article .content .yang-h-num {
|
||
/* 🔴 原子行内盒：不参与行盒的半行距计算，标题高度才不会被撑高（见上） */
|
||
display: inline-block;
|
||
line-height: 1;
|
||
margin-right: 0.35em;
|
||
color: #a8abb2;
|
||
font-size: 0.62em;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
/* 数字等宽，1.1 和 3.10 宽度一致，多行标题才不会看着参差 */
|
||
font-variant-numeric: tabular-nums;
|
||
/* 编号自身不换行（inline-block 本来也不拆，写上是为了并列时也不拆） */
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 暗色站点：跟目录序号同一个灰，否则 #a8abb2 在深色底上过亮 */
|
||
html.yang-dark .k-main .details .article .content .yang-h-num {
|
||
color: #767d88;
|
||
}
|
||
|
||
/* 列表缩进与行距 */
|
||
ul {
|
||
margin-left: 2em;
|
||
}
|
||
|
||
ol {
|
||
margin-left: 2em;
|
||
}
|
||
|
||
ol > li {
|
||
line-height: 1.8;
|
||
}
|
||
|
||
ul > li {
|
||
line-height: 1.8;
|
||
}
|