瀏覽文檔

Bootstrap Toggle 短代碼

Hugo Modules Authors 2023年3月24日 2 分鐘閱讀 短代碼 文檔 Bootstrap Toggle Tabs Navs

用於生成可切換的導航欄和標籤欄。

贊助

成為我們的資助者或贊助商，以支持我們的工作。

愛發電 GitHub 贊助商 PayPal
本頁內容
贊助商
Bootstrap Toggle 短代碼

The config toggle is useful, but it’s limited to generate configuration code blocks in YAML, TOML and JSON languages. The toggle* shortcodes are designed to be more versatile.

Toggle

Toggle 參數

name

索引名稱類型必填默認值版本示例
#0namestring✓---

Toggle 的 ID 和名稱，每個頁面必須唯一。

style

索引名稱類型必填默認值版本示例
-stylestring-tabs--

樣式：tabs、pills、underline。

data

索引名稱類型必填默認值版本示例
-datastring----

條目數據文件名，當不使用嵌套短代碼時必填。

Toggle 條目

Toggle 條目參數

name

索引名稱類型必填默認值版本示例
#0namestring✓---

Toggle 的 ID 和名稱，每個頁面必須唯一。

style

索引名稱類型必填默認值版本示例
-stylestring-tabs--

樣式：tabs、pills、underline。

data

索引名稱類型必填默認值版本示例
-datastring----

條目數據文件名，當不使用嵌套短代碼時必填。

示例

數據文件示例

data/bootstrap/toggle-data-file.yaml
1- name: Foo
2  inner: "*Foo* Content with **Markdown**"
3
4- name: Bar
5  inner: "Bar Content without Markdown"
源碼
1{{< bs/toggle "data-file" "pills" "bootstrap.toggle-data-file" />}}
結果
Foo Content with Markdown
Bar Content without Markdown

嵌套示例

源碼
 1{{< bs/toggle foobar >}}
 2
 3  {{% bs/toggle-item Foo %}}
 4  *Foo* Content with **Markdown**
 5  {{% /bs/toggle-item %}}
 6
 7  {{< bs/toggle-item Bar >}}
 8  Bar Content without Markdown
 9  {{< /bs/toggle-item >}}
10
11{{< /bs/toggle >}}
結果

Foo Content with Markdown

Bar Content without Markdown

帶 Pills 樣式的 SDK 示例

源碼
 1{{< bs/toggle name=sdk style=pills >}}
 2
 3  {{< bs/toggle-item JS >}}
 4    {{< highlight js >}}
 5    console.log('hello world');
 6    {{< /highlight >}}
 7  {{< /bs/toggle-item >}}
 8
 9  {{< bs/toggle-item PHP >}}
10    {{< highlight php >}}
11    echo 'hello world';
12    {{< /highlight >}}
13  {{< /bs/toggle-item >}}
14  
15  {{< bs/toggle-item Go >}}
16    {{< highlight go >}}
17    fmt.Println("hello world")
18    {{< /highlight >}}
19  {{< /bs/toggle-item >}}
20
21{{< /bs/toggle >}}
結果
1console.log('hello world');
1echo 'hello world';
1fmt.Println("hello world")

帶下劃線樣式的非全寬、居中示例

源碼
1{{< bs/toggle name=underline style=underline fill=false alignment=center >}}
2  {{< bs/toggle-item Foo >}}Foo{{< /bs/toggle-item >}}
3  {{< bs/toggle-item Bar >}}Bar{{< /bs/toggle-item >}}
4{{< /bs/toggle >}}
結果
Foo
Bar
Ratio
手風琴