文件冒煙測試頁面

此頁面有兩個目的

• 演示 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
   

   • 在一些塊級內容之後還有子列表。儘管縮排更多，但它與上面的段落和程式碼塊在同一“級別”。

選項卡列表

選項卡列表可用於條件性地顯示內容，例如，當需要記錄多個選項，但這些選項需要不同的說明或上下文時。

• 選擇一個...
• 格式化選項卡列表
• 巢狀標題

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 短程式碼的程式碼塊

要像上面的示例一樣顯示原始 Hugo 短程式碼，並防止 Hugo 解釋它們，請在 < 和 > 字元之間使用 C 風格的註釋。以下示例說明了這一點（請檢視此頁面的 Markdown 原始碼）。

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

連結

要格式化連結，請將連結文字放在方括號內，後跟括號中的連結目標。

• [連結到 Kubernetes.io](https://kubernetes.club.tw/) 或
• [相對連結到 Kubernetes.io](/)

您也可以使用 HTML，但不推薦。例如，<a href="https://kubernetes.club.tw/">連結到 Kubernetes.io</a>。

映象

要格式化影像，請使用與 連結 類似的語法，但新增一個前導 ! 字元。方括號包含影像的 alt 文字。儘量始終使用 alt 文字，以便使用螢幕閱讀器的使用者可以從影像中受益。

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

生成

要指定擴充套件屬性，如寬度、標題、說明文字等，請使用 figure 短程式碼，這比使用 HTML <img> 標籤更受歡迎。另外，如果您需要影像也作為超連結，請使用 link 屬性，而不是像下面那樣將整個 figure 包裝在 Markdown 連結語法中。

即使您選擇不使用 figure 短程式碼，影像也可以是連結。這次，鉛筆圖示連結到 Kubernetes 網站。外部方括號包含整個影像標籤，連結目標在末尾的括號中。

[![pencil icon](/images/pencil.png)](https://kubernetes.club.tw)

生成

您也可以使用 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 短程式碼。

包含

將短程式碼新增到包含項。

Katacoda 嵌入式即時環境