全量文章组件展示
完整的文章写作与设计样例:逐一展示现有组件、多种受支持的内容结构,以及每种效果可复制的 Markdown 写法。
本文是一份写作与设计样例。示例作者甲、示例作者乙及其单位均为虚构元信息,不代表真实研究署名。文中的数量均为演示值;代码与记录的输出都是静态文本,网站不会执行它们。
每个编号小节都标明真实组件名,展示两至三种现有内容或结构效果,并给出生成该效果的 Markdown。展开“Markdown 写法”即可复制完整样例;这些原生折叠控件在没有 JavaScript 时也能使用。所有例子共用现有文章样式,内容结构变化不代表切换另一套 CSS 皮肤。
也可阅读 English version,或下载示例附件。本篇会同时显示在英文与中文 Research 列表中。
01 · Heading(H2–H6 标题)
Heading 表达文档层级。页面标题提供唯一的 H1;正文 H2、H3 自动进入 ArticleContents 目录,H4–H6 保留标题语义,但不增加主目录条目。
效果 A:主节与子节
本节中的一个问题
子节为问题中的一个部分提供明确名称。
本组开头的 H2 就是主节效果,此处不再重复渲染同一个 H2。
Markdown 写法
## 01 · Heading(H2–H6 标题)
### 本节中的一个问题
子节为问题中的一个部分提供明确名称。
效果 B:更深的补充层级
审阅范围
本次审阅关注文字表达。
一项补充区分
将观察和解释分别说明。
最后一处细节
保留原始来源,便于回查。
Markdown 写法
#### 审阅范围
本次审阅关注文字表达。
##### 一项补充区分
将观察和解释分别说明。
###### 最后一处细节
保留原始来源,便于回查。
02 · Paragraph(段落)
Paragraph 负责普通正文与段间距。空行会建立独立段落;源文件中同一段内的普通换行,通常仍属于同一段。
效果 A:简短单段
一篇清晰的文章从具体问题开始。简短的段落让读者容易找到接下来需要理解的内容。
Markdown 写法
一篇清晰的文章从具体问题开始。简短的段落让读者容易找到接下来需要理解的内容。
效果 B:相互衔接的两段
第一段交代读者可以检查什么:一个问题、它所处的语境,以及用于讨论它的证据。
第二段说明边界。本例只展示阅读结构,不对任何测量结果作出判断。
Markdown 写法
第一段交代读者可以检查什么:一个问题、它所处的语境,以及用于讨论它的证据。
第二段说明边界。本例只展示阅读结构,不对任何测量结果作出判断。
效果 C:中英文混排
审阅者可以写下“先看证据,再读结论”,也可以保留对应的英文短语 inspect the evidence。两种语言都属于同一段中可选择、可复制的文字。
Markdown 写法
审阅者可以写下“先看证据,再读结论”,也可以保留对应的英文短语 inspect the evidence。两种语言都属于同一段中可选择、可复制的文字。
03 · Strong / Emphasis / Strikethrough(粗体、强调、删除线)
Strong、Emphasis、Strikethrough 是 TextFormatting 中实际使用的行内组件,分别表达重要性、语气强调,以及已经被替换的说法,沿用统一文字样式。
效果 A:突出重点
在展示证据之前,先让读者看到需要审阅的问题。
Markdown 写法
在展示证据之前,先让读者看到**需要审阅的问题**。
效果 B:语气强调
在检查来源之前,这条说明仍然是暂定的。
Markdown 写法
在检查来源之前,这条说明仍然是*暂定的*。
效果 C:修订与组合强调
将已经证实的结果改为用于说明结构的比较。
Markdown 写法
将~~已经证实的结果~~改为***用于说明结构的比较***。
04 · InlineCode(行内代码)
InlineCode 在正文中区分字面标识符或字段值。它仍然是文字,不是输入框,也不会执行表达式。
效果 A:字段与取值
审阅草稿时,将 visible 设置为 false。
Markdown 写法
审阅草稿时,将 `visible` 设置为 `false`。
效果 B:多个标识符嵌入正文
先检查 question_id,再比较 review_status,最后保留 source_reference。
Markdown 写法
先检查 `question_id`,再比较 `review_status`,最后保留 `source_reference`。
05 · Lists(列表)
Lists 将无序列表、有序列表和列表项映射为对应的语义组件。缩进表达层次,显式起始编号可以接续前文步骤。
效果 A:无序与嵌套层次
- 明确问题。
- 检查材料。
- 保留来源语境。
- 记录不确定性。
- 标出尚未检验的假设。
- 审阅解释。
Markdown 写法
- 明确问题。
- 检查材料。
- 保留来源语境。
- 记录不确定性。
- 标出尚未检验的假设。
- 审阅解释。
效果 B:从指定编号继续
- 审阅图片描述。
- 检查表格标签。
- 回看结论。
Markdown 写法
4. 审阅图片描述。
5. 检查表格标签。
6. 回看结论。
效果 C:步骤中包含补充要点
- 定义比较方式。
- 命名参照情况。
- 说明发生了什么变化。
- 交代限制。
- 邀请审阅。
Markdown 写法
1. 定义比较方式。
- 命名参照情况。
- 说明发生了什么变化。
2. 交代限制。
3. 邀请审阅。
06 · TaskCheckbox(只读任务项)
TaskCheckbox 将已完成和未完成的任务项显示为禁用、只读的复选框。读者可以查看状态,点击不会修改文章源文件。
效果 A:混合完成状态
Markdown 写法
- [x] 说清问题。
- [x] 补充图片描述。
- [ ] 在手机上检查文字。
效果 B:按工作分组
- 文字审阅
- 设计审阅
Markdown 写法
- 文字审阅
- [x] 标明内容是样例。
- [ ] 通读完整草稿。
- 设计审阅
- [ ] 检查窄屏表格。
07 · Link(链接)
Link 提供普通导航,并沿用统一的悬停和键盘焦点效果。站内页面、外部资料、页内锚点和本篇附件都应使用能说明目的地的链接文字。
效果 A:站内与语言导航
浏览 Research 文章列表,或阅读本篇的英文版本。
Markdown 写法
浏览 [Research 文章列表](/zh/research/),或阅读本篇的[英文版本](/research/article-component-showcase/)。
效果 B:外部资料与页内目标
Markdown 写法
阅读 W3C 的[页面结构教程](https://www.w3.org/WAI/tutorials/page-structure/),或跳到本文的[图 2](#fig-review-context)。
效果 C:本篇附件
下载示例审阅记录,查看普通文本附件的链接效果。
Markdown 写法
下载[示例审阅记录](./assets/review-notes.txt),查看普通文本附件的链接效果。
08 · Blockquote(引用)
Blockquote 将引用内容与周围正文区分开。下列句子都是虚构的编辑示例,分别展示单段、多段和嵌套结构。
效果 A:简短引用
问题越清楚,证据越容易找到自己的位置。
Markdown 写法
> 问题越清楚,证据越容易找到自己的位置。
效果 B:同一引用中的两个段落
先说明读者应当注意什么。
再解释这张图无法证明什么。
Markdown 写法
> 先说明读者应当注意什么。
>
> 再解释这张图无法证明什么。
效果 C:引用中再嵌入回应
审阅问题:什么会改变这一解释?
不同的来源,或一个尚未检验的假设,都可能改变解释。
Markdown 写法
> 审阅问题:什么会改变这一解释?
>
> > 不同的来源,或一个尚未检验的假设,都可能改变解释。
09 · Image(普通图片)
Image 显示普通 Markdown 图片,不会自动生成可见图注。现有统一样式让图片占满可用阅读列宽度,同时保持源文件比例;因此小尺寸源图也会放大,源文件尺寸不是控制显示宽度的开关。
效果 A:横向源图(720 × 360)
Markdown 写法

效果 B:纵向源图(360 × 480)
Markdown 写法

效果 C:小尺寸源图(160 × 100)
此例展示当前占满阅读列宽度的行为,不表示已有缩略图样式。
Markdown 写法

10 · Figure / FigureCaption(图形与图注)
figure 扩展组合 Figure、Image,以及可选的 FigureCaption。图注文字和编号由作者填写;可选且唯一的 id 用于交叉引用。
效果 A:简短图注
Markdown 写法
::figure{src="./assets/landscape.svg" alt="三个示例柱形从同一条基线向上延伸。" caption="图 1. 紧凑的版式比较。" id="fig-compact"}
效果 B:较长图注与交叉引用
Markdown 写法
::figure{src="./assets/landscape.svg" alt="三个虚构柱形在同一条基线上具有不同高度。" caption="图 2. 这些柱形用于观察长图注需要的空间。高度均为虚构版式值,没有单位或实验含义;这张图只辅助说明写作结构,不能据此作出定量结论。" id="fig-review-context"}
[返回图 1](#fig-compact),或[直接链接到图 2](#fig-review-context)。
效果 C:保留图形语义,不填写图注
Markdown 写法
::figure{src="./assets/small.svg" alt="圆形与方形并列,用于展示小尺寸源图。"}
11 · Table / TableCaption(表格与表题)
Table 渲染 GFM 表格,支持单元格左对齐、居中和右对齐。table 扩展增加原生 TableCaption 表题。窄屏中的宽表格只在自身区域横向滚动。
效果 A:无表题,三种对齐
| 项目 | 标记 | 数量 |
|---|---|---|
| 问题 | Q | 3 |
| 审阅 | R | 12 |
Markdown 写法
| 项目 | 标记 | 数量 |
| :------- | :--: | ---: |
| **问题** | `Q` | 3 |
| _审阅_ | `R` | 12 |
效果 B:带表题的紧凑表格
| 阶段 | 状态 |
|---|---|
| 明确问题 | 就绪 |
| 检查证据 | 审阅中 |
Markdown 写法
:::table{caption="表 1. 示例审阅状态"}
| 阶段 | 状态 |
| :------- | :----- |
| 明确问题 | 就绪 |
| 检查证据 | 审阅中 |
:::
效果 C:列数较多的比较表
| 阶段 | 主要问题 | 材料 | 示例负责人 | 审阅状态 | 演示数量 |
|---|---|---|---|---|---|
| 明确问题 | 正在比较什么? | 一段简短问题 | 示例作者甲 | 就绪 | 3 |
| 检查证据 | 哪些内容可检查? | 配图与来源说明 | 示例作者乙 | 待办 | 12 |
Markdown 写法
:::table{caption="表 2. 用于观察宽表格的演示值"}
| 阶段 | 主要问题 | 材料 | 示例负责人 | 审阅状态 | 演示数量 |
| :------- | :--------------- | :------------- | :--------- | :------: | -------: |
| 明确问题 | 正在比较什么? | 一段简短问题 | 示例作者甲 | 就绪 | 3 |
| 检查证据 | 哪些内容可检查? | 配图与来源说明 | 示例作者乙 | 待办 | 12 |
:::
12 · CodeBlock(代码块)
CodeBlock 显示代码围栏,语言标记控制高亮,可选且带引号的 title 提供标题。长行只在代码框内滚动。下面展示具名 Python、其他语言,以及纯文本降级,均不会在页面中执行。
效果 A:带标题的 Python
questions = ["Frame", "Inspect", "Review"]
for question in questions:
print(question)
```python title="review.py"
questions = ["Frame", "Inspect", "Review"]
for question in questions:
print(question)
```
效果 B:TypeScript 与 JSON
type Review = { stage: string; checked: boolean };
const review: Review = { stage: "Frame", checked: false };
{ "stage": "Frame", "checked": false }
```typescript title="review.ts"
type Review = { stage: string; checked: boolean };
const review: Review = { stage: "Frame", checked: false };
```
```json title="review.json"
{ "stage": "Frame", "checked": false }
```
效果 C:未知语言保留为纯文本
Syntax highlighting is unavailable for review-notes; shown as plain text.
question: 读者能够检查什么?
status: 仅供示例
未知语言保留原文,使用现有纯文本降级;这不会增加一套新的语法规则。
```review-notes title="review.notes"
question: 读者能够检查什么?
status: 仅供示例
```
13 · CodeExample(源码与静态输出组)
code-example 扩展实际渲染 CodeExample 组件,将一块源码围栏与可选的一块输出围栏组成一组。输出由作者填写,是记录的文本,不是网站现场计算的结果。
效果 A:源码和记录的输出
print(3)
3
:::code-example{title="一个简单计算"}
```python
print(3)
```
```text
3
```
:::
效果 B:只展示源码,不提供输出
const label = "可以审阅";
:::code-example{title="一条审阅标签"}
```javascript
const label = "可以审阅";
```
:::
14 · code-file → CodeBlock(读取代码文件)
code-file 是复用 CodeBlock 的受控写法,并不存在单独的“CodeFile”组件。内容准备时会读取本篇 assets 内的 UTF-8 文件,页面只显示文字,不会执行文件。
效果 A:读取 Python 文件
"""Static article sample. The website displays this file without running it."""
questions = ["Frame", "Inspect", "Review"]
for number, question in enumerate(questions, start=1):
print(f"{number}. {question}")
Markdown 写法
::code-file{src="./assets/example.py" language="python" title="example.py"}
效果 B:读取 JSON 文件
{
"kind": "article-layout-sample",
"steps": ["Frame", "Inspect", "Review"],
"experimentalResult": false
}
Markdown 写法
::code-file{src="./assets/example.json" language="json" title="example.json"}
15 · Details / Summary(折叠补充内容)
details 扩展使用原生 Details 和 Summary 组件。标题为纯文本,内部可以写 Markdown;键盘操作与展开都不依赖 JavaScript。结束冒号必须独占一行,并在前后留空行。
效果 A:简短补充说明
为什么保留来源说明?
来源说明保存上下文,又不会打断主要段落。
:::details{title="为什么保留来源说明?"}
来源说明保存**上下文**,又不会打断主要段落。
:::
效果 B:包含列表和带表题的表格
查看补充审阅材料
- 检查问题表述。
- 保留来源语境。
| 检查项 | 状态 |
|---|---|
| 来源标签 | 就绪 |
| 解释 | 待办 |
外层使用四个冒号,让内部三个冒号的表格容器可以独立结束。
::::details{title="查看补充审阅材料"}
- 检查问题表述。
- 保留来源语境。
:::table{caption="一张补充审阅表"}
| 检查项 | 状态 |
| :------- | :--- |
| 来源标签 | 就绪 |
| 解释 | 待办 |
:::
::::
16 · Footnotes(脚注)
Footnotes 与 FootnoteReference 将补充说明放到文章末尾。不同脚注各自定义;同一脚注被多次引用时,会为各次引用提供独立返回链接。
效果 A:两个不同脚注
Markdown 写法
数量需要说明语境。[^counts] 角色标签也需要说明语境。[^roles]
[^counts]: 文中的数量均为演示值,不是测量结果。
[^roles]: 示例作者及单位用于展示元信息,不构成真实署名。
效果 B:同一脚注重复引用
第一次检查参考这条审阅说明。3 最后一次检查仍然引用同一条说明。3
Markdown 写法
第一次检查参考这条审阅说明。[^review] 最后一次检查仍然引用同一条说明。[^review]
[^review]: 重复引用共用一个脚注定义,每次引用都有对应的返回链接。
17 · Divider / LineBreak(分隔线与硬换行)
Divider 用水平分隔线区分相邻内容。LineBreak 在同一段中主动换行,适合需要保持联系的两行文字。
效果 A:在两个段落之间分隔
这一段样例到此结束。
这一段开始补充审阅说明。
Markdown 写法
这一段样例到此结束。
---
这一段开始补充审阅说明。
效果 B:同段中的主动换行
第一行:说清问题。
第二行:保留相应语境。
Markdown 写法
第一行:说清问题。\
第二行:保留相应语境。
18 · InlineMath / MathBlock(数学公式)
公式使用 LaTeX 数学记号,在构建时渲染进文章 HTML。InlineMath 跟随正文基线;MathBlock 单独占行,过宽时只在阅读列内横向滚动。以下均为写作示例,不代表实测研究结果。
效果 A — 行内记号与条件概率
干预可写作 . 比较 与 ;估计式也可以包含系数 以及不确定性 .
Markdown 写法
干预可写作 $\mathrm{do}(X=x)$.
比较 $P(Y \mid X=x)$ 与 $P(Y \mid \mathrm{do}(X=x))$;
估计式也可以包含系数 $\alpha_i$ 以及不确定性 $\sigma^2$.
效果 B — 独立公式、分式与求和
Markdown 写法
$$
x_j = f_j(\mathrm{pa}_j, e_j), \qquad j = 1, \dots, d
$$
$$
\widehat{\mu}=\frac{1}{n}\sum_{i=1}^{n}x_i,
\qquad \sigma=\sqrt{\frac{1}{n}\sum_{i=1}^{n}(x_i-\widehat{\mu})^2}
$$
效果 C — 多行对齐、分段函数与矩阵
Markdown 写法
$$
\begin{aligned}
Y &= \beta_0 + \beta_1X + \varepsilon \\
\mathbb{E}[Y \mid X=x] &= \beta_0 + \beta_1x
\end{aligned}
$$
$$
g(x)=\begin{cases}
x^2 & \text{if } x \ge 0 \\
-x & \text{if } x < 0
\end{cases}
\qquad
A=\begin{bmatrix}1 & 0 \\ \beta & 1\end{bmatrix}
$$
效果 D — Markdown 表格中的公式
| 写作示例 | 数学表达式 |
|---|---|
| 线性机制 | |
| 干预 | |
| 条件量 |
Markdown 写法
| 写作示例 | 数学表达式 |
| :------- | :-------------------------------------------- |
| 线性机制 | $x_j=\sum_{k\in\mathrm{pa}_j}b_{jk}\,x_k+e_j$ |
| 干预 | $\mathrm{do}(x_j=a)$ |
| 条件量 | $P(y\mid\mathrm{do}(x=a))$ |
表格中的条件竖线使用 \mid,避免被识别为 Markdown 列分隔符。
效果 E — 超宽公式的局部横向滚动
下面的表达式特意写得较长,用于检查 MathBlock 容器。在窄屏上只横向滚动公式,文章页面不应整体超宽。
Markdown 写法
$$
\mathcal{L}(\theta)=\frac{1}{n}\sum_{i=1}^{n}(y_i-f_\theta(x_i))^2+\lambda_1\sum_{j=1}^{d}|\theta_j|+\lambda_2\sum_{j=1}^{d}\theta_j^2+\lambda_3\sum_{j=1}^{d}\sum_{k=1}^{d}A_{jk}^2+\lambda_4\sum_{i=1}^{n}\sum_{j=1}^{d}(x_{ij}-\widehat{x}_{ij})^2
$$
代码中的 $x^2$ 保持源码显示。普通金额可写作 \$20。本版采用 $...$ 和 $$...$$,不增加 MyST 指令、自动公式编号或跨公式引用。
页面组件 · ResearchArticle / ArticleContents
这些内容由页面与文章系统生成,不是额外的正文扩展。本文自身的头部已经展示了下列字段。
ResearchArticle 与关联阅读
YAML 的 title 生成 H1,description 生成可见摘要,date / updated 提供发布日期与更新日期。authors 包含各位示例作者的单位;tags、带图注的 cover 和 resources 生成相应头部内容。related 提供正文之后的关联阅读文章。上方姓名仅为格式演示,不是真实署名。
ArticleContents 自动目录
系统从正文 H2/H3 生成目录。H4–H6,以及引用或折叠内容内部的标题,不进入主目录。作者不需要在正文中写 ArticleContents 标签,也不需要维护第二份手工目录。
可复制的完整文章骨架
将下面的 YAML 放在文件最开头,并把封面资源放在同篇文章包中。必填字段只有 title、description 和 date;其余字段以紧凑形式展示本文涉及的页面能力。resources 使用 HTTPS 或站内根路径;本地附件应像 Link 一节那样写在正文链接里。
---
schema: "article-v1"
title: "一个可审阅的问题"
description: "简短说明问题与适用边界。"
date: "2026-11-04"
updated: "2026-11-05"
dateVerified: false
visible: false
category: "evaluation"
lang: "zh-CN"
authors:
- name: "示例作者甲"
affiliations:
- "示例编辑研究室(虚构)"
- name: "示例作者乙"
affiliations:
- "示例设计组(虚构)"
tags:
- "写作样例"
cover:
src: "./assets/cover.svg"
alt: "三个面板分别展示文字、配图,以及表格和代码。"
caption: "仅作说明的文章封面。"
resources:
- label: "Research 文章列表"
url: "/zh/research/"
related:
- "article-elements"
- "markdown-components"
---
## 问题
解释读者可以检查什么。
当前支持边界
这些都是现有文章样式中的内容结构变化,不是多套 CSS 主题。LaTeX 数学公式已通过统一 Math 组件接入;视频、Mermaid 与交互图表尚未接入。文章不接受任意 HTML、JSX、脚本、import、class 或 style。本页说明当前支持的渲染能力。