基於 Butterfly 的外掛標簽引入-筆記

本文轉載自查看原文 2022-04-01 10:42 690 Web/ 05——前端

行內文本樣式 text

{% tabs, 2 %}

{% u 文本內容 %}
{% emp 文本內容 %}
{% wavy 文本內容 %}
{% del 文本內容 %}
{% kbd 文本內容 %}
{% psw 文本內容 %}

帶 {% u 下划線 %} 的文本
帶 {% emp 着重號 %} 的文本
帶 {% wavy 波浪線 %} 的文本
帶 {% del 刪除線 %} 的文本
鍵盤樣式的文本 {% kbd command %} +
密碼樣式的文本：

1. 帶 {% u 下划線 %} 的文本
2. 帶 {% emp 着重號 %} 的文本
3. 帶 {% wavy 波浪線 %} 的文本
4. 帶 {% del 刪除線 %} 的文本
5. 鍵盤樣式的文本 {% kbd command %} + {% kbd D %}
6. 密碼樣式的文本：{% psw 這里沒有驗證碼 %}

{% endtabs %}

行內文本 span

{% tabs, 3 %}

{% span 樣式參數(參數以空格划分), 文本內容 %}

字體:logo, code
顏色:{% span red, 紅色 %}、{% span yellow, 黃色 %}、{% span green, 綠色 %}、{% span cyan, 青色 %}、{% span blue, 藍色 %}、
大小: small, h4, h3, h2, h1, large, huge, ultra
對齊方向: left, center, right

彩色文字
在一段話中方便插入各種顏色的標簽，包括：{% span red, 紅色 %}、{% span yellow, 黃色 %}、{% span green, 綠色 %}、{% span cyan, 青色 %}、{% span blue, 藍色 %}、{% span gray, 灰色 %}。
超大號文字
文檔「開始」頁面中的標題部分就是超大號文字。

- 彩色文字
在一段話中方便插入各種顏色的標簽，包括：{% span red, 紅色 %}、{% span yellow, 黃色 %}、{% span green, 綠色 %}、{% span cyan, 青色 %}、{% span blue, 藍色 %}、{% span gray, 灰色 %}。
- 超大號文字
文檔「開始」頁面中的標題部分就是超大號文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

{% endtabs %}

段落文本 p

{% tabs, 3 %}

{% p 樣式參數(參數以空格划分), 文本內容 %}

字體:logo, code
顏色:{% span red, 紅色 %}、{% span yellow, 黃色 %}、{% span green, 綠色 %}、{% span cyan, 青色 %}、{% span blue, 藍色 %}、
大小: small, h4, h3, h2, h1, large, huge, ultra
對齊方向: left, center, right

彩色文字
在一段話中方便插入各種顏色的標簽，包括：{% p red, 紅色 %}、{% p yellow, 黃色 %}、{% p green, 綠色 %}、{% p cyan, 青色 %}、{% p blue, 藍色 %}、{% p gray, 灰色 %}。
超大號文字
文檔「開始」頁面中的標題部分就是超大號文字。

- 彩色文字
在一段話中方便插入各種顏色的標簽，包括：{% p red, 紅色 %}、{% p yellow, 黃色 %}、{% p green, 綠色 %}、{% p cyan, 青色 %}、{% p blue, 藍色 %}、{% p gray, 灰色 %}。
- 超大號文字
文檔「開始」頁面中的標題部分就是超大號文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

{% endtabs %}

引用 note

