测试2 | HayashiHana²

本文既是功能手册，也是可以直接观察的排版样张。每一节依次给出用途说明、实际效果、对应源码和使用边界，用于回答两类问题：文章可以怎样写，以及页面最终会怎样排。

当前正文系统由四部分协作：Hexo 生成语义 HTML，Butterfly 提供页面与交互，MathJax 4 排数学公式，Kanji Typesetting 处理正文中的 CJK 语境排版。中文、日文、韩文使用自托管的 Noto Serif CJK（与思源宋体同源），西文使用 EB Garamond，代码使用 Fira Code，数学以 Euler 字体为主。

本页只演示当前仓库真正启用的功能。Kanji 的 renderJiya 与 renderHanging 目前因连续闭引号兼容问题关闭；标点使用 correctBiaodian 与浏览器原生布局。Mermaid、评论系统、网易云播放器、Sakana、Pangu 和旧标签插件也没有启用。

文章信息与 Front matter

每篇文章开头的 YAML 区块控制标题、日期、永久链接、目录、封面和侧栏等页面信息。本页的标题、发布日期、分类、标签和目录，就是以下配置的实际效果。

---
title: 测试2
date: 2026-08-29 16:00:00
updated: 2026-08-29 20:40:00
permalink: 2026/08/29/测试2/
tags: [测试标签, Typography, Kanji]
categories: 测试分类
description: 本博客排版与写作功能的完整示范。
toc: true
toc_number: true
comments: false
aside: true
---

常用字段如下：

字段	用途	建议
`title`	文章标题	必填
`date` / `updated`	发布与更新日期	保留历史文章原日期
`permalink`	固定 URL	已发布文章不要随意修改
`tags` / `categories`	标签与分类	用于列表页与检索
`description`	首页摘要与 SEO 描述	建议简洁填写
`cover` / `top_img`	列表封面与文章头图	可用站内绝对路径
`toc` / `toc_number`	目录与目录编号	长文建议开启
`aside`	侧栏	默认开启
`comments`	评论区域	本站尚未配置评论提供商
`copyright`	文章版权卡片	主题默认开启

标题、段落与分隔线

Markdown 的井号表示标题层级。文章标题由 Front matter 提供，正文通常从二级标题开始；不要为了放大文字而滥用标题。

三级标题：章节内部的小节

四级标题：小节内部的说明

第一段文字。Markdown 中空一行会开始新段落；本站也开启了普通换行转换，因此源文件中的单个换行可以形成可见换行。

第二段文字。段落保持适合 CJK 阅读的行高，长西文会在必要处换行。

源码

## 二级标题

### 三级标题

#### 四级标题

第一段文字。

第二段文字。

---

多语言字形与 `lang`

页面根语言是 zh-CN。局部繁体中文、日文或韩文应使用标准 lang 属性，让浏览器选择正确的地区字形、换行规则与辅助技术读音。

简体中文

简体中文使用 SC 字形：骨、直、门、关、复。黎曼猜想是数学中最著名的未解决问题之一。

繁體中文

繁體中文使用 TC 字形：骨、直、門、關、復。排版應依語言選擇字形，而不是把整段文字轉換成另一套字。

日本語

日本語は JP 字形を使用する。骨、直、門、関、復。「有限生成アーベル群の基本定理」を例にする。

한국어

한국어는 KR 글리프와 단어 단위 줄바꿈을 사용한다. 한글과 漢字, English를 함께 적어도 문단의 언어 정보는 유지된다.

源码

<p lang="zh-CN">简体中文</p>
<p lang="zh-TW">繁體中文</p>
<p lang="ja">日本語の文章</p>
<p lang="ko">한국어 문장</p>

中文段落中出现<span lang="ja">日本語</span>时，只给局部元素设置 lang。

.japanese、.traditional 一类自定义类名不能代替 lang。lang 是字体选择、换行、朗读和搜索均能理解的标准语义。

CJK、西文与数字混排

