feat(tabs): update docs

2026-01-30 16:31:52 +01:00 · 2026-01-02 17:32:00 +08:00
parent 6fe75d5277
commit 493bb3eb5c
3 changed files with 239 additions and 2 deletions
--- a/.vscode/blowfish.code-snippets
+++ b/.vscode/blowfish.code-snippets
@@ -178,6 +178,53 @@
    ],
    "description": "Output a set of up to three different colors. Blowfish swatches Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#swatches ",
  },
+  "Tabs - Basic": {
+    "prefix": "tabs",
+    "body": [
+      "{{< tabs >}}",
+      "",
+      "    {{< tab label=\"${1:Tab 1}\" >}}",
+      "    $2",
+      "    {{< /tab >}}",
+      "",
+      "    {{< tab label=\"${3:Tab 2}\" >}}",
+      "    $4",
+      "    {{< /tab >}}",
+      "",
+      "{{< /tabs >}}"
+    ],
+    "description": "Insert Hugo tabs shortcode"
+  },
+  "Tabs - Full Options": {
+    "prefix": "tabsfull",
+    "body": [
+      "{{< tabs group=\"${1:group-name}\" default=\"${2:Default Tab}\" >}}",
+      "",
+      "    {{< tab label=\"${3:Tab 1}\" icon=\"${4:code}\" >}}",
+      "    $5",
+      "    {{< /tab >}}",
+      "",
+      "    {{< tab label=\"${2:Default Tab}\" icon=\"${6:sun}\" >}}",
+      "    $7",
+      "    {{< /tab >}}",
+      "",
+      "    {{< tab label=\"${8:Tab 3}\" icon=\"${9:moon}\" >}}",
+      "    $0",
+      "    {{< /tab >}}",
+      "",
+      "{{< /tabs >}}"
+    ],
+    "description": "Insert Hugo tabs with group, default, and icons"
+  },
+  "Tab": {
+    "prefix": "tab",
+    "body": [
+      "{{< tab label=\"${1:Tab Label}\" >}}",
+      "$2",
+      "{{< /tab >}}"
+    ],
+    "description": "Insert Hugo tab item"
+  },
  "timeline": {
    "prefix": ["BFS-timeline", "HSC-timeline", "timeline"],
    "body": [
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -753,7 +753,14 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam

 The `tabs` shortcode is commonly used to present different variants of a particular step. For example, it can be used to show how to install VS Code on different platforms.

-**Example**
+| Parameter | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `group`   | **Optional.** Group name for synchronized tab switching. All tabs with the same group name will switch together. |
+| `default` | **Optional.** Label of the tab to be active by default. If not set, the first tab will be active. |
+| `label`   | **Required.** The text label displayed on the tab button. |
+| `icon`    | **Optional.** Icon name to display before the label. |
+
+**Example 1: Basic Usage**

 `````md
 {{</* tabs */>}}
@@ -815,6 +822,94 @@ The `tabs` shortcode is commonly used to present different variants of a particu

 {{< /tabs >}}

+**Example 2: With Group, Default, and Icon**
+
+`````md
+{{</* tabs group="lang" default="Python" */>}}
+    {{</* tab label="JavaScript" icon="code" */>}}
+    ```javascript
+    console.log("Hello");
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Python" icon="sun" */>}}
+    ```python
+    print("Hello")
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Go" icon="moon" */>}}
+    ```go
+    fmt.Println("Hello")
+    ```
+    {{</* /tab */>}}
+{{</* /tabs */>}}
+
+{{</* tabs group="lang" default="Python" */>}}
+    {{</* tab label="JavaScript" icon="code" */>}}
+    ```javascript
+    const add = (a, b) => a + b;
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Python" icon="sun" */>}}
+    ```python
+    def add(a, b): return a + b
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Go" icon="moon" */>}}
+    ```go
+    func add(a, b int) int { return a + b }
+    ```
+    {{</* /tab */>}}
+{{</* /tabs */>}}
+`````
+
+**Output**
+
+{{< tabs group="lang" default="Python" >}}
+    {{< tab label="JavaScript" icon="code" >}}
+    ```javascript
+    console.log("Hello");
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Python" icon="sun" >}}
+    ```python
+    print("Hello")
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Go" icon="moon" >}}
+    ```go
+    fmt.Println("Hello")
+    ```
+    {{< /tab >}}
+{{< /tabs >}}
+
+{{< tabs group="lang" default="Python" >}}
+    {{< tab label="JavaScript" icon="code" >}}
+    ```javascript
+    const add = (a, b) => a + b;
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Python" icon="sun" >}}
+    ```python
+    def add(a, b): return a + b
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Go" icon="moon" >}}
+    ```go
+    func add(a, b int) int { return a + b }
+    ```
+    {{< /tab >}}
+{{< /tabs >}}
+
+In this example, both tab groups share the same `group="lang"` parameter, so clicking any tab will synchronize both groups. The `default="Python"` parameter makes Python the initially active tab, and `icon="code"` adds an icon before each label.
+
 <br/><br/><br/>

 ## Timeline
--- a/exampleSite/content/docs/shortcodes/index.zh-cn.md
+++ b/exampleSite/content/docs/shortcodes/index.zh-cn.md
@@ -763,7 +763,14 @@ B-->C[Profit]

 `tabs` 简码常用于呈现某个步骤的不同变体。例如，可用于展示在不同平台上安装 VS Code 的方式。

-**示例**
+| 参数        | 描述                                      |
+| --------- | --------------------------------------- |
+| `group`   | **可选。** 用于同步切换标签页的组名。具有相同组名的所有标签页将一起切换。 |
+| `default` | **可选。** 默认激活的标签页的标签。如果未设置，默认激活第一个标签页。   |
+| `label`   | **必填。** 显示在标签按钮上的文本标签。                  |
+| `icon`    | **可选。** 在标签前显示的图标名称。                    |
+
+**示例 1：基本用法**

 ````md
 {{</* tabs */>}}
@@ -825,6 +832,94 @@ B-->C[Profit]

 {{< /tabs >}}

+**示例 2：使用 Group、Default 和 Icon**
+
+`````md
+{{</* tabs group="lang" default="Python" */>}}
+    {{</* tab label="JavaScript" icon="code" */>}}
+    ```javascript
+    console.log("Hello");
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Python" icon="sun" */>}}
+    ```python
+    print("Hello")
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Go" icon="moon" */>}}
+    ```go
+    fmt.Println("Hello")
+    ```
+    {{</* /tab */>}}
+{{</* /tabs */>}}
+
+{{</* tabs group="lang" default="Python" */>}}
+    {{</* tab label="JavaScript" icon="code" */>}}
+    ```javascript
+    const add = (a, b) => a + b;
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Python" icon="sun" */>}}
+    ```python
+    def add(a, b): return a + b
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Go" icon="moon" */>}}
+    ```go
+    func add(a, b int) int { return a + b }
+    ```
+    {{</* /tab */>}}
+{{</* /tabs */>}}
+`````
+
+**Output**
+
+{{< tabs group="lang" default="Python" >}}
+    {{< tab label="JavaScript" icon="code" >}}
+    ```javascript
+    console.log("Hello");
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Python" icon="sun" >}}
+    ```python
+    print("Hello")
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Go" icon="moon" >}}
+    ```go
+    fmt.Println("Hello")
+    ```
+    {{< /tab >}}
+{{< /tabs >}}
+
+{{< tabs group="lang" default="Python" >}}
+    {{< tab label="JavaScript" icon="code" >}}
+    ```javascript
+    const add = (a, b) => a + b;
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Python" icon="sun" >}}
+    ```python
+    def add(a, b): return a + b
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Go" icon="moon" >}}
+    ```go
+    func add(a, b int) int { return a + b }
+    ```
+    {{< /tab >}}
+{{< /tabs >}}
+
+在这个示例中，两个标签组都使用了相同的 `group="lang"` 参数，因此点击任意一个标签时，两个标签组都会同步切换。`default="Python"` 参数用于指定 Python 为初始激活的标签，而 `icon="code"` 会在每个标签标题前添加一个图标。
+
 <br/><br/><br/>

 ## 时间线