文档烟雾测试页面

本页面有两个用途

• 演示 Kubernetes 文档如何使用 Markdown
• 提供一个“烟雾测试”文档，我们可以用它来测试影响整体文档的 HTML、CSS 和模板更改。

标题级别

上面的标题是 H2。页面标题呈现为 H1。以下部分显示 H3 - H6。

### H3

This is in an H3 section.

#### H4

This is in an H4 section.

##### H5

This is in an H5 section.

###### H6

This is in an H6 section.

效果

H3

这是 H3 部分的内容。

H4

这是 H4 部分的内容。

H5

这是 H5 部分的内容。

H6

这是 H6 部分的内容。

行内元素

行内元素出现在段落、列表项、警告或其它块级元素的文本中。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

行内文本样式

你可以在 Markdown 中使用不同的文本样式，例如

- **bold**
- _italic_
- ***bold italic***
- ~~strikethrough~~
- <u>underline</u>
- _<u>underline italic</u>_
- **<u>underline bold</u>**
- ***<u>underline bold italic</u>***
- `monospace text`
- **`monospace bold`**

效果

• 粗体
• 斜体
• 粗斜体
• 删除线
• 下划线
• 下划线斜体
• 下划线粗体
• 下划线粗斜体
• 等宽文本
• 等宽粗体

列表

Markdown 没有严格的规则来处理列表。当我们从 Jekyll 迁移到 Hugo 时，一些列表出了问题。要修复它们，请记住以下几点：

• 确保你将子列表项缩进 2 个空格。

• 要结束一个列表并开始另一个列表，你需要在两个列表之间的新行上添加一个 HTML 注释块，与左边界对齐。否则，无论你在两个列表之间放置多少空行，第一个列表都不会结束。

无序列表

你可以在 Markdown 中添加无序列表，例如

- This is a list item.
* This is another list item in the same list.
- You can mix `-` and `*`.
  - To make a sub-item, indent two spaces.
    - This is a sub-sub-item. Indent two more spaces.
  - Another sub-item.

效果

• 这是一个列表项。

• 这是同一列表中的另一个列表项。

• 你可以混合使用 - 和 *。
  • 要创建子项，缩进两个空格。
    • 这是一个子子项。再缩进两个空格。
  • 另一个子项。

另外，

• 这是一个新列表。使用 Hugo 时，你需要使用 HTML 注释来分隔两个连续的列表。HTML 注释必须位于左边界。

• 无序列表可以包含段落或块级元素。

  缩进内容使其与无序列表项的第一行对齐。此段落和代码块与上方 Bullet 中的第一个 B 对齐。

  ls -l
  

  • 以及一些块级内容之后的子列表

• 无序列表项可以包含有序列表。

  1. 有序子列表项 1
  2. 有序子列表项 2

有序列表

1. 这是一个列表项。
2. 这是同一列表中的另一个列表项。你在 Markdown 中使用的数字不一定与最终输出中的数字关联。按照惯例，我们使它们保持同步。

1. 这是一个新列表。使用 Hugo 时，你需要使用 HTML 注释来分隔两个连续的列表。HTML 注释必须位于左边界。

2. 有序列表可以包含段落或块级元素。

   缩进内容使其与有序列表项的第一行对齐。此段落和代码块与上方 Numbered 中的 N 对齐。

   ls -l
   

   • 以及一些块级内容之后的子列表。尽管缩进更多，但这与上面的段落和代码块处于同一“级别”。

Tab 列表

Tab 列表可用于有条件地显示内容，例如当需要文档记录多个需要不同说明或上下文的选项时。

• 选择一个...
• 格式化 Tab 列表
• 嵌套标题

echo 'Tab lists may contain code blocks!'

复选框列表

复选框列表在技术上是无序列表，但列表符号被 CSS 抑制了。

• 这是一个复选框列表项
• 这是一个已选中的复选框列表项

代码块

