基于 Butterfly 的外挂标签引入-笔记

行内文本样式 text

{% tabs, 2 %}

{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 带 {% u 下划线 %} 的文本
  2. 带 {% emp 着重号 %} 的文本
  3. 带 {% wavy 波浪线 %} 的文本
  4. 带 {% del 删除线 %} 的文本
  5. 键盘样式的文本 {% kbd command %} +
  6. 密码样式的文本:
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}

{% endtabs %}

行内文本 span

{% tabs, 3 %}

{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体:logo, code
  2. 颜色:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: 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 样式参数(参数以空格划分), 文本内容 %}
  1. 字体:logo, code
  2. 颜色:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: 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标签外挂有两种用法。iconslight_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 %}

{% 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 %}

{% endfolding %}

{% endtabs %}

上标标签 tip

{% tip cogs %}主要样式参考自小康的butterfly渐变背景标签,自己写了个tip.js来渲染标签,精简了一下代码。{% endtip %}

{% tip [参数,可选] %}文本内容{% endtip %}
  1. 样式: success, error, warning, bolt, ban, home, sync, cogs, key, bell
  2. 自定义图标: 支持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文档

  1. 将所需的CSS类添加到图标(或DOM中的任何元素)。
  2. 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSS类faa-parent animated-hover。(详情见示例及示例源码)
    You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
  3. 可以通过给目标元素添加CSS类faa-fastfaa-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
  1. On DOM load(当页面加载时显示动画)
    {% tip warning faa-horizontal animated %}warning

  2. 调整动画速度
    {% tip warning faa-horizontal animated faa-fast %}warning

  3. On hover(当鼠标悬停时显示动画)
    {% tip warning faa-horizontal animated-hover %}warning

  1. On DOM load(当页面加载时显示动画)
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}
  1. 调整动画速度
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  1. On hover(当鼠标悬停时显示动画)
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

{% endtabs %}

复选列表 checkbox

{% tabs,3 %}

{% checkbox 样式参数(可选), 文本(支持简单md) %}
  1. 颜色: {% span red, red %}、{% span yellow, yellow %}、{% span green, green %}、{% span cyan, cyan %}、{% span blue, blue %}、
  2. 选中状态: 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) %}
  1. 颜色: {% span red, red %}、{% span yellow, yellow %}、{% span green, green %}、{% span cyan, cyan %}、{% span blue, blue %}、
  2. 选中状态: 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 %}

  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 服务。

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

不需要额外处理。

{% endtimenode %}

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

  1. 全局搜索 seotitle 并替换为 seo_title
  2. group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name
  3. 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 的按钮使用的是 btnbtns 标签。btnsbutterflybutton 不冲突,但是 btn 会被强制渲染,导致部分参数失效,而且 btn 的效果还是 butterflybutton 更好看些。所以就只适配了 btns

{% tabs,3 %}

{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式:rounded, circle
  2. 增加文字样式:可以在容器内增加 <b>标题</b><p>描述文字</p>
  3. 布局方式:
    默认为自动宽度,适合视野内只有一两个的情况。
参数 含义
wide 宽一点的按钮
fill 填充布局,自动铺满至少一行,多了会换行
center 居中,按钮之间是固定间距
around 居中分散
grid2 等宽最多 2 列,屏幕变窄会适当减少列数
grid3 等宽最多 3 列,屏幕变窄会适当减少列数
grid4 等宽最多 4 列,屏幕变窄会适当减少列数
grid5 等宽最多 5 列,屏幕变窄会适当减少列数
  1. 如果需要显示类似「团队成员」之类的一组含有头像的链接:
    {% 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 %}
  2. 或者含有图标的按钮:
    {% btns rounded grid5 %}
    {% cell 下载源码, /, fas fa-download %}
  3. 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
    {% btns circle center grid5 %}


    心率管家
    {% p red, 专业版 %}




    心率管家
    {% p green, 免费版 %}

  4. 如果需要显示类似「团队成员」之类的一组含有头像的链接:
{% 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 %}
  1. 或者含有图标的按钮:
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格 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 主题
  1. 用户信息卡片
  1. 仓库信息卡片
  1. 用户信息卡片
| {% 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 %} |
  1. 仓库信息卡片
| {% 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] %}
  1. left:徽标左边的信息,必选参数。

  2. right: 徽标右边的信息,必选参数,

  3. logo:徽标图标,图标名称详见 simpleicons,可选参数。

  4. color:徽标右边的颜色,可选参数。

  5. link:指向的链接,可选参数。

  6. title:徽标的额外信息,可选参数。主要用于优化 SEO,但 object 标签不会像 a 标签一样在鼠标悬停显示 title 信息。

  7. option:自定义参数,支持 shields.io 的全部 API 参数支持,具体参数可以参看上文中的拓展写法示例。形式为 name1=value2&name2=value2

    {% note info modern %}本外挂标签的参数分为三组,用 || 分割。

  8. 基本参数,定义徽标左右文字和图标

  9. 信息参数,定义徽标右侧内容背景色,指向链接
    {% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
    //如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割

  10. 拓展参数,支持 shields 的 API 的全部参数内容
    {% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署,默认线路托管于Vercel||style=social&logoWidth=20 %}
    //如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割

    {% note primary modern %}本外挂标签的参数分为三组,用 || 分割。

  11. 基本参数,定义徽标左右文字和图标

{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}
  1. 信息参数,定义徽标右侧内容背景色,指向链接
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}
  1. 拓展参数,支持 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=高度(可选) %}
  1. 高度: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=占位颜色(可选) %}
  1. 图片宽度高度:width=300px, height=32px
  2. 图片描述:alt = 图片描述(butterfly 需要在主题配置文件中开启图片描述)
  3. 占位背景色: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 视频链接 %}
  1. 对其方向:left, center, right

  2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。

  3. 100% 宽度

  4. 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 %}

  5. 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 %}

  1. 100% 宽度
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  1. 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 %}
  1. 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 相册,而且会根据图片大小自动调整排版,效果比 Volantisgallery 更好,故不再收录 Volantisgallery 标签。