普通中西文之间不必手工加入半角空格。Kanji 的 renderHWS() 会在浏览器中加入视觉间距，但不改写 Markdown 源文，也不会在代码、URL、电子邮箱或数学公式内部插入空格。

实际效果

这是GPT模型。

这是GPT-5模型，预计2026年发布。

Node.js是一个JavaScript运行时，UTF-8编码适合多语言文本。

Riemann Hypothesis黎曼猜想与Sylow定理可以出现在同一句中。

中文123中文。中文3.1415926中文。第1章与Section 2并列。

安装npm之后运行npm install，随后访问https://example.com/a-b。

源码

这是GPT模型。
这是GPT-5模型，预计2026年发布。
Node.js是一个JavaScript运行时，UTF-8编码适合多语言文本。
Riemann Hypothesis黎曼猜想与Sylow定理可以出现在同一句中。
中文123中文。中文3.1415926中文。第1章与Section 2并列。

下列技术标识符应保持原样：C++、C#、C*-algebra、npm.js、GPT-5、UTF-8、x86-64、SHA-256、H.264、IPv6、arXiv:2601.12345、test@example.com。

标点、引号与嵌套标点

中文源文应直接使用全角标点。当前 correctBiaodian() 会完成标点语义修正；连续标点的压缩与悬挂暂交给字体和浏览器原生排版，以避免旧版 Kanji 在闭引号组合上产生残缺。

成对标点

「你好。」

『你好。』

《书名》与〈篇名〉。

（圆括号）【方头括号】〔六角括号〕。

“Western quotation marks”与‘single quotes’。

省略、连接与疑问

等等……然后继续。

这是破折号——它连接前后语意。

你确定吗？！真的！？

嵌套与相邻组合

「他说：『今天读《〈篇名〉》。』」

这是括号内的完整句子（括号内也有句号。）。

闭合组合：「完成了。」「完成了。』」「完成了。）」

中西组合测试：ABC，中文。中文，ABC。中文（ABC）中文。ABC（中文）ABC。

源码

「你好。」
『你好。』
《书名》与〈篇名〉。
“Western quotation marks”与‘single quotes’。
等等……然后继续。
这是破折号——它连接前后语意。
「他说：『今天读《〈篇名〉》。』」
中文（ABC）中文。ABC（中文）ABC。

不要用负 margin、重复空格或手工插入不可见字符去“修”标点。若将来重新启用 renderJiya、renderHanging，应在统一配置中切换并重新回归测试。

强调、重点与文字装饰

强调和加粗不是同一语义：em 表示语气上的强调，strong 表示内容的重要性。中文与日文的强调可由 Kanji 处理为适合 CJK 的着重形式，西文仍保留斜体习惯。

实际效果

普通文字、强调文字、重点文字、既强调又重要。

これは日本語の強調です。 This is English emphasis.

~~已经删除的内容~~、具有下划线的增订、需要醒目标记的内容。

吸引注意但不增加重要性；in situ 是另一种语气或术语；~~已经不再准确的说法~~。

源码

*强调文字*
**重点文字**
***既强调又重要***
~~已经删除的内容~~
<u>具有下划线的增订</u>
<mark>需要醒目标记的内容</mark>

<span lang="ja">これは*日本語の強調*です。</span>
<span lang="en">This is *English emphasis*.</span>

行内语义元素

HTML 的语义元素适合 Markdown 无法直接表达的场景。它们不只是视觉样式，也为搜索引擎和辅助技术提供信息。

定义、缩写与时间

字偶距是相邻字形之间的视觉距离调整。CSS 控制页面样式。本文更新于 2026年8月29日。

上标、下标、变量与输出

质能方程 E=mc²，水的化学式 H₂O。变量 n 表示整数；按 Ctrl + C 复制，终端可能输出 Build completed。

行内引文与来源

孔子说：学而时习之，不亦说乎？作品名称可写作《论语》。

源码

