文件 Smoke Test 頁面

此頁面有兩個用途

• 示範 Kubernetes 文件如何使用 Markdown
• 提供「Smoke Test」文件，我們可以使用它來測試影響整體文件的 HTML、CSS 和範本變更。

標題層級

上面的標題是 H2。頁面標題呈現為 H1。以下章節顯示 H3-H6。

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 對於如何處理清單沒有嚴格的規則。當我們從 Jekyll 移至 Hugo 時，我們破壞了一些清單。為了修正它們，請記住以下事項

• 請務必將子清單項目縮排 2 個空格。

• 若要結束清單並開始另一個清單，您需要在清單之間的新行上使用 HTML 註解區塊，與左側邊框齊平。否則，第一個清單不會結束，無論您在它和第二個清單之間放置多少個空白行。

項目符號清單

• 這是一個清單項目。

• 這是同一個清單中的另一個清單項目。

• 您可以混合使用 - 和 *。
  • 若要建立子項目，請縮排兩個空格。
    • 這是一個子子項目。再縮排兩個空格。
  • 另一個子項目。

• 這是一個新清單。使用 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 shortcodes 的程式碼區塊

若要顯示原始 Hugo shortcodes，如上面的範例所示，並防止 Hugo 解釋它們，請在 < 之後和 > 字元之前直接使用 C 樣式註解。以下範例說明了這一點 (檢視此頁面的 Markdown 原始碼)。

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

連結

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

• [Link to Kubernetes.io](https://kubernetes.dev.org.tw/) 或
• [Kubernetes.io 的相對連結](/)

您也可以使用 HTML，但不建議使用。例如，<a href="https://kubernetes.dev.org.tw/">Link to Kubernetes.io</a>。

映像檔

若要格式化映像檔，請使用與 連結 類似的語法，但新增前導 ! 字元。方括號包含映像檔的替代文字。請嘗試始終使用替代文字，以便使用螢幕閱讀器的人可以從映像檔中獲得一些好處。

若要指定擴展屬性，例如寬度、標題、標題等，請使用 figure shortcode，這比使用 HTML <img> 標記更受歡迎。此外，如果您也需要映像檔成為超連結，請使用 link 屬性，而不是如下所示將整個圖例包裝在 Markdown 連結語法中。

即使你選擇不使用 figure shortcode，圖片仍然可以是一個連結。這次鉛筆圖示連結到 Kubernetes 網站。外層方括號括住整個圖片標籤，而連結目標在結尾的圓括號中。

你也可以使用 HTML 語法來呈現圖片，但這不是首選做法。

表格

簡單表格每行一列，欄位之間用 | 字元分隔。標題列與內文之間用僅包含至少三個 - 字元的儲存格分隔。為了便於維護，請盡量保持所有儲存格分隔符號對齊，即使你需要使用額外空格。

標題列是選填的。任何用 | 分隔的文字都會呈現為表格。

Markdown 表格很難處理儲存格內的區塊層級元素，例如列表項目、程式碼區塊或多個段落。對於複雜或非常寬的表格，請改用 HTML。

使用 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 shortcodes。

包含

將 shortcodes 新增至包含項目。

Katacoda 嵌入式即時環境