2026-04-28

组件测试文章

这是一篇用来检查博客正文组件的示例文章。它不解决具体问题，只把常用排版放在同一个页面里，方便发布前确认样式没有互相挤压。

博客正文

正文段落应该保持可读的行高和稳定的节奏。这里故意写成几段短文本，用来观察标题、段落、强调和链接之间的距离。

普通行内代码长这样：npm run build。强调文字长这样：重要判断先写清楚。链接可以指向 Cloudflare Pages。

列表用于记录步骤：

1. 写 Markdown。
2. 本地构建。
3. 部署到 Cloudflare Pages。

表格用于做小型对照：

Code

代码块需要能换行、保留缩进，并且在窄屏上不撑破页面。

function buildBlog() {
  console.log("site generated in dist/");
}

buildBlog();

.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

ASCII

[比例数字 (Proportional Nums) - 每个数字宽度根据字形变化]
  1 1 1 . 1 1
  8 8 8 . 8 8
  ^ ^ ^   ^ ^  <-- 因为数字 "1" 比 "8" 窄，导致上下两
                   行的小数点和数字无法在垂直方向对齐
                  [比例数字 (Proportional Nums) - 每个数字宽度根据字形变化]
                    1 1 1 . 1 1
                    8 8 8 . 8 8
                    ^ ^ ^   ^ ^  <-- 因为数字 "1" 比 "8" 窄，导致上下两
                                     行的小数点和数字无法在垂直方向对齐
                              [比例数字 (Proportional Nums) - 每个数字宽度根据字形变化]
                                1 1 1 . 1 1
                                8 8 8 . 8 8
                                ^ ^ ^   ^ ^  <-- 因为数字 "1" 比 "8" 窄，导致上下两
                                                 行的小数点和数字无法在垂直方向对齐

Callout

分栏

引用

引用块用于摘录、旁白或保留语气的文本。它应该和 callout 有区别，但仍然保持黑白极简风格。

Note、分割线和脚注

脚注用于补充来源、解释或不适合打断正文的细节。这里放一个脚注引用¹。