<dfn>字偶距</dfn>
<abbr title="Cascading Style Sheets">CSS</abbr>
<time datetime="2026-08-29">2026年8月29日</time>
E=mc<sup>2</sup>，H<sub>2</sub>O
<var>n</var>、<kbd>Ctrl</kbd>、<samp>Build completed</samp>
<q>学而时习之，不亦说乎？</q>
<cite>《论语》</cite>

链接、URL 与电子邮箱

Markdown 链接可以包住中文、西文、Ruby 或图片。本站会让外部链接在新标签页打开，并保留站内链接的正常 PJAX 导航。

中文前接English link中文后。

中文English中文整体处于同一链接内。

参考式链接适合一处集中维护 URL：Hexo、Butterfly。

自动识别 URL：https://example.com/a-b；电子邮箱：test@example.com。

源码

[链接文字](https://example.com/)

[Hexo][hexo-site]
[Butterfly][butterfly-site]

[hexo-site]: https://hexo.io/
[butterfly-site]: https://butterfly.js.org/

https://example.com/a-b
test@example.com

引用、嵌套引用与图文引用

区块引用用于较长的引文，不应只为了缩进而使用。

「排版不是装饰文字，而是组织阅读。」Blockquote 中可以包含中文、English、数字2026与公式 $$x^2+y^2$$ 。

第二段仍属于同一引用。

嵌套引用用于引用中的补充来源或再次转引。

——示例作者，《排版札记》

唯有知识才能解决问题。

一段带有说明文字的语义化引用。

源码

> 第一段引用。
>
> 第二段引用。
>
> > 嵌套引用。
>
> ——作者，<cite>《来源》</cite>

<figure>
  <blockquote><p>唯有知识才能解决问题。</p></blockquote>
  <figcaption>一段带说明文字的语义化引用。</figcaption>
</figure>

清单与定义列表

无序清单

第一项包含重点与强调。
第二项包含链接和inline code。
- 嵌套项使用两个空格缩进。
- 同级的第二个嵌套项。
第三项回到第一层。

有序清单

先写结构清楚的源文。
再使用 lang、Ruby 等语义标记补足信息。
最后在本地构建并检查移动端与暗色模式。

任务状态

已完成排版系统配置
待检查新文章的窄屏效果

定义列表

Kanji Typesetting: 处理 CJK 上下文排版、标点修正与中西文间距。
MathJax: 将 TeX 公式转换为可访问的网页数学排版。

源码

- 第一层
  - 第二层
- 返回第一层

1. 第一步
2. 第二步

<dl>
  <dt>术语</dt>
  <dd>术语的解释。</dd>
</dl>

表格

表格适合结构化对比，不适合塞入长篇正文。窄屏幕下应允许表格区域滚动，而不是挤坏整页。

语言或功能	实际文本	标识符或备注
简体中文	简体中文English	UTF-8
繁體中文	繁體中文English	2026
日本語	日本語English	Node.js
한국어	한국어English	SHA-256
数学	$$f(x)=x^2+1$$	(1)

源码

| 功能 | 示例 | 备注 |
| :--- | :--- | ---: |
| CJK | 中文English | UTF-8 |
| 数学 | $f(x)=x^2+1$ | (1) |

图片、说明文字与大图查看

普通图片使用 Markdown 语法；alt 文本用于图片无法加载和屏幕阅读时，标题文本可选。本站启用了 Lazyload 与 Fancybox，点击正文图片可查看大图。

博客本地测试图片

带说明文字的本地图片 — 使用 figure 与 figcaption 组合图片和说明。

源码

1	![替代文字](/media/cover/1.jpg "可选标题")

<figure>
  <img src="/media/cover/2.jpg" alt="带说明文字的本地图片">
  <figcaption>图片说明。</figcaption>
</figure>

Ruby 行间注

Ruby 使用标准 HTML 语义，不用自制 span 假装注音。项目标签适合“基文 + 单段读音”的常用场景，标准 HTML 适合长读音、复杂分组或更细控制。

项目 Ruby 标签

日文：漢字（かんじ）、東京（とうきょう）。

中文拼音：汉字（hànzì）、數學（shùxué）。

标准 HTML Ruby

日本語（にほんご）与数学（shùxué）。

长 Ruby：日本語能力試験（にほんごのうりょくしけん）。

Ruby 与链接中的東京（とうきょう）、重点汉字（hànzì）、标点「京都（きょうと）。」可以组合。

项目标签源码

{% ruby 漢字 かんじ %}
{% ruby 漢字 かんじ ja %}
{% ruby 汉字 hànzì zh-CN %}

标准 HTML 源码

<ruby lang="ja">
  漢字
  <rp>（</rp><rt>かんじ</rt><rp>）</rp>
</ruby>

项目 Ruby 标签只接受两个或三个不含空格的参数：基文、读音和可选 lang。复杂读音请写标准 HTML。rp 是不支持 Ruby 的环境中的备用括号，不要删除。

横排与竖排

普通正文默认横排。需要诗笺、题记、古籍式样张等特殊版面时，可以局部使用 .vertical-rl（列从右向左）或 .vertical-lr（列从左向右）。竖排容器有自己的滚动边界，不会让整个页面横向溢出。

从右向左的竖排

天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。「竖排中文」应保持标点方向、列序与字形正确。English 2026 与漢字（かんじ）也可以局部混排。

从左向右的竖排

春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。Vertical Typography 2026。

源码

<div class="vertical-rl" lang="zh-CN">
  天地玄黄，宇宙洪荒。「竖排中文」。
</div>

<div class="vertical-lr" lang="ja">
  春はあけぼの。日本語の縦書き。
</div>

竖排是局部表现工具，不适合整篇长文章。代码块、宽表格和展示公式也不宜直接塞入竖排容器。

字体语义工具

字体类用于表达局部语义，不应用来逐字“调漂亮”。CJK 与西文字体仍会按字符范围分工。

`.song`：宋体语义，适合正文、正式引文与传统书面内容。Song-style Latin remains serif.

`.hei`：黑体语义，适合短提示、说明标签和界面式文本。Sans-serif Latin is also selected here.

`.kai`：楷体语义，适合题记、古文短引和需要手写感的局部内容。

`.latin-serif`: Riemann Hypothesis and Venetian-style serif prose.

`.latin-sans`: Interface Label and Short Notice.

`.latin-mono`: SHA-256 -> UTF-8 != ASCII.

源码

<span class="song">宋体语义</span>
<span class="hei">黑体语义</span>
<span class="kai">楷体语义</span>
<span class="latin-serif" lang="en">Latin serif</span>
<span class="latin-sans" lang="en">Latin sans</span>
<span class="latin-mono" lang="en">Latin mono</span>

EB Garamond 与 OpenType

正文西文默认启用 kerning、标准连字、上下文连字、任选连字、历史连字和旧式比例数字。语义工具可以局部切换小型大写、数字样式与连字；实际能否出现某个字形取决于字体文件是否提供相应 OpenType 表。

默认西文

office, affinity, difficult, efficient, final, flourish; 0123456789.

大小写与数字

Small Capitals: Typography and OpenType 2026

All Small Capitals: Mixed Case Becomes Caps

Oldstyle proportional numerals: 0123456789

Lining proportional numerals: 0123456789

Tabular numerals: 1111111111 | 2020202020 | 8888888888

Proportional numerals: 1111111111 | 2020202020 | 8888888888

连字与花体

Discretionary and historical ligatures: office affinity st ct Th.

Ligatures disabled for comparison: office affinity difficult.

Swash request: Quaint Typography & Flourishes.

源码

<span class="smallcaps">Small Capitals</span>
<span class="all-smallcaps">All Small Capitals</span>
<span class="oldstyle">0123456789</span>
<span class="lining">0123456789</span>
<span class="tabular">0123456789</span>
<span class="proportional">0123456789</span>
<span class="discretionary-ligatures">office affinity</span>
<span class="no-ligatures">office affinity</span>
<span class="swash">Quaint Typography</span>

不要全局启用 palt。它会改变大量 CJK 字符的字宽，和上下文标点处理的职责重叠。

行内代码、键盘输入与代码块

code、pre、kbd、samp 及代码高亮子节点都使用 Fira Code，并启用 liga 与 calt。连字只改变字形显示，不改变复制出来的 ASCII 字符。

行内代码：const result = value !== null ? value : fallback;。

键盘操作：按 Ctrl + Shift + P；输出：Typography assets generated。

下面同时测试 ->、=>、!=、!==、===、<=、>=、&&、||、:: 等编程连字：

const compare = (left, right) => left !== right && left <= right;
const pipeline = value => value ?? fallback;
const 中文变量 = "ABC中文";

if (compare(a, b) || a === 0) {
  console.log(中文变量, "https://example.com/a-b", "test@example.com");
}

.feature-test::before {
  content: "-> => != !== === <= >= && || ::";
  font-family: "Fira Code", monospace;
}

源码就是上方代码块中的原始文本。点击代码块右上角复制按钮后，得到的仍是普通的 =>、!== 和 &&，不会得到私用区符号。

Kanji 不会处理 pre、code、kbd、samp、textarea、input、script、style 内部文本。因此 const 中文变量 = "ABC中文"; 必须原样保留。

数学排版：MathJax 4 + Euler

数学使用 TeX 定界符书写，由 MathJax 4 独立排版；Euler 提供主要数学字形，New Computer Modern 补齐 Euler 未覆盖的符号。公式 DOM 会在 Kanji 运行前被隔离。

行内公式

设 $$f(x)=x^2+1$$ ，则 $$f$$ 在 $\mathbb R$ 上有定义。若 $$x>0$$ ，则 $\sqrt{x}$ 有意义；因此得到 $A\in M_2(\mathbb Z)$ 。

源码

1 2	设 $f(x)=x^2+1$，则 $f$ 在 $\mathbb R$ 上有定义。若$x>0$，则 $\sqrt{x}$ 有意义。

展示公式与积分

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}.