{% note orange 'fas fa-battery-half' flat %} 最新版 butterfly 標簽支持引用 fontawesome V5 圖標，效果上已經優於 volantis 的 note 標簽。故不再額外引入 volantis的note樣式。{% del 做樣式適配好麻煩的啊，能偷懶就偷懶吧 %} {% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
以下是 butterfly 主題的 note 寫法。

{% tabs, 3 %}

修改主題配置文件

note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

Note標簽外掛有兩種用法。icons和light_bg_offset只對方法一生效。

{% folding cyan, 方法一 %}

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

{% endfolding %}

{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

{% endfolding %}

{% folding cyan, 方法一 %}

參數	用法
class	【可選】標識，不同的標識有不同的配色（ default / primary / success / info / warning / danger ）
no-icon	【可選】不顯示 icon
style	【可選】可以覆蓋配置中的 style（simple/modern/flat/disabled）

參數	用法
class	【可選】標識，不同的標識有不同的配色（ default / primary / success / info / warning / danger ）
no-icon	【可選】可配置自定義 icon (只支持 fontawesome 圖標, 也可以配置 no-icon )
style	【可選】可以覆蓋配置中的 style （simple/modern/flat/disabled）

{% folding cyan, 方法一 %}

{% folding blue, 1. simple樣式 %}
{% note simple %}默認提示塊標簽{% endnote %}
{% note default simple %}default 提示塊標簽{% endnote %}
{% note primary simple %}primary 提示塊標簽{% endnote %}
{% note success simple %}success 提示塊標簽{% endnote %}
{% note info simple %}info 提示塊標簽{% endnote %}
{% note warning simple %}warning 提示塊標簽{% endnote %}
{% note danger simple %}danger 提示塊標簽{% endnote %}

{% folding red, 2. modern樣式 %}
{% note modern %}默認提示塊標簽{% endnote %}
{% note default modern %}default 提示塊標簽{% endnote %}
{% note primary modern %}primary 提示塊標簽{% endnote %}
{% note success modern %}success 提示塊標簽{% endnote %}
{% note info modern %}info 提示塊標簽{% endnote %}
{% note warning modern %}warning 提示塊標簽{% endnote %}
{% note danger modern %}danger 提示塊標簽{% endnote %}

{% folding yellow, 3. flat樣式 %}
{% note flat %}默認提示塊標簽{% endnote %}
{% note default flat %}default 提示塊標簽{% endnote %}
{% note primary flat %}primary 提示塊標簽{% endnote %}
{% note success flat %}success 提示塊標簽{% endnote %}
{% note info flat %}info 提示塊標簽{% endnote %}
{% note warning flat %}warning 提示塊標簽{% endnote %}
{% note danger flat %}danger 提示塊標簽{% endnote %}

{% folding green, 4. disabled樣式 %}
{% note disabled %}默認提示塊標簽{% endnote %}
{% note default disabled %}default 提示塊標簽{% endnote %}
{% note primary disabled %}primary 提示塊標簽{% endnote %}
{% note success disabled %}success 提示塊標簽{% endnote %}
{% note info disabled %}info 提示塊標簽{% endnote %}
{% note warning disabled %}warning 提示塊標簽{% endnote %}
{% note danger disabled %}danger 提示塊標簽{% endnote %}

{% folding cyan, 5. no-icon樣式 %}
{% note no-icon %}默認提示塊標簽{% endnote %}
{% note default no-icon %}default 提示塊標簽{% endnote %}
{% note primary no-icon %}primary 提示塊標簽{% endnote %}
{% note success no-icon %}success 提示塊標簽{% endnote %}
{% note info no-icon %}info 提示塊標簽{% endnote %}
{% note warning no-icon %}warning 提示塊標簽{% endnote %}
{% note danger no-icon %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding blue, 方法二 %}
{% folding blue, 1. simple樣式 %}
{% note 'fab fa-cc-visa' simple %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' simple %}小心開車安全至上{% endnote %}
{% note red 'fas fa-fan' simple%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}前端最討厭的瀏覽器{% endnote %}

{% folding red, 2. modern樣式 %}
{% note 'fab fa-cc-visa' modern %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' modern %}小心開車安全至上{% endnote %}
{% note red 'fas fa-fan' modern%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}前端最討厭的瀏覽器{% endnote %}

{% folding yellow, 3. flat樣式 %}
{% note 'fab fa-cc-visa' flat %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' flat %}小心開車安全至上{% endnote %}
{% note red 'fas fa-fan' flat%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}前端最討厭的瀏覽器{% endnote %}

{% folding green, 4. disabled樣式 %}
{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}小心開車安全至上{% endnote %}
{% note red 'fas fa-fan' disabled %}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}前端最討厭的瀏覽器{% endnote %}

{% folding cyan, 5. no-icon樣式 %}
{% note no-icon %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue no-icon %}2021年快到了....{% endnote %}
{% note pink no-icon %}小心開車安全至上{% endnote %}
{% note red no-icon %}這是三片呢？還是四片？{% endnote %}
{% note orange no-icon %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple no-icon %}剪刀石頭布{% endnote %}
{% note green no-icon %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% folding cyan, 方法一 %}

{% folding blue, 1. simple樣式 %}

{% note simple %}默認 提示塊標簽{% endnote %}
{% note default simple %}default 提示塊標簽{% endnote %}
{% note primary simple %}primary 提示塊標簽{% endnote %}
{% note success simple %}success 提示塊標簽{% endnote %}
{% note info simple %}info 提示塊標簽{% endnote %}
{% note warning simple %}warning 提示塊標簽{% endnote %}
{% note danger simple %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding red, 2. modern樣式 %}

{% note modern %}默認 提示塊標簽{% endnote %}
{% note default modern %}default 提示塊標簽{% endnote %}
{% note primary modern %}primary 提示塊標簽{% endnote %}
{% note success modern %}success 提示塊標簽{% endnote %}
{% note info modern %}info 提示塊標簽{% endnote %}
{% note warning modern %}warning 提示塊標簽{% endnote %}
{% note danger modern %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding yellow, 3. flat樣式 %}

{% note flat %}默認 提示塊標簽{% endnote %}
{% note default flat %}default 提示塊標簽{% endnote %}
{% note primary flat %}primary 提示塊標簽{% endnote %}
{% note success flat %}success 提示塊標簽{% endnote %}
{% note info flat %}info 提示塊標簽{% endnote %}
{% note warning flat %}warning 提示塊標簽{% endnote %}
{% note danger flat %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding green, 4. disabled樣式 %}

{% note disabled %}默認 提示塊標簽{% endnote %}
{% note default disabled %}default 提示塊標簽{% endnote %}
{% note primary disabled %}primary 提示塊標簽{% endnote %}
{% note success disabled %}success 提示塊標簽{% endnote %}
{% note info disabled %}info 提示塊標簽{% endnote %}
{% note warning disabled %}warning 提示塊標簽{% endnote %}
{% note danger disabled %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding green, 5. no-icon樣式 %}

{% note no-icon %}默認 提示塊標簽{% endnote %}
{% note default no-icon %}default 提示塊標簽{% endnote %}
{% note primary no-icon %}primary 提示塊標簽{% endnote %}
{% note success no-icon %}success 提示塊標簽{% endnote %}
{% note info no-icon %}info 提示塊標簽{% endnote %}
{% note warning no-icon %}warning 提示塊標簽{% endnote %}
{% note danger no-icon %}danger 提示塊標簽{% endnote %}

{% endfolding %}

{% folding blue, 方法二 %}

{% note 'fab fa-cc-visa' simple %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' simple %}小心開車 安全至上{% endnote %}
{% note red 'fas fa-fan' simple%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% folding red, 2. modern樣式 %}

{% note 'fab fa-cc-visa' modern %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' modern %}小心開車 安全至上{% endnote %}
{% note red 'fas fa-fan' modern%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% folding yellow, 3. flat樣式 %}

{% note 'fab fa-cc-visa' flat %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' flat %}小心開車 安全至上{% endnote %}
{% note red 'fas fa-fan' flat%}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% folding green, 4. disabled樣式 %}

{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}小心開車 安全至上{% endnote %}
{% note red 'fas fa-fan' disabled %}這是三片呢？還是四片？{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}剪刀石頭布{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% folding cyan, 5. no-icon樣式 %}

{% note no-icon %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note blue no-icon %}2021年快到了....{% endnote %}
{% note pink no-icon %}小心開車 安全至上{% endnote %}
{% note red no-icon %}這是三片呢？還是四片？{% endnote %}
{% note orange no-icon %}你是刷 Visa 還是 UnionPay{% endnote %}
{% note purple no-icon %}剪刀石頭布{% endnote %}
{% note green no-icon %}前端最討厭的瀏覽器{% endnote %}

{% endfolding %}

{% endtabs %}

上標標簽 tip

{% tip cogs %}主要樣式參考自小康的butterfly漸變背景標簽,自己寫了個tip.js來渲染標簽，精簡了一下代碼。{% endtip %}

{% tip [參數，可選] %}文本內容{% endtip %}

樣式: success, error, warning, bolt, ban, home, sync, cogs, key, bell
自定義圖標: 支持fontawesome。

{% tip %}默認情況{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}

{% tip %}默認情況{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定義font awesome圖標{% endtip %}

{% endtabs %}

動態標簽 anima

{% tip faa-horizontal animated %}
動態標簽的實質是引用了font-awesome-animation的css樣式，不一定局限於tip標簽，也可以是其他標簽。
只不過這里tip.js是我自己寫的，所以我清楚它會怎么被渲染成html，才用的這個寫法。
可以熟讀文檔，使用html語言來編寫其他標簽類型。

{% tabs, 3 %}

{% tip [參數，可選] %}文本內容{% endtip %}

{% note blue 'fas fa-bullhorn' flat %}
更多詳情請參看font-awesome-animation文檔

將所需的CSS類添加到圖標（或DOM中的任何元素）。
對於父級懸停樣式，需要給目標元素添加指定CSS類，同時還要給目標元素的父級元素添加CSS類faa-parent animated-hover。（詳情見示例及示例源碼）
You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
可以通過給目標元素添加CSS類faa-fast或faa-slow來控制動畫快慢。

On DOM load 當頁面加載時顯示動畫	On hover 當鼠標懸停時顯示動畫	On parent hover 當鼠標懸停在父級元素時顯示動畫
faa-wrench animated	faa-wrench animated-hover	faa-wrench
faa-ring animated	faa-ring animated-hover	faa-ring
faa-horizontal animated	faa-horizontal animated-hover	faa-wrench
faa-vertical animated	faa-vertical animated-hover	faa-vertical
faa-flash animated	faa-flash animated-hover	faa-flash animated
faa-bounce animated	faa-bounce animated-hover	faa-bounce
faa-spin animated	faa-spin animated-hover	faa-spin
faa-tada animated	faa-tada animated-hover	faa-tada
faa-tada animated	faa-tada animated-hover	faa-tada
faa-shake animated	faa-shake animated-hover	faa-shake
faa-tada animated	faa-tada animated-hover	faa-tada
faa-passing animated	faa-passing animated-hover	faa-passing
faa-passing-reverse animated	faa-passing-reverse animated-hover	faa-passing-reverse
faa-burst animated	faa-burst animated-hover	faa-burst
faa-passing animated	faa-passing animated-hover	faa-passing
faa-falling animated	faa-falling animated-hover	faa-falling
faa-rising animated	faa-rising animated-hover	faa-rising

On DOM load（當頁面加載時顯示動畫）
{% tip warning faa-horizontal animated %}warning
調整動畫速度
{% tip warning faa-horizontal animated faa-fast %}warning
On hover（當鼠標懸停時顯示動畫）
{% tip warning faa-horizontal animated-hover %}warning

On DOM load（當頁面加載時顯示動畫）

{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}

調整動畫速度

{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}

On hover（當鼠標懸停時顯示動畫）

{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

{% endtabs %}

復選列表 checkbox

{% tabs,3 %}

{% checkbox 樣式參數（可選）, 文本（支持簡單md） %}

顏色: {% span red, red %}、{% span yellow, yellow %}、{% span green, green %}、{% span cyan, cyan %}、{% span blue, blue %}、
選中狀態: checked {% radio 純文本測試 %}
{% radio checked, 支持簡單的 markdown 語法 %}
{% radio red, 支持自定義顏色 %}
{% radio green, 綠色 %}
{% radio yellow, 黃色 %}
{% radio cyan, 青色 %}

{% radio 純文本測試 %}
{% radio checked, 支持簡單的 [markdown](https://guides.github.com/features/mastering-markdown/) 語法 %}
{% radio red, 支持自定義顏色 %}
{% radio green, 綠色 %}
{% radio yellow, 黃色 %}
{% radio cyan, 青色 %}
{% radio blue, 藍色 %}

{% endtabs %}

單選列表 radio

{% tabs,3 %}

{% radio 樣式參數（可選）, 文本（支持簡單md） %}

顏色: {% span red, red %}、{% span yellow, yellow %}、{% span green, green %}、{% span cyan, cyan %}、{% span blue, blue %}、
選中狀態: checked {% radio 純文本測試 %}
{% radio checked, 支持簡單的 markdown 語法 %}
{% radio red, 支持自定義顏色 %}
{% radio green, 綠色 %}
{% radio yellow, 黃色 %}
{% radio cyan, 青色 %}

{% radio 純文本測試 %}
{% radio checked, 支持簡單的 [markdown](https://guides.github.com/features/mastering-markdown/) 語法 %}
{% radio red, 支持自定義顏色 %}
{% radio green, 綠色 %}
{% radio yellow, 黃色 %}
{% radio cyan, 青色 %}
{% radio blue, 藍色 %}

{% endtabs %}

時間軸 timeline

{% tabs,2 %}

{% timeline 時間線標題（可選） %}
{% timenode 時間節點（標題） %}
正文內容
{% endtimenode %}
{% timenode 時間節點（標題） %}
正文內容
{% endtimenode %}
{% endtimeline %}

{% timeline %}

{% timenode 2020-07-24 2.6.6 -> 3.0 %}

如果有 hexo-lazyload-image 插件，需要刪除並重新安裝最新版本，設置 lazyload.isSPA: true。
2.x 版本的 css 和 js 不適用於 3.x 版本，如果使用了 use_cdn: true 則需要刪除。
2.x 版本的 fancybox 標簽在 3.x 版本中被重命名為 gallery 。
2.x 版本的置頂 top: true 改為了 pin: true，並且同樣適用於 layout: page 的頁面。
如果使用了 hexo-offline 插件，建議卸載，3.0 版本默認開啟了 pjax 服務。

{% timenode 2020-05-15 2.6.3 -> 2.6.6 %}

不需要額外處理。

{% endtimenode %}

{% timenode 2020-04-20 2.6.2 -> 2.6.3 %}

全局搜索 seotitle 並替換為 seo_title。
group 組件的索引規則有變，使用 group 組件的文章內，group: group_name 對應的組件名必須是 group_name。
group 組件的列表名優先顯示文章的 short_title 其次是 title。

{% endtimeline %}

{% timeline %}

{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}

1. 如果有 `hexo-lazyload-image` 插件，需要刪除並重新安裝最新版本，設置 `lazyload.isSPA: true`。
2. 2.x 版本的 css 和 js 不適用於 3.x 版本，如果使用了 `use_cdn: true` 則需要刪除。
3. 2.x 版本的 fancybox 標簽在 3.x 版本中被重命名為 gallery 。
4. 2.x 版本的置頂 `top: true` 改為了 `pin: true`，並且同樣適用於 `layout: page` 的頁面。
5. 如果使用了 `hexo-offline` 插件，建議卸載，3.0 版本默認開啟了 pjax 服務。

{% endtimenode %}

{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}

不需要額外處理。

{% endtimenode %}

{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}

1. 全局搜索 `seotitle` 並替換為 `seo_title`。
2. group 組件的索引規則有變，使用 group 組件的文章內，`group: group_name` 對應的組件名必須是 `group_name`。
2. group 組件的列表名優先顯示文章的 `short_title` 其次是 `title`。

{% endtimenode %}

{% endtimeline %}

{% endtabs %}

鏈接卡片 link

{% tabs,2 %}

{% link 標題, 鏈接, 圖片鏈接（可選） %}

{% link 鳥不拉詩, https://niaobulashi.com/, https://niaobulashi.com/favicon.ico %}

{% link 鳥不拉詩, https://niaobulashi.com/, https://niaobulashi.com/favicon.ico %}

{% endtabs %}

按鈕 btns

{% note blue 'fas fa-bullhorn' flat %}
Volantis 的按鈕使用的是 btn 和 btns 標簽。btns 和 butterfly 的 button 不沖突，但是 btn 會被強制渲染，導致部分參數失效，而且 btn 的效果還是 butterfly 的 button 更好看些。所以就只適配了 btns。

{% tabs,3 %}

{% btns 樣式參數 %}
{% cell 標題, 鏈接, 圖片或者圖標 %}
{% cell 標題, 鏈接, 圖片或者圖標 %}
{% endbtns %}

圓角樣式：rounded, circle
增加文字樣式：可以在容器內增加 <b>標題</b> 和 <p>描述文字</p>
布局方式：
默認為自動寬度，適合視野內只有一兩個的情況。

參數	含義
wide	寬一點的按鈕
fill	填充布局，自動鋪滿至少一行，多了會換行
center	居中，按鈕之間是固定間距
around	居中分散
grid2	等寬最多 2 列，屏幕變窄會適當減少列數
grid3	等寬最多 3 列，屏幕變窄會適當減少列數
grid4	等寬最多 4 列，屏幕變窄會適當減少列數
grid5	等寬最多 5 列，屏幕變窄會適當減少列數

如果需要顯示類似「團隊成員」之類的一組含有頭像的鏈接：
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
或者含有圖標的按鈕：
{% btns rounded grid5 %}
{% cell 下載源碼, /, fas fa-download %}
圓形圖標 + 標題 + 描述 + 圖片 + 網格 5 列 + 居中
{% btns circle center grid5 %}

心率管家
{% p red, 專業版 %}

心率管家
{% p green, 免費版 %}
如果需要顯示類似「團隊成員」之類的一組含有頭像的鏈接：

{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

或者含有圖標的按鈕：

{% btns rounded grid5 %}
{% cell 下載源碼, /, fas fa-download %}
{% cell 查看文檔, /, fas fa-book-open %}
{% endbtns %}

圓形圖標 + 標題 + 描述 + 圖片 + 網格 5 列 + 居中

{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 專業版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免費版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

{% endtabs %}

github 卡片 ghcard

{% note blue 'fas fa-bullhorn' flat %}ghcard 使用了 github-readme-stats 的 API，支持直接使用 markdown 語法來寫。{% endnote %}

{% ghcard 用戶名, 其它參數（可選） %}
{% ghcard 用戶名/倉庫, 其它參數（可選） %}

更多參數可以參考：
{% ghcard anuraghazra/github-readme-stats %}
使用,分割各個參數。寫法為：參數名=參數值
以下只寫幾個常用參數值。

參數名	取值	釋義
hide	stars,commits,prs,issues,contribs	隱藏指定統計
count_private	true	將私人項目貢獻添加到總提交計數中
show_icons	true	顯示圖標
theme	請查閱 Available Themes	主題

用戶信息卡片

倉庫信息卡片

用戶信息卡片

| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |

倉庫信息卡片

| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

{% endtabs %}

github 徽標 ghbdage

{% tip faa-horizontal animated %}
關於 ghbdage 參數的更多具體用法可以參看站內教程：添加 github 徽標
{% endtip %}

{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}

left：徽標左邊的信息，必選參數。
right: 徽標右邊的信息，必選參數，
logo：徽標圖標，圖標名稱詳見 simpleicons，可選參數。
color：徽標右邊的顏色，可選參數。
link：指向的鏈接，可選參數。
title：徽標的額外信息，可選參數。主要用於優化 SEO，但 object 標簽不會像 a 標簽一樣在鼠標懸停顯示 title 信息。
option：自定義參數，支持 shields.io 的全部 API 參數支持，具體參數可以參看上文中的拓展寫法示例。形式為 name1=value2&name2=value2。

{% note info modern %}本外掛標簽的參數分為三組，用 || 分割。
基本參數，定義徽標左右文字和圖標
信息參數，定義徽標右側內容背景色，指向鏈接
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr為靜態資源提供CDN加速 %}
//如果是跨順序省略可選參數，仍然需要寫個逗號,用作分割
拓展參數，支持 shields 的 API 的全部參數內容
{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用雙線部署，默認線路托管於Vercel||style=social&logoWidth=20 %}
//如果是跨順序省略可選參數組，仍然需要寫雙豎線||用作分割

{% note primary modern %}本外掛標簽的參數分為三組，用 || 分割。
基本參數，定義徽標左右文字和圖標

{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}

信息參數，定義徽標右側內容背景色，指向鏈接

{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr為靜態資源提供CDN加速 %}
//如果是跨順序省略可選參數，仍然需要寫個逗號,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}

拓展參數，支持 shields 的 API 的全部參數內容

{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用雙線部署，默認線路托管於Vercel||style=social&logoWidth=20 %}
//如果是跨順序省略可選參數組，仍然需要寫雙豎線||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

{% endtabs %}

網站卡片 sites

{% tabs,2 %}

{% sitegroup %}
{% site 標題, url=鏈接, screenshot=截圖鏈接, avatar=頭像鏈接（可選）, description=描述（可選） %}
{% site 標題, url=鏈接, screenshot=截圖鏈接, avatar=頭像鏈接（可選）, description=描述（可選） %}
{% endsitegroup %}

{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=簡約風格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=這是一段關於這個網站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=這是一段關於這個網站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=這是一段關於這個網站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=這是一段關於這個網站的描述文字 %}

{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=簡約風格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=這是一段關於這個網站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=這是一段關於這個網站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=這是一段關於這個網站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=這是一段關於這個網站的描述文字 %}
{% endsitegroup %}

{% endtabs %}

行內圖片 inlineimage

{% tabs,3 %}

{% inlineimage 圖片鏈接, height=高度（可選） %}

高度：height=20px 這是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段話。

這又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段話。

這是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段話。

這又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段話。

{% endtabs %}

單張圖片 image

{% tabs,3 %}

{% image 鏈接, width=寬度（可選）, height=高度（可選）, alt=描述（可選）, bg=占位顏色（可選） %}

圖片寬度高度：width=300px, height=32px
圖片描述：alt = 圖片描述（butterfly 需要在主題配置文件中開啟圖片描述）
占位背景色：bg=#f2f2f2 {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下課回宿舍的路，沒有什么故事。 %} 123

音頻 audio

{% tabs,2 %}

{% audio 音頻鏈接 %}

{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

{% endtabs %}

視頻 video

{% tabs,3 %}

{% video 視頻鏈接 %}

對其方向：left, center, right
列數：逗號后面直接寫列數，支持 1 ～ 4 列。
100% 寬度
50% 寬度
{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
25% 寬度
{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

100% 寬度

{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

50% 寬度

{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

25% 寬度

{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

{% endtabs %}

相冊 gallery

{% note blue 'fas fa-bullhorn' modern %}
Butterfly 自帶 gallery 相冊，而且會根據圖片大小自動調整排版，效果比 Volantis 的 gallery 更好，故不再收錄 Volantis 的 gallery 標簽。

以下為 Butterfly 自帶的 gallery 標簽寫法。相冊圖庫和相冊配合使用。

{% tabs,3 %}

gallerygroup 相冊圖庫

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

gallery 相冊

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

gallerygroup 相冊圖庫

參數名	釋義
name	圖庫名字
description	圖庫描述
link	鏈接到對應相冊的地址
img-url	圖庫封面

gallery 相冊
區別於舊版的 Gallery 相冊，新的 Gallery 相冊會自動根據圖片長度進行排版，書寫也更加方便，與 markdown 格式一樣。可根據需要插入到相應的 md。無需再自己配置長寬。建議在粘貼時故意使用長短、大小、橫豎不一的圖片，會有更好的效果。（尺寸完全相同的圖片只會平鋪輸出，效果很糟糕）
gallerygroup 相冊圖庫

{% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %} {% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %} {% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}

gallery 相冊

{% gallery %}

{% note info flat %}
對於很多同學提問的 gallerygroup 和 gallery 相冊頁的鏈接問題。這里說下我個人的使用習慣。
一般使用相冊圖庫的話，可以在導航欄加一個 gallery 的 page (使用指令 hexo new page gallery 添加)，里面放相冊圖庫作為封面。然后在 [Blogroot]/source/gallery/ 下面建立相應的文件夾，例如若按照這里的示例，若欲使用 /gallery/MC/ 路徑訪問 MC 相冊，則需要新建 [Blogroot]/source/gallery/MC/index.md，並在里面填入 gallery 相冊內容。

gallerygroup 相冊圖庫

<div class="gallery-group-main">
{% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

gallery 相冊

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

{% endtabs %}

折疊框 folding

{% note success flat %}Butterfly 雖然也有內置折疊框 hideToggle 標簽，但是 Volantis 的 folding 折疊框更好看一些。{% endnote %}

{% folding 參數（可選）, 標題 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

顏色：blue, cyan, green, yellow, red
狀態：狀態填寫 open 代表默認打開。

{% endfolding %}

{% folding cyan open, 查看默認打開的折疊框 %}

這是一個默認打開的折疊框。

{% endfolding %}

{% folding green, 查看代碼測試 %}
假裝這里有代碼塊（代碼塊沒法嵌套代碼塊）

{% folding yellow, 查看列表測試 %}

haha
hehe

{% folding red, 查看嵌套測試 %}

{% folding blue, 查看嵌套測試2 %}

{% folding 查看嵌套測試3 %}

hahaha

{% endfolding %}

{% folding 查看圖片測試 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默認打開的折疊框 %}

這是一個默認打開的折疊框。

{% endfolding %}

{% folding green, 查看代碼測試 %}
假裝這里有代碼塊（代碼塊沒法嵌套代碼塊）
{% endfolding %}

{% folding yellow, 查看列表測試 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套測試 %}

{% folding blue, 查看嵌套測試2 %}

{% folding 查看嵌套測試3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

{% endtabs %}

分欄 tab

{% note success flat %}Butterfly 的 tab 標簽和 Volantis 的 tab 標簽都是移值自 NexT 主題，所以寫法和效果一模一樣。{% endnote %}

{% tabs,3 %}

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name :

選項卡塊標簽的唯一名稱，不帶逗號。
將在 #id 中用作每個標簽及其索引號的前綴。
如果名稱中包含空格，則對於生成 #id，所有空格將由破折號代替。
僅當前帖子 / 頁面的 URL 必須是唯一的！

[index]:

活動選項卡的索引號。
如果未指定，將選擇第一個標簽（1）。
-如果 index 為 - 1，則不會選擇任何選項卡。
可選參數。

[Tab caption]:

-當前選項卡的標題。
如果未指定標題，則帶有制表符索引后綴的唯一名稱將用作制表符的標題。
如果未指定標題，但指定了圖標，則標題將為空。
可選參數。

[@icon]:

FontAwesome 圖標名稱（全名，看起來像 “fas fa-font”）
可以指定帶空格或不帶空格；
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可選參數。 {% note primary flat %}Demo 1 - 預設選擇第一個【默認】{% endnote %} This is Tab 1.

This is Tab 2.

This is Tab 3.

{% endtabs %}

{% note primary flat %}Demo 2 - 預設選擇 tabs{% endnote %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% endtabs %}

{% note primary flat %}Demo 3 - 沒有預設值{% endnote %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% endtabs %}

{% note primary flat %}Demo 4 - 自定義 Tab 名 + 只有 icon + icon 和 Tab 名{% endnote %}

tab名字為第一個Tab

只有圖標沒有Tab名字

名字+icon

{% endtabs %}

{% note primary flat %}Demo 1 - 預設選擇第一個【默認】{% endnote %}

{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% note primary flat %}Demo 2 - 預設選擇 tabs{% endnote %}

{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% note primary flat %}Demo 3 - 沒有預設值{% endnote %}

{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% note primary flat %}Demo 4 - 自定義 Tab 名 + 只有 icon + icon 和 Tab 名{% endnote %}

{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

{% endtabs %}

數據集合 issues

{% tabs,3 %}

{% issues type | api=url | group=key:value1,value2（可選） %}

{% p center logo large, type (類型)： %}
根據需求不同，會將 issues 內容解析成不同的 HTML 標簽，目前支持的類型有：

時間軸 timeline: 解析成 timeline 標簽，issue 的標題對應 timeline 的時間，issue 的內容對應 timeline 的內容。
網站卡片 sites: 解析成 sites 標簽，需要有 JSON 代碼塊，各參數對應 sites 標簽參數:

{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "「keywords」": ""
}

參數	釋義
title	網站名稱
screenshot	網站預覽圖
url	網站鏈接，需要添加`https://` 協議組成完整域名。否則可能被識別成站點相對路徑。
avatar	站長頭像
「keywords」	分組依據，未必要叫「keywords」，詳見下文 group (分組)

{% p center logo large, api (接口)： %}
url為可以調的通的API，例如：

api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active

參數	釋義
https://gitee.com/api/v5/	gitee倉庫的api
https://api.github.com/	github倉庫的api
repos/xaoxuu/friends/issues	repos/用戶名/倉庫名/issues
sort=updated&state=open	界定哪些類型的issues會被讀取過來渲染成相應的標簽
page=1&per_page=100	讀取前100條issues
labels=active	控制默認的issue不顯示，只有自己審核通過添加了active標簽之后才會顯示

{% p center logo large, group(分組)： %}
sites型的issues默認不分組，如果需要分組，可指定分組依據「keywords」，和分組白名單「value1」、「value2」等，例如：

group=version:v4,v3,v2
# 此處的version就是上文中的「keywords」

這個參數的作用就是，篩選出JSON中包含"version": "v4"或者"version":"v3"或者"version": "v2"的數據，並分組顯示。
{% p center logo large, 倉庫ISSUES模板配置 %}

{% endfolding %}

時間軸標簽timeline渲染

{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}

網站卡片標簽sites渲染

gitee倉庫示例

{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

github倉庫示例

{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

網站卡片標簽sites分組渲染
這是Volantis主題官網的「示例博客」頁面的數據：

{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}

{% endtabs %}

詩詞標簽 poem

{% tabs,3 %}

{% poem [title],[author] %}
詩詞內容
{% endpoem %}

title：詩詞標題
author：作者，可以不寫 {% poem 水調歌頭,蘇軾 %}
丙辰中秋，歡飲達旦，大醉，作此篇，兼懷子由。
明月幾時有？把酒問青天。
不知天上宮闕，今夕是何年？
我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。
起舞弄清影，何似在人間？

轉朱閣，低綺戶，照無眠。
不應有恨，何事長向別時圓？
人有悲歡離合，月有陰晴圓缺，此事古難全。
但願人長久，千里共嬋娟。

{% poem 水調歌頭,蘇軾 %}
丙辰中秋，歡飲達旦，大醉，作此篇，兼懷子由。
明月幾時有？把酒問青天。
不知天上宮闕，今夕是何年？
我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。
起舞弄清影，何似在人間？

轉朱閣，低綺戶，照無眠。
不應有恨，何事長向別時圓？
人有悲歡離合，月有陰晴圓缺，此事古難全。
但願人長久，千里共嬋娟。
{% endpoem %}

{% endtabs %}

阿里圖標 icon

{% tip cogs %}本標簽的圖標需要自己額外引入阿里矢量圖標庫的樣式，具體引入方案請移步：Hexo引入阿里矢量圖標庫

{% icon [icon-xxxx],[font-size] %}

icon-xxxx：表示圖標 font-class, 可以在自己的阿里矢量圖標庫項目的 font-class 引用方案內查詢並復制。
font-size：表示圖標大小，直接填寫數字即可，單位為 em。圖標大小默認值為 1em。 {% icon icon-rat_zi %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}

{% icon icon-rat_zi %}{% icon icon-rat,2 %}

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}

{% endtabs %}

特效標簽 wow

{% note blue 'fas fa-bullhorn' flat %}
特效標簽的靜態資源未添加在本帖的配置內容中（因為多為 cdn 配置），請移步站內教程完成相關配置：{% link 使用 wowjs 給博客添加動畫效果, https://akilar.top/posts/abab51cf/, https://images.niaobulashi.com/hexo/niaobulashi/fluid/source/img/friends/akilar.ico %}
{% endnote %}

{% endtabs %}

{% btn 'https://akilar.top/posts/615e2dec/#引用-note', 參考：基於 Butterfly 的外掛標簽引入,far fa-hand-point-right,red larger %}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Butterfly側邊欄引入一言 Butterfly美化 script標簽引入腳本的引入位置與效果 html標簽引入外部html iframe 標簽引入視頻的格式 Butterfly透明背景設置 hexo butterfly優化 js 引入外部文件之 script 標簽 HTML標簽引入之頭部標簽() vue 中引入 wow 筆記