以下为 Butterfly 自带的 gallery 标签写法。相册图库和相册配合使用。

{% tabs,3 %}

  1. 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>
  1. 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 相册图库

  • gallery 相册

{% gallery %}







{% note info flat %}
对于很多同学提问的 gallerygroupgallery 相册页的链接问题。这里说下我个人的使用习惯。
一般使用相册图库的话,可以在导航栏加一个 gallery 的 page (使用指令 hexo new page gallery 添加),里面放相册图库作为封面。然后在 [Blogroot]/source/gallery/ 下面建立相应的文件夹,例如若按照这里的示例,若欲使用 /gallery/MC/ 路径访问 MC 相册,则需要新建 [Blogroot]/source/gallery/MC/index.md,并在里面填入 gallery 相册内容。

  1. 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>
  1. 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 标签,但是 Volantisfolding 折叠框更好看一些。{% endnote %}

{% folding 参数(可选), 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色:blue, cyan, green, yellow, red
  2. 状态:状态填写 open 代表默认打开。

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块(代码块没法嵌套代码块)

{% folding yellow, 查看列表测试 %}

  • haha
  • hehe

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}

{% endfolding %}

{% 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 %}Butterflytab 标签和 Volantistab 标签都是移值自 NexT 主题,所以写法和效果一模一样。{% endnote %}

{% tabs,3 %}

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
  • 选项卡块标签的唯一名称,不带逗号。
  • 将在 #id 中用作每个标签及其索引号的前缀。
  • 如果名称中包含空格,则对于生成 #id,所有空格将由破折号代替。
  • 仅当前帖子 / 页面的 URL 必须是唯一的!
  1. [index]:
  • 活动选项卡的索引号。
  • 如果未指定,将选择第一个标签(1)。
  • -如果 index 为 - 1,则不会选择任何选项卡。
  • 可选参数。
  1. [Tab caption]:
  • -当前选项卡的标题。
  • 如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
  • 如果未指定标题,但指定了图标,则标题将为空。
  • 可选参数。
  1. [@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 标签,目前支持的类型有:

  1. 时间轴 timeline: 解析成 timeline 标签,issue 的标题对应 timeline 的时间,issue 的内容对应 timeline 的内容。
  2. 网站卡片 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 %}

  1. 时间轴标签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 %}
  1. 网站卡片标签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 %}
  1. 网站卡片标签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 %}
  1. title:诗词标题
  2. author:作者,可以不写 {% poem 水调歌头,苏轼 %}
    丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。
    明月几时有?把酒问青天。
    不知天上宫阙,今夕是何年?
    我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
    起舞弄清影,何似在人间?

转朱阁,低绮户,照无眠。
不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。

{% poem 水调歌头,苏轼 %}
丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。
明月几时有?把酒问青天。
不知天上宫阙,今夕是何年?
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
起舞弄清影,何似在人间?

转朱阁,低绮户,照无眠。
不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。
{% endpoem %}

{% endtabs %}

阿里图标 icon

{% tip cogs %}本标签的图标需要自己额外引入阿里矢量图标库的样式,具体引入方案请移步:Hexo引入阿里矢量图标库

{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx:表示图标 font-class, 可以在自己的阿里矢量图标库项目的 font-class 引用方案内查询并复制。
  2. 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 %}

posted @ 2022-04-01 10:42  鸟不拉诗  阅读(830)  评论(0编辑  收藏  举报