源码

\[
\int_0^\infty e^{-x^2}\,dx
=
\frac{\sqrt{\pi}}{2}.
\]

AMS 对齐、编号与引用式结构

\begin{aligned} a &= b+c,\\ x &= y+z. \end{aligned} \tag{1}

源码

\[
\begin{aligned}
a &= b+c,\\
x &= y+z.
\end{aligned}
\tag{1}
\]

矩阵、分段函数与集合

A= \begin{pmatrix} 1&2\\ 3&4 \end{pmatrix}, \qquad \det A=-2.

|x|= \begin{cases} x,&x\ge 0,\\ -x,&x<0. \end{cases} \qquad S=\{n\in\mathbb N:n\equiv1\pmod 2\}.

长公式与移动端滚动

\prod_{p\ \mathrm{prime}}\left(1-p^{-s}\right)^{-1} =\sum_{n=1}^{\infty}n^{-s}, \qquad \operatorname{Re}(s)>1, \qquad \sum_{n=1}^{\infty}\frac1{n^2}=\frac{\pi^2}{6}.

展示公式超过窄屏宽度时，只在公式容器内处理溢出，不应让整页横向滚动。

Note 提示块

Note 用于补充、成功、警告和危险信息。它可以包含 Markdown、行内代码和公式，但不要用大量彩色 Note 代替普通章节结构。

