Bootstrap 手風琴短代碼
用於構建垂直手風琴的短代碼，FAQ 是最常見的用例。
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
語法
1{{< bs/accordion >}}
參數
data
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
不帶擴展名的數據文件名稱。
flush
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | flush | boolean | - | false | - | - |
為 true 時，去除邊框和圓角，使手風琴與其父容器的邊對邊呈現。
alwaysOpen
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | alwaysOpen | boolean | - | false | - | - |
為 true 時，當另一個條目打開時，使手風琴條目保持打開狀態。
數據文件映射
| Path | Data |
|---|---|
data/faq.yaml | faq |
data/faq.toml | faq |
data/faq.json | faq |
data/sub/faq.yaml | sub.faq |
data/sub/faq.toml | sub.faq |
data/sub/faq.json | sub.faq |
數據條目屬性
title
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
title | - | string | - | - | - | - |
標題。
content
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
content | - | string | - | - | - | - |
內容，支持 Markdown。
weight
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
weight | - | string | - | - | - | - |
權重，值越小權重越高。
show
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
show | - | string | - | - | - | - |
默認顯示第一個條目，不過你可以通過該屬性改變。
數據文件示例
data/accordion/faq.yaml
1- title: Q1
2 content: __A1__, ...
3- title: Q2
4 content: __A2__, ...
示例
默認手風琴示例
源碼
1{{< bs/accordion "accordion.faq" >}}結果
A1, …
A2, …
Flush 手風琴示例
源碼
1{{< bs/accordion data="accordion.faq" flush=true >}}結果
A1, …
A2, …
總是打開的 Flush 手風琴示例
源碼
1{{< bs/accordion data="accordion.faq" flush=true alwaysOpen=true >}}結果
A1, …
A2, …