设计系统演示 (Design System Demo)

Thu, 16 Apr 2026 00:00:00 +0000

本文是一篇用于展示“克制、书卷气”前端设计的演示文章。它尽可能详尽地包含了博客排版中常见的所有基础与高级 Markdown 元素，方便您直观地预览全局设计语言。

1. 文本排版与格式

在这里，我们测试基础的文字排版效果。我们选用了华文中宋作为主要字体，赋予页面纸质阅读的沉浸感。大行高（2.0）与适当的字间距（0.02em）让视线能够在字里行间自由呼吸。

这也是一段包含加粗 (Bold)、斜体 (Italic)、~~删除线 (Strikethrough)~~ 以及高亮标记 (Highlight) 的测试文本。中英文混排时，适当的间距也是优雅阅读的关键，例如 Apple、Design 以及 Typography。我们还可以添加上标和下标：H₂O 和 X²。

如果你需要引用外部链接，可以点击这里访问 Google 或者查看文章底部的脚注。

2. 杂志风引用块

这是我们最新优化的杂志风格引用块。它去除了沉重的背景和边框，回归文字本身的力量：

“在一片喧嚣的互联网中，克制是一种稀缺的品质。设计不是为了填满屏幕，而是为了引导视线，让读者与文字本身产生对话。”

—— 摘自《设计与留白》

并且它支持多段落和嵌套：

第一层引用，讨论了排版的基本原则。

这是嵌套的第二层引用，通常用于引用中的引用或多重视角对话。

3. 媒体与图片融合

在亮色模式下，图片会带有极其微弱的 1px 边框；而在深色模式下，它会自动降低亮度并去除边框（Media Blending），以免刺伤眼睛。鼠标悬浮于图片之上时可恢复其原本的亮度。

4. 代码块与视觉降噪

所有的代码块顶部都加上了轻盈的红黄绿小圆点（Mac-style dots）。同时，原生厚重的复制按钮被隐藏了。当您将鼠标悬浮在代码块上时，右上角的语言标签（如 PYTHON）会优雅地隐去，而纯文本的 Copy 按钮会平滑地在原位置浮现出来。代码的字体也做了 Fallback 优化。

def fibonacci(n):
    """
    计算斐波那契数列的第 n 项
    """
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    return fibonacci(n-1) + fibonacci(n-2)

# 测试代码
print(f"The 10th Fibonacci number is {fibonacci(10)}")

我们也支持行内代码的渲染：例如在终端中执行 sudo apt update 或 npm install。

5. 复杂的表格

下面展示了一个支持对齐方式的 Markdown 表格排版，表格本身也没有多余的粗边框，保持极致干净：

属性 (左对齐)	值 (居中)	描述 (右对齐)
`margin`	`10px`	控制外边距
`padding`	`2em`	控制内边距
`border`	`none`	移除所有边框

6. 列表系统

无序列表，常用于随意的列举：

第一项：极简滚动条 (Minimalist Scrollbar)
第二项：极细分割线 (Hairline Borders)
- 子项目 A
- 子项目 B
第三项：双主题平滑切换 (Dark/Light mode)

有序列表，带有明确的顺序：

构思设计语言
调整 CSS 变量
1. 定义颜色
2. 调整间距
部署与重构

任务列表（Task List），用于待办事项跟踪：

修复 LaTeX 无法渲染的问题
优化代码块文字与右上角按钮交互
补全所有 Markdown 元素的测试样例
继续撰写新的博客文章

7. 数学公式 (LaTeX)

感谢注入了 KaTeX 引擎，现在博客可以完美渲染复杂的数学公式了。

这是行内公式的展示：质能方程 $E = mc^2$ 以及欧拉公式 $e^{i\pi} + 1 = 0$。

这是块级公式（Display Math）的展示，支持多行和积分等复杂符号：

$$ \mathcal{L} = \int \left( \frac{1}{2} (\partial_\mu \phi)(\partial^\mu \phi) - \frac{1}{2} m^2 \phi^2 \right) d^4x $$$$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $$

8. 交互折叠块 (Details / Summary)

我们还为原生的 HTML 折叠块添加了平滑的下拉动画：

{{< details “点击这里展开查看隐藏的惊喜” >}} 这是被隐藏的内容！在点击上方文字后，它会带有平滑的向下展开动画（slide-down animation）浮现出来。非常适合用于剧透警告或大段非核心代码的折叠。 {{< /details >}}

总结

所有的细节（如边框、阴影、间距、字体权重的把控，以及修复后的代码展示与数学公式）共同构成了目前的“纯粹书卷”风格。您可以利用右上角的太阳/月亮图标，随时切换深浅模式，查看这些元素在不同光线下的表现。

样式 on Xiang's Blog