默认 Note：普通补充信息，包含重点、inline code 与公式 $$E=mc^2$$ 。

Primary Note：需要突出但不带明确状态的信息。

Success Note：构建、验证或操作成功。

Info Note：背景知识、解释和进一步阅读。

Warning Note：可能踩坑但尚未造成破坏的事项。

Danger Note：会破坏 URL、数据或部署状态的高风险操作。

源码

{% note info %}
这里写 **Markdown**、`inline code` 与公式 $E=mc^2$。
{% endnote %}

{% note warning %}
这里写警告内容。
{% endnote %}

Label 与 Button

Label 适合句子中的短状态，不适合长段落：默认主要成功信息警告危险蓝色绿色红色。

按钮适合明确的外部操作或下载入口：Hexo 文档 Butterfly 文档

源码

{% label 成功 success %}
{% label 警告 warning %}
{% label 蓝色 blue %}

{% btn https://hexo.io/,Hexo 文档,fas fa-link,blue larger %}

Tabs 选项卡

Tabs 用于并列展示互斥内容，例如不同语言的写法或多套配置。重要结论不要只藏在未激活的标签页里。

中文选项卡包含漢字（かんじ）、重点文本与公式 $$x^2+y^2$$ 。

English tab demonstrates EB Garamond ligatures: office, affinity, difficult.

const answer = value => value ?? 42;

源码

{% tabs 示例名称,1 %}
<!-- tab 中文@fas fa-language -->
中文内容。
<!-- endtab -->
<!-- tab English@fas fa-font -->
English content.
<!-- endtab -->
{% endtabs %}

折叠内容与原生 Details

Butterfly 的 hideToggle 适合较长的补充内容；原生 details 适合不依赖主题脚本的简单折叠。核心结论不应默认折叠。

点击展开 Butterfly 折叠内容

折叠区域可以包含多个段落、列表和公式：

Ruby：東京（とうきょう）
代码：npm run build
数学： $e^{i\pi}+1=0$

点击展开原生 details

原生折叠在没有 JavaScript 时也可以工作，适合简短补充。

源码

{% hideToggle 点击展开,#49b1f5,#ffffff %}
这里可以写 Markdown、列表、代码和公式。
{% endhideToggle %}

<details>
  <summary>点击展开</summary>
  <p>补充内容。</p>
</details>

Timeline 时间线

时间线适合版本演进、历史事件和按顺序发生的阶段，不适合表达没有先后关系的普通清单。

本站排版处理顺序

Markdown 源文

作者书写语义正确的 Markdown、HTML、Ruby 标签与 TeX。

Hexo 与 Butterfly

Hexo 生成静态 HTML，Butterfly 负责主题、目录、搜索和 PJAX 页面结构。

MathJax 4

MathJax 先把 TeX 生成独立的公式岛，并补充辅助 MathML。

Kanji Typesetting

Kanji 再处理正文中的元素、标点修正与中西文间距，代码和公式保持隔离。

源码

{% timeline 标题,blue %}
<!-- timeline 第一阶段 -->
第一阶段的内容。
<!-- endtimeline -->
<!-- timeline 第二阶段 -->
第二阶段的内容。
<!-- endtimeline -->
{% endtimeline %}

InlineImg 与 Gallery 图库

inlineImg 把小图片放在文字行内，适合表情或小型标记；不要用它放正文大图。gallery 将多张图片组成响应式图库，并与 Lazyload、Fancybox 配合。

行内图片之前行内图片之后；还可以继续写中文English与公式 $$x+1$$ 。

[{"url":"/media/cover/1.jpg","alt":"画廊图片一","title":"画廊图片一"},{"url":"/media/cover/2.jpg","alt":"画廊图片二","title":"画廊图片二"},{"url":"/media/cover/3.jpg","alt":"画廊图片三","title":"画廊图片三"}]

源码

文字之前 {% inlineImg /pageimg/haoye1.gif 2em %} 文字之后。

{% gallery true,180,3 %}
![图片一](/media/cover/1.jpg "图片一")
![图片二](/media/cover/2.jpg "图片二")
![图片三](/media/cover/3.jpg "图片三")
{% endgallery %}

站点页面与交互功能

这些功能通常不需要写进 Markdown，而由 Butterfly 配置和页面脚本自动提供。

功能	当前状态	怎样观察或使用
文章目录	开启	由二至六级标题自动生成，随滚动高亮
目录阅读百分比	开启	侧栏目录显示滚动进度
回到顶部百分比	开启	未读完显示百分比，悬停或读完显示 ↑
本地搜索	开启	导航栏搜索读取构建生成的 `search.xml`
PJAX	开启	站内切页不做整页刷新，排版会幂等初始化
暗色模式	开启	右侧按钮切换，正文、代码、Ruby、公式继承主题颜色
阅读模式	开启	隐藏页面干扰元素，集中显示正文
侧栏	开启	桌面与移动端均可用，可由按钮隐藏
字数与阅读时间	开启	文章元信息自动计算
代码复制	开启	代码块右上角复制原始源码
代码语言与行号	开启	自动标注语言，长代码块限制高度
图片 Lazyload	开启	进入视口附近再加载图片
Fancybox	开启	点击正文图片查看大图
分享	开启	提供 Facebook、Twitter、微信、微博和 QQ
访问统计	开启	使用不蒜子显示 PV / UV
文章版权卡片	开启	文章末尾自动显示
预加载动画	开启	首次载入显示全页加载动画
404 页面	开启	无效站内路径显示自定义 404
评论	未配置	主题支持评论，但当前没有选择提供商

由于 PJAX 开启，正文排版不能只监听 DOMContentLoaded。本站会在首次加载和 pjax:complete 后初始化，并用文章级状态避免重复包装。

排版职责与运行顺序

页面的最终流程如下：

Markdown / HTML / TeX
        ↓
Hexo + markdown-it
        ↓
Butterfly 页面模板
        ↓
MathJax 4 生成并保护公式 DOM
        ↓
Kanji: initCond → renderElem → correctBiaodian → renderHWS
        ↓
PJAX 切页时清理旧公式，并对新正文重新初始化

排版功能	当前唯一负责人
CJK 与西文/数字间距	Kanji `renderHWS`
元素、Ruby、强调的上下文处理	Kanji `renderElem` + 标准 HTML
标点修正	Kanji `correctBiaodian`
连续标点布局	字体与浏览器原生能力
CJK 基础换行	项目 CSS
SC / TC / JP / KR 字形	`lang` + 项目字体 CSS
西文与 OpenType	EB Garamond + 项目 CSS
代码与编程连字	Fira Code + 代码隔离
数学公式	MathJax 4 + Euler
主题、目录、搜索、暗色模式	Butterfly
首次加载与切页生命周期	项目 `typography.js`

Pangu 和正文全局 text-autospace 都没有同时运行，避免 HWS 重复。MathJax、代码、表单、脚本和样式节点均在 Kanji 的排除范围内。

未启用或已移除的功能

为保持博客简洁并避免职责冲突，下列功能不属于当前写作接口：

功能	状态与原因
Butterfly Pangu	关闭；HWS 由 Kanji 统一处理
`text-autospace` 全局处理	关闭；只保留为关闭 Kanji HWS 后的渐进回退
`renderJiya` / `renderHanging`	暂时关闭；当前版本在闭引号组合上不稳定
Mermaid	关闭；不在本页宣称可用
KaTeX / Butterfly 自带 MathJax	关闭；数学由项目自托管 MathJax 4 处理
简繁转换	关闭；用 `lang` 和作者原文表达语言
网易云音乐 / APlayer	已移除
Sakana	已移除
旧标签插件合集	已移除；只保留主题内置标签与项目 Ruby 标签
点击回顶挂坠装饰	已移除；保留标准百分比与 ↑ 按钮
评论提供商	尚未配置

完整写作示例

下面把多语言、Ruby、数学、重点、代码和引用放进一个自然的数学段落中。这也是本站目标写作方式：作者不为普通中西文间距手工加空格。

设 $$G$$ 是一个 finite group。根据 Sylow 定理，若 $p^n\mid |G|$ ，则存在一个 Sylow $$p$$ -subgroup。

所谓「有限生成アーベル群の基本定理」与 the structure theorem for finitely generated abelian groups 本质上描述的是同一个分类结果。这里需要特别注意有限生成条件。

日文行间注：漢字（かんじ）。终端命令写作 npm run build，不会被正文排版引擎改写。

令

A= \begin{pmatrix} 1&2\\ 3&4 \end{pmatrix}, \qquad \det A=-2.

因此，我们得到 $A\in M_2(\mathbb Z)$ 。

源码

设 $G$ 是一个 finite group。根据 Sylow 定理，
若 $p^n\mid |G|$，则存在一个 Sylow $p$-subgroup。

所谓「<span lang="ja">有限生成アーベル群の基本定理</span>」与
<span lang="en">the structure theorem for finitely generated abelian groups</span>
本质上描述的是同一个分类结果。这里需要**特别注意有限生成条件**。

{% ruby 漢字 かんじ ja %}

令
\[
A=
\begin{pmatrix}
1&2\\
3&4
\end{pmatrix},
\qquad
\det A=-2.
\]

因此，我们得到 $A\in M_2(\mathbb Z)$。

发布前回归检查

一篇包含复杂排版的新文章，至少应检查以下内容：

目录层级是否合理，永久链接和日期是否保留。
简中、繁中、日文、韩文是否使用了正确 lang。
CJK 与 Latin、数字之间是否有视觉间距，复制结果是否保持原文。
URL、Email、C++、C#、Node.js、UTF-8 等技术标识符是否未被破坏。
Ruby、标点、链接、强调与换行是否自然。
代码是否使用 Fira Code，连字显示与复制语义是否正常。
行内公式、展示公式、矩阵和长公式是否正常；公式内部不得出现 Kanji 包装。
375、430、768 与 1440 px 下正文不产生页面级横向滚动。
暗色模式、阅读模式、目录、阅读百分比、代码复制和 PJAX 是否正常。
关闭 JavaScript 后，普通正文、图片、标准 Ruby 与代码是否仍可阅读。

复制下面这句话到纯文本，结果应仍是原始文本，而不是被视觉间距或连字污染的文本：

这是GPT-5模型，代码关系为 a !== b && a <= b，公式为 $$x>0$$ 。

至此，本页覆盖了当前博客可用于日常文章的正文语义、多语言字体、CJK 混排、标点、Ruby、竖排、OpenType、代码、数学、图片、Butterfly 内容组件与站点交互功能。

文章信息与 Front matter

标题、段落与分隔线

三级标题：章节内部的小节

四级标题：小节内部的说明

多语言字形与 lang

简体中文

繁體中文

日本語

한국어

CJK、西文与数字混排

实际效果

标点、引号与嵌套标点

成对标点

省略、连接与疑问

嵌套与相邻组合

强调、重点与文字装饰

实际效果

行内语义元素

定义、缩写与时间

上标、下标、变量与输出

行内引文与来源

链接、URL 与电子邮箱

引用、嵌套引用与图文引用

清单与定义列表

无序清单

有序清单

任务状态

定义列表

表格

图片、说明文字与大图查看

Ruby 行间注

项目 Ruby 标签

标准 HTML Ruby

横排与竖排

从右向左的竖排

从左向右的竖排

字体语义工具

EB Garamond 与 OpenType

默认西文

大小写与数字

连字与花体

行内代码、键盘输入与代码块

数学排版：MathJax 4 + Euler

行内公式

展示公式与积分

AMS 对齐、编号与引用式结构

矩阵、分段函数与集合

长公式与移动端滚动

Note 提示块

Label 与 Button

Tabs 选项卡

折叠内容与原生 Details

Timeline 时间线

InlineImg 与 Gallery 图库

站点页面与交互功能

排版职责与运行顺序

未启用或已移除的功能

完整写作示例

发布前回归检查

多语言字形与 `lang`