Content Tabs 使用教學

在 Zensical 中，Content Tabs 可以用來在不同標籤內顯示不同內容，適合用於多語言切換、程式碼範例對比等應用。

zensical.toml 設定

[project.markdown_extensions]
pymdownx.superfences = {}

[project.markdown_extensions.pymdownx.tabbed]
alternate_style = true

若希望全站相同名稱的頁簽一起切換，再加上：

[project.theme]
features = [
  "content.tabs.link",
]

基本用法

你可以使用 === "標籤名稱" 來定義標籤：

=== "Python"
    ```python
    print("這是 Python 程式碼")
    ```

=== "JavaScript"
    ```javascript
    console.log("這是 JavaScript 程式碼");
    ```

這樣會產生一個標籤頁，讓使用者可以點選切換 Python 和 JavaScript。

print("這是 Python 程式碼")

console.log("這是 JavaScript 程式碼");

在一般內容中使用

除了程式碼，你也可以使用 Markdown 內容：

=== "說明"
    這是一段說明內容。

=== "範例"
    - 第一個範例
    - 第二個範例

預設開啟某個標籤

預設會顯示 第一個標籤，如果你要讓預設是其他標籤，只要在等號後面加上一個 +。

=== "標籤 1"
    這是標籤 1 的內容。

===+ "標籤 2"
    這是標籤 2 的內容。

=== "標籤 3"
    這是標籤 3 的內容。

嵌入提示框

你可以將標籤頁嵌入提示框：

!!! 語言

    === "Python"
        ```python
        print("這是 Python 程式碼")
        ```

    === "JavaScript"
        ```javascript
        console.log("這是 JavaScript 程式碼");
        ```

這樣會產生一個 "語言" 提示框，裡面有 Python 和 JavaScript 兩個標籤。

print("這是 Python 程式碼")

console.log("這是 JavaScript 程式碼");

頁簽的錨點連結

每個頁簽都會自動加上錨點連結，可以用右鍵複製連結，或在新分頁開啟，也能在同一頁或其他頁面連到某個特定的頁簽。

預設的錨點可讀性不高。Python Markdown Extensions 支援替頁簽的標題做 slugify，讓連結變得好看好讀，啟用方式：

[project.markdown_extensions]
pymdownx.tabbed.slugify.object = "pymdownx.slugs.slugify"
pymdownx.tabbed.slugify.kwds.case = "lower"

連動的頁簽（Linked content tabs）

前面提到的 content.tabs.link 會讓整個網站的頁簽互相連動：只要讀者點了某個標籤，所有相同標籤名稱的頁簽都會一起切換過去。

• 是依標籤名稱連動，而不是順序，所以同一個容器裡的順序不同也沒關係。
• 與 instant navigation 完整整合，選擇會被記住，換頁後仍然有效。

這對「Windows／macOS」、「pip／uv」這類全站反覆出現的選項特別方便。

總結

• 使用 === "標籤名稱" 建立標籤頁
• 可在標籤內放 Markdown 內容或程式碼
• 使用 ==== "子標籤" 來建立巢狀結構
• 在 zensical.toml 啟用 pymdownx.tabbed 與 content.tabs.link

這樣就可以輕鬆使用 Content Tabs 來整理內容！

參考資料

• Content Tabs - Zensical
• PyMdown Extensions Documentation - Tabbed