一篇文章，展示博客的所有排版元素

这是一篇专门用于预览博客排版的示例文章。它不是一份语法手册，而是把以后写技术文章时最常用的元素放在同一个页面里：标题层级、强调文本、站内链接、inline code、Callout、代码块、表格与列表。

普通引用仍然保留安静、克制的样式，适合摘录一句话或补充上下文。

1. 标题与正文层级

二级标题使用柔和橙色，是每个主要章节的入口。从第二个二级标题开始，章节之间会出现三个小圆点作为分隔符，让长文章更容易扫描，又不会形成厚重的框线。

三级标题：章节中的主题

三级标题使用 Sage / Teal，适合拆分一个章节内的不同论点。正文保持较舒展的行高，重点内容可以加粗，术语可以写成 TTFT 或 GPU Kernel。

四级标题：更细的说明

四级标题的颜色更接近正文，只保留轻微的层次差异。通常文章最多使用到这里，避免目录变得过深。

2. Callout 提示块

Callout 使用统一结构与低饱和背景，没有生硬边框。标题可以省略，也可以在类型标记后自定义。

Callout 的 Markdown 写法如下：

> [!TIP] 可选的自定义标题
>
> 这里填写提示内容，可以使用 **强调** 和 `inline code`。

3. 代码块与语法高亮

代码块使用 Shiki 高亮，并分别为明亮与深色主题准备了配色。顶部的三个圆点只承担视觉提示，不会占用正文内容。

TypeScript：带类型的数据处理

type RequestSample = {
  ttft: number;
  outputTokens: number;
  decodeTime: number;
};

export function summarize(samples: RequestSample[]) {
  const totalTokens = samples.reduce(
    (sum, sample) => sum + sample.outputTokens,
    0,
  );

  return {
    meanTTFT: samples.reduce((sum, sample) => sum + sample.ttft, 0) / samples.length,
    tokensPerSecond: totalTokens / samples.reduce(
      (sum, sample) => sum + sample.decodeTime,
      0,
    ),
  };
}

Python：一个简洁的统计函数

from statistics import mean

def goodput(latencies: list[float], slo: float) -> float:
    """Return the share of requests completed within the SLO."""
    if not latencies:
        return 0.0

    completed = sum(latency <= slo for latency in latencies)
    return completed / len(latencies)

print(f"Goodput: {goodput([0.8, 1.1, 0.9], slo=1.0):.1%}")

Shell：命令行片段

# 构建并预览 Astro 网站
npm run build
npm run preview

4. 列表、任务与表格

无序列表适合并列信息：

Latency：单个请求需要等待多久
Throughput：系统单位时间处理多少工作
Goodput：满足服务目标的有效吞吐量

有序列表适合表达过程：

固定测试环境与模型配置。
预热服务，排除首次编译的影响。
分别记录 P50、P95 与 P99 延迟。

任务列表可以作为文章末尾的实践清单：

明确指标定义
记录实验配置
增加更多并发场景

指标	关注视角	示例单位
TTFT	首次响应速度	ms
TPOT	持续生成速度	ms / token
Throughput	系统整体能力	tokens / s
Goodput	满足 SLO 的能力	requests / s

5. 写作时如何使用

平时只需要正常写 Markdown。Callout 的第一行使用 [!TYPE] 标记，代码围栏后填写语言名称，其余样式都会由博客统一处理。

这篇示例文章会和普通文章一样出现在博客时间线中，之后也可以随时作为写作模板参考。