你可以通过在代码块前后各放置三个反引号来创建代码块。代码块请务必使用反引号（代码围栏）。 这样可以指定包含代码的语言，从而启用语法高亮。它也比使用缩进更具预测性。

this is a code block created by back-ticks

使用反引号的方法有一些优点。

• 几乎每次都有效。
• 查看源代码时更紧凑。
• 它允许你指定代码块的语言，以便进行语法高亮。
• 它有明确的结束标记。有时，在对空格敏感的语言（如 Python 或 YAML）中，缩进方法会失效。

要指定代码块的语言，请将其直接放在第一组反引号后面

ls -l

Kubernetes 文档代码块中常用的语言包括

• bash / shell (两者效果相同)
• go
• json
• yaml
• xml
• none (禁用代码块的语法高亮)

包含 Hugo Shortcode 的代码块

要像上面示例那样显示原始的 Hugo shortcode 并防止 Hugo 解释它们，请在 < 字符后和 > 字符前直接使用 C 风格的注释。下面的示例说明了这一点（请查看本页的 Markdown 源代码）。

{{< alert color="warning" >}}This is a warning.{{< /alert >}}

链接

要格式化链接，将链接文本放在方括号内，后面紧跟圆括号内的链接目标。

• [链接到 Kubernetes.io](https://kubernetes.ac.cn/) 或
• [相对链接到 Kubernetes.io](/)

你也可以使用 HTML，但不建议这样做。例如，<a href="https://kubernetes.ac.cn/">链接到 Kubernetes.io</a>。

镜像

要格式化图片，请使用类似于链接的语法，但在前面添加一个 ! 字符。方括号包含图片的 alt 文本。请尽量始终使用 alt 文本，以便使用屏幕阅读器的人也能从图片中受益。

![pencil icon](/images/pencil.png)

效果

要指定扩展属性（如宽度、标题、说明等），请使用 figure shortcode，这比使用 HTML <img> 标签更可取。此外，如果需要图片同时也是超链接，请使用 link 属性，而不是像下面所示那样将整个 figure 包裹在 Markdown 链接语法中。

即使你选择不使用 figure shortcode，图片也可以成为链接。这次铅笔图标链接到 Kubernetes 网站。最外层的方括号包含整个图片标签，链接目标位于末尾的圆括号中。

[![pencil icon](/images/pencil.png)](https://kubernetes.ac.cn)

效果

你也可以使用 HTML 来表示图片，但不建议这样做。

<img src="/images/pencil.png" alt="pencil icon" />

效果

表格

简单表格每行代表一行，列之间用 | 字符分隔。标题行与内容行之间用仅包含至少三个 - 字符的单元格分隔。为了便于维护，请尽量使所有单元格分隔符对齐，即使需要使用额外的空格。

标题行是可选的。任何由 | 分隔的文本都将呈现为表格。

Markdown 表格很难处理单元格内的块级元素，例如列表项、代码块或多个段落。对于复杂或非常宽的表格，请改用 HTML。

<table>
<thead>
  <tr>
    <th>Heading cell 1</th>
    <th>Heading cell 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Body cell 1</td>
    <td>Body cell 2</td>
  </tr>
</tbody>
</table>

效果

使用 Mermaid 进行可视化

你可以使用 Mermaid JS 进行可视化。Mermaid JS 版本在 /layouts/partials/head.html 中指定。

{{< mermaid >}}
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
{{</ mermaid >}}

效果

{{< mermaid >}}
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
{{</ mermaid >}}

效果

你可以查看官方文档中的更多示例。

侧边栏和警告框

侧边栏和警告框提供了向文本添加视觉重要性的方法。请谨慎使用它们。

侧边栏

侧边栏在视觉上偏移文本，但没有警告框那样引人注目。

这是一个侧边栏。

侧边栏中可以包含段落和块级元素。

你甚至可以包含代码块。

sudo dmesg

警告框

警告框（注意、警告等）使用 Hugo shortcode。

包含项

将 shortcode 添加到包含项。

Katacoda 嵌入式实时环境