样张：主题组件一览

这一页不讲道理，只排样：把主题能渲染的组件按固定顺序放在一起，调整配色或排版之后，在浅色与深色模式下各看一遍，就能发现哪里出了问题。

正文与行内元素

正文段落使用粗体、斜体与粗斜体，也可以删除一段文字。行内代码如errno和printf("%d\n", x)使用等宽字体，链接分为站内链接与站外链接两种。中文与English、数字2026之间不手动加空格，由CSS自动留出间距。注音有漢字（かんじ）、汉字（hàn zì）与临时方案（永久保留）三种用法。脚注标记出现在句末¹，正文末尾会列出脚注内容；脚注里也可以有链接²。

A paragraph in English checks the Latin side of the type: quotation marks “like these”, an em dash — like this — and an ellipsis… all pass through the typographer.

三级标题

四级标题

四级标题以下很少使用，这里只确认层级关系依然清楚。

列表

• 无序列表的第一项
• 第二项包含较长的文字，用来检查换行之后的悬挂缩进是否与首行文字对齐，而不是与项目符号对齐
  • 嵌套的第二层
    • 嵌套的第三层
• 第三项

1. 有序列表
2. 第二步
   1. 嵌套的有序列表
   2. 第二个子项
3. 第三步

• 已完成的任务
• 尚未完成的任务

术语

定义列表的解释部分。

引用

引用使用无边框的浅色底块，字号略小于正文，但颜色不变淡。

嵌套的引用。

引用里也可以有行内代码和链接。

提示框

📓 注意

NOTE：背景信息与补充说明，含一个链接。

💡 友情提示

TIP：使用技巧与建议。

❗ 重要

IMPORTANT：必须了解的关键前提。

🚨 警告

WARNING：需要特别注意的警示。

⚠️ 小心

CAUTION：可能造成严重后果的操作。

📜 历史文件已不具备现实意义

HISTORICAL：内容已过时，仅作存档。

⚠️ 免责声明

DISCLAIMER：免责声明。

📓 带自定义标题和代码的提示框

提示框里的代码块：

sysctl kern.osreldate

表格

较宽的表格应在窄屏上横向滚动，而不是撑破版面：

代码

不足五行的代码块不显示行号：

$ uname -r
15.0-RELEASE

五行以上的代码块显示行号，并高亮第8至9行。这段C代码同时用到关键字、预处理指令、字符串、数值、函数名与注释：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#include <stdio.h>
#include <stdlib.h>

#define ITERATIONS 5

/* 逻辑斯谛映射：r在3.9附近进入混沌区间 */
static double
logistic(double r, double x)
{
	return (r * x * (1.0 - x));
}

int
main(void)
{
	double x = 0.2;

	for (int i = 0; i < ITERATIONS; i++) {
		x = logistic(3.9, x);
		printf("%d: %.6f\n", i, x);
	}
	return (EXIT_SUCCESS);
}

Python代码检查类名、装饰器与内置函数的配色：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

from dataclasses import dataclass


@dataclass
class Colour:
    """一种传统色。"""
    name: str
    hex: str

    def rgb(self) -> tuple[int, int, int]:
        # 去掉开头的「#」，每两位一组
        return tuple(int(self.hex[i:i + 2], 16) for i in (1, 3, 5))


print(Colour("蘇芳", "#9E3D3F").rgb())

HTML代码检查标签与属性的配色：

<figure class="x-card" id="x-204125811366830080">
  <img src="wairo.png" alt="和色色票" width="1600" height="640">
  <figcaption>色票</figcaption>
</figure>

差异代码检查增删行的底色：

1
2
3
4
5
6

--- a/tokens.css
+++ b/tokens.css
@@ -193,3 +193,3 @@
-      --bg: #1F1E1D;
+      --bg: #151514;
       --surface: #1B1B19;

没有语言标记的预格式文本：

+--------+     +--------+
| client | --> | server |
+--------+     +--------+

公式

行内公式$e^{i\pi} + 1 = 0$与正文同行排列，独立公式居中显示：

图表

flowchart LR
    A[撰写Markdown] --> B[Hugo构建]
    B --> C{需要搜索?}
    C -- 是 --> D[生成索引]
    C -- 否 --> E[发布]
    D --> E

图片

页面包中的图片会生成多种尺寸与WebP版本：

嵌入卡片

X（Twitter）的帖子从构建时缓存的数据渲染成静态卡片，不加载第三方脚本：

分隔线

分隔线上方的段落。

分隔线下方的段落。

• ← 少即是多：静态博客的依赖取舍