博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

文章详情

互动

Butterfly主题使用案例

719336分钟2022-10-3111未知

以下案例有部分功能是使用了hexo-butterfly-tag-plugins-plus这个模块的功能。安装方式：npm i hexo-butterfly-tag-plugins-plus --save

标签外挂

{% tabs %}

{% hideToggle 效果展示 %}

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

{% endhideToggle %}

markdown

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

名称	用法
class	【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
style	【可选】不显示 icon
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

常用的标签

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

markdown

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

{% endhideToggle %}

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

markdown

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

{% endhideToggle %}

markdown

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

名称	用法
color	【可选】顔色 (default / blue / pink / red / purple / orange / green)
icon	【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

{% hideToggle simple-DIY图标白底小边 %}

{% note ‘fab fa-cc-visa’ simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue ‘fas fa-bullhorn’ simple %}
2023年快到了…
{% 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 %}

markdown

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

{% endhideToggle %}

{% hideToggle modern-DIY图标color无边 %}

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

markdown

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

{% endhideToggle %}

{% hideToggle flat-DIY图标color小边 %}

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

markdown

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

{% endhideToggle %}

{% hideToggle disabled-DIY图标无底无边 %}

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

markdown

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

{% endhideToggle %}

{% hideToggle 效果展示 %}

为简单的一句话提供的简便写法。

{% endhideToggle %}

{% hideToggle 使用格式%}

html

<div class="tip">
    <p>小码同学</p>
</div>

<div class="tip success">
    <p>小码同学</p>
</div>

<div class="tip error">
    <p>小码同学</p>
</div>

<div class="tip warning">
    <p>小码同学</p>
</div>

<div class="tip wtgo">
    <p>小码同学</p>
</div>

<div class="tip ban">
    <p>小码同学</p>
</div>

<div class="tip home">
    <p>小码同学</p>
</div>

<div class="tip important">
    <p>小码同学</p>
</div>

<div class="tip ref">
    <p>小码同学</p>
</div>
<div class="tip ffa">
    <p>小码同学</p>
</div>

<div class="tip key">
    <p>小码同学</p>
</div>

<div class="tip socd">
    <p>小码同学</p>
</div>

{% endhideToggle %}

{% hideToggle 参数 %}

参数	备注
info(默认不写)	蓝色叹号
success	绿色打钩
error	红色X
warning	黄色叹号
wtgo	绿色闪电
ban	红色禁止
home	蓝色家
important	蛋黄叹号
ref	绿色环形
ffa	紫色设置
key	灰色钥匙
socd	黄色铃铛

{% endhideToggle %}

{% endtabs %}

分栏tab

{% hideToggle 效果展示 %}

{% tabs test4 %}

tab名字为第一个Tab

只有图标没有Tab名字

名字+icon

{% endtabs %}

{% folding green, 案例代码 %}

markdown

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

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

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

{% endfolding %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% 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’.
- 可选参数。

{% endhideToggle %}

tag-hide

{% tabs tag-hide %}

{% note blue ‘fas fa-bullhorn’ simple %}

请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常

{% endnote %}

使用格式：

markdown

{% hideToggle display,background,text-color %}
被隐藏起来的内容
{% endhideToggle %}

参数	备注
background	收缩框背景颜色
text-color	收缩框字体颜色(内容颜色正常)

{% note blue ‘fas fa-bullhorn’ simple %}

颜色可用16进制，使用时，字体颜色尽量深色，字体颜色与底色对比度要高。( display 不能包含英文逗号，可用 &sbquo)

{% endnote %}

{% hideToggle display,#fbc2eb,#330867 %}
被隐藏起来的内容

{% endhideToggle %}

{% hideToggle 效果展示 %}

哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

yaml

哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

{% hideInline content,display,bg,color %}

参数	备注
content	文本内容
display	按钮显示的文字 (可选)
bg	按钮的背景颜色 (可选)
color	按钮文字的颜色 (可选)

{% endhideToggle %}

{% hideToggle 效果展示 %}

{% hideBlock 查看答案 %}
{% gallery %}

{% endgallery %}
{% endhideBlock %}

yaml

{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}
{% endhideBlock %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

yaml

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

参数	备注
content	文本内容
display	按钮显示的文字 (可选)
bg	按钮的背景颜色 (可选)
color	按钮文字的颜色 (可选)

{% endhideToggle %}

{% note blue ‘fas fa-bullhorn’ simple %}
Butterfly虽然也有内置折叠框hideToggle标签，但是Volantis的folding折叠框更好看一些。
{% endnote %}

{% hideToggle 效果展示 %}

{% folding 查看图片测试 %}

{% endfolding %}

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

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

{% endfolding %}

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

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

haha
hehe

{% endfolding %}

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

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

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

hahaha

{% endfolding %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% folding color state, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

参数	备注
color	blue, cyan, green, yellow, red
state	open(可选，默认是不打开)

{% endhideToggle %}

{% endtabs %}

timeline

markdown

{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

参数	解释
title	标题/时间线
color	timeline 颜色 default(留空) / blue / pink / red / purple / orange / green

展示

markdown

{% timeline 2023 %}
<!-- timeline 01-02 -->
默认色
<!-- endtimeline -->
{% endtimeline %}

{% tabs %}

{% timeline 2023 %}

这是默认色(默认是蓝色blue)

{% endtimeline %}

yaml

{% timeline 2023 %}
<!-- timeline 01-02 -->
这是默认色(默认是蓝色blue)
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,pink %}

这是粉红色pink

{% endtimeline %}

{% timeline 2023,pink %}
<!-- timeline 01-02 -->
这是粉红色pink
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,red %}

这是红色red

{% endtimeline %}

markdown

{% timeline 2023,red %}
<!-- timeline 01-02 -->
这是红色red
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,purple %}

这是紫色purple

{% endtimeline %}

markdown

{% timeline 2023,purple %}
<!-- timeline 01-02 -->
这是紫色purple
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,orange %}

这是浅黄色orange

{% endtimeline %}

markdown

{% timeline 2023,orange %}
<!-- timeline 01-02 -->
这是浅黄色orange
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,green %}

这是浅绿色green

{% endtimeline %}

markdown

{% timeline 2023,green %}
<!-- timeline 01-02 -->
这是浅绿色green 
<!-- endtimeline -->
{% endtimeline %}

{% endtabs %}

inlineImg

{% note blue ‘fas fa-bullhorn’ simple %}
主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。
{% endnote %}

{% hideToggle 效果展示 %}

你看我长得漂亮不

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

markdown

{% inlineImg [src] [height] %}

参数	备注
src	图片链接
height	图片高度限制(可选)

{% endhideToggle %}

文字高亮

{% tabs %}

{% hideToggle 效果展示 %}

markdown

臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% label text color %}

参数	解释
text	高亮文字
color	【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green

{% endhideToggle %}

{% hideToggle 效果展示 %}

带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

markdown

带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

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

{% endhideToggle %}

{% hideToggle 效果展示 %}

彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
超大号文字
文档「开始」页面中的标题部分就是超大号文字。

{% span center logo large red, Volantis %}

{% span center, Volantis %}

{% span center small green, A Wonderful Theme for Hexo %}

markdown

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large  red, Volantis %}
{% span center, Volantis %}
{% span center small green, A Wonderful Theme for Hexo %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% span location font , context %}

参数	备注
location	left, center, right(必选)
font	logo, code(可选)
size	small, h4, h3, h2, h1, large, huge, ultra(可选)
color	red,yellow,green,cyan,blue,gray(可选)
context	文本内容

{% endhideToggle %}

{% endtabs %}

友链

{% flink %}

class_name: 友情链接
class_desc: 那些人，那些事
link_list:
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!

{% endflink %}

{% hideToggle 语法格式 %}

yaml

{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
{% endflink %}

{% endhideToggle %}

链接卡片

{% tabs %}

{% link 小码同学, https://blog/hikki.site, /data/img/favicon.ico %}

markdown

{% link 小码同学, https://blog/hikki.site, /data/img/favicon.ico %}

markdown

{% link 标题, 链接, 图片链接（可选） %}

{% endtabs %}

按钮btns

{% note blue ‘fas fa-bullhorn’ simple %}
Volantis的按钮使用的是btn和btns标签。btns和butterfly的button不冲突，但是btn会被强制渲染，导致部分参数失效,而且btn的效果还是butterfly的button更好看些。所以就只适配了btns。
{% endnote %}

{% hideToggle 使用方式 %}

markdown

{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

圆角样式：rounded, circle
增加文字样式：可以在容器内增加 标题和描述文字
布局方式：
默认为自动宽度，适合视野内只有一两个的情况。

参数	备注
wide	宽一点的按钮
fill	填充布局，自动铺满至少一行，多了会换行
center	居中，按钮之间是固定间距
around	居中分散
grid2	等宽最多2列，屏幕变窄会适当减少列数
grid3	等宽最多3列，屏幕变窄会适当减少列数
grid4	等宽最多4列，屏幕变窄会适当减少列数
grid5	等宽最多5列，屏幕变窄会适当减少列数

{% endhideToggle %}

{% tabs %}

{% note blue ‘fas fa-bullhorn’ simple %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

{% endnote %}

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

markdown

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

{% note blue ‘fas fa-bullhorn’ simple %}

或者含有图标的按钮：

{% endnote %}

{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

markdown

{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

{% note blue ‘fas fa-bullhorn’ simple %}

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

{% endnote %}

{% btns circle center grid5 %}

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

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

markdown

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

{% endbtns %}

{% endtabs %}

GitHub卡片 GhCark

{% note blue ‘fas fa-bullhorn’ simple %}

ghcard使用了github-readme-stats的API，支持直接使用markdown语法来写。

{% endnote %}

{% hideToggle 使用方式 %}

markdown

{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

更多参数可以参考：

使用,分割各个参数。写法为：参数名=参数值
以下只写几个常用参数值。

参数名	取值	释义
hide	stars,commits,prs,issues,contribs	隐藏指定统计
count_private	true	将私人项目贡献添加到总提交计数中
show_icons	true	显示图标
theme	请查阅Available Themes	主题

{% endhideToggle %}

网站卡片 sites

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

markdown

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

{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

插入视频、音频

{% tabs %}

{% hideToggle 效果展示 %}

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

markdown

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

{% endhideToggle %}

{% hideToggle 使用方法 %}

{% audio 音频链接 %}

{% endhideToggle %}

{% hideToggle 效果展示 %}

100%宽度

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

markdown

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

markdown

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

markdown

{% videos, 4,right %}
{% 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 %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

{% videos,列数  %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

列数：支持1~4列

{% endhideToggle %}

{% endtabs %}

题注 & 注音

引入题注，我们在写文章时，经常需要用到对某个词进行解释，这是题注就可以很好的解决这个问题。

小码博客^1

小码公众号^2

把鼠标放到数字上面试试^3

使用方法

markdown

小码博客[^1]

小码公众号[^2]

把鼠标放到数字上面试试[^3]

[^1]: https://blog.hikki.site
[^2]: 小码公众号叫“小码同学”
[^3]: 这就是题注

文章加密

安装插件

bash

npm install --save hexo-blog-encrypt

博客配置

在博客配置文件_config.yml文件添加如下：

yaml

# 文章加密
encrypt:
    enable: true

设置密码

markdown

---
title: Hello World
date: 2020-03-13 21:12:21
password: 123456
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好，这里需要密码。
---

小码同学

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自小码同学

教程50 博客29

喜欢这篇文章的人也看了

随便逛逛

Windows11家庭版开启远程访问

WordPress配置又拍云CDN

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

文章详情

互动

Butterfly主题使用案例

719336分钟2022-10-3111未知

以下案例有部分功能是使用了hexo-butterfly-tag-plugins-plus这个模块的功能。安装方式：npm i hexo-butterfly-tag-plugins-plus --save

标签外挂

{% tabs %}

{% hideToggle 效果展示 %}

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

{% endhideToggle %}

markdown

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

名称	用法
class	【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
style	【可选】不显示 icon
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

常用的标签

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

markdown

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

{% endhideToggle %}

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

markdown

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

{% endhideToggle %}

markdown

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

名称	用法
color	【可选】顔色 (default / blue / pink / red / purple / orange / green)
icon	【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

{% hideToggle simple-DIY图标白底小边 %}

markdown

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

{% endhideToggle %}

{% hideToggle modern-DIY图标color无边 %}

markdown

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

{% endhideToggle %}

{% hideToggle flat-DIY图标color小边 %}

markdown

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

{% endhideToggle %}

{% hideToggle disabled-DIY图标无底无边 %}

markdown

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

{% endhideToggle %}

{% hideToggle 效果展示 %}

为简单的一句话提供的简便写法。

{% endhideToggle %}

{% hideToggle 使用格式%}

html

<div class="tip">
    <p>小码同学</p>
</div>

<div class="tip success">
    <p>小码同学</p>
</div>

<div class="tip error">
    <p>小码同学</p>
</div>

<div class="tip warning">
    <p>小码同学</p>
</div>

<div class="tip wtgo">
    <p>小码同学</p>
</div>

<div class="tip ban">
    <p>小码同学</p>
</div>

<div class="tip home">
    <p>小码同学</p>
</div>

<div class="tip important">
    <p>小码同学</p>
</div>

<div class="tip ref">
    <p>小码同学</p>
</div>
<div class="tip ffa">
    <p>小码同学</p>
</div>

<div class="tip key">
    <p>小码同学</p>
</div>

<div class="tip socd">
    <p>小码同学</p>
</div>

{% endhideToggle %}

{% hideToggle 参数 %}

参数	备注
info(默认不写)	蓝色叹号
success	绿色打钩
error	红色X
warning	黄色叹号
wtgo	绿色闪电
ban	红色禁止
home	蓝色家
important	蛋黄叹号
ref	绿色环形
ffa	紫色设置
key	灰色钥匙
socd	黄色铃铛

{% endhideToggle %}

{% endtabs %}

分栏tab

{% hideToggle 效果展示 %}

{% tabs test4 %}

tab名字为第一个Tab

只有图标没有Tab名字

名字+icon

{% endtabs %}

{% folding green, 案例代码 %}

markdown

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

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

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

{% endfolding %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% 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’.
- 可选参数。

{% endhideToggle %}

tag-hide

{% tabs tag-hide %}

{% note blue ‘fas fa-bullhorn’ simple %}

{% endnote %}

使用格式：

markdown

{% hideToggle display,background,text-color %}
被隐藏起来的内容
{% endhideToggle %}

参数	备注
background	收缩框背景颜色
text-color	收缩框字体颜色(内容颜色正常)

{% note blue ‘fas fa-bullhorn’ simple %}

颜色可用16进制，使用时，字体颜色尽量深色，字体颜色与底色对比度要高。( display 不能包含英文逗号，可用 &sbquo)

{% endnote %}

{% hideToggle display,#fbc2eb,#330867 %}
被隐藏起来的内容

{% endhideToggle %}

{% hideToggle 效果展示 %}

哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

yaml

哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

{% hideInline content,display,bg,color %}

参数	备注
content	文本内容
display	按钮显示的文字 (可选)
bg	按钮的背景颜色 (可选)
color	按钮文字的颜色 (可选)

{% endhideToggle %}

{% hideToggle 效果展示 %}

{% hideBlock 查看答案 %}
{% gallery %}

{% endgallery %}
{% endhideBlock %}

yaml

{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}
{% endhideBlock %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

yaml

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

参数	备注
content	文本内容
display	按钮显示的文字 (可选)
bg	按钮的背景颜色 (可选)
color	按钮文字的颜色 (可选)

{% endhideToggle %}

{% note blue ‘fas fa-bullhorn’ simple %}
Butterfly虽然也有内置折叠框hideToggle标签，但是Volantis的folding折叠框更好看一些。
{% endnote %}

{% hideToggle 效果展示 %}

{% folding 查看图片测试 %}

{% endfolding %}

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

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

{% endfolding %}

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

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

haha
hehe

{% endfolding %}

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

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

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

hahaha

{% endfolding %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% folding color state, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

参数	备注
color	blue, cyan, green, yellow, red
state	open(可选，默认是不打开)

{% endhideToggle %}

{% endtabs %}

timeline

markdown

{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

参数	解释
title	标题/时间线
color	timeline 颜色 default(留空) / blue / pink / red / purple / orange / green

展示

markdown

{% timeline 2023 %}
<!-- timeline 01-02 -->
默认色
<!-- endtimeline -->
{% endtimeline %}

{% tabs %}

{% timeline 2023 %}

这是默认色(默认是蓝色blue)

{% endtimeline %}

yaml

{% timeline 2023 %}
<!-- timeline 01-02 -->
这是默认色(默认是蓝色blue)
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,pink %}

这是粉红色pink

{% endtimeline %}

{% timeline 2023,pink %}
<!-- timeline 01-02 -->
这是粉红色pink
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,red %}

这是红色red

{% endtimeline %}

markdown

{% timeline 2023,red %}
<!-- timeline 01-02 -->
这是红色red
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,purple %}

这是紫色purple

{% endtimeline %}

markdown

{% timeline 2023,purple %}
<!-- timeline 01-02 -->
这是紫色purple
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,orange %}

这是浅黄色orange

{% endtimeline %}

markdown

{% timeline 2023,orange %}
<!-- timeline 01-02 -->
这是浅黄色orange
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2023,green %}

这是浅绿色green

{% endtimeline %}

markdown

{% timeline 2023,green %}
<!-- timeline 01-02 -->
这是浅绿色green 
<!-- endtimeline -->
{% endtimeline %}

{% endtabs %}

inlineImg

{% note blue ‘fas fa-bullhorn’ simple %}
主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。
{% endnote %}

{% hideToggle 效果展示 %}

你看我长得漂亮不

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

{% endhideToggle %}

{% hideToggle 使用格式 %}

markdown

{% inlineImg [src] [height] %}

参数	备注
src	图片链接
height	图片高度限制(可选)

{% endhideToggle %}

文字高亮

{% tabs %}

{% hideToggle 效果展示 %}

markdown

臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% label text color %}

参数	解释
text	高亮文字
color	【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green

{% endhideToggle %}

{% hideToggle 效果展示 %}

markdown

带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

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

{% endhideToggle %}

{% hideToggle 效果展示 %}

彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
超大号文字
文档「开始」页面中的标题部分就是超大号文字。

{% span center logo large red, Volantis %}

{% span center, Volantis %}

{% span center small green, A Wonderful Theme for Hexo %}

markdown

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large  red, Volantis %}
{% span center, Volantis %}
{% span center small green, A Wonderful Theme for Hexo %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

markdown

{% span location font , context %}

参数	备注
location	left, center, right(必选)
font	logo, code(可选)
size	small, h4, h3, h2, h1, large, huge, ultra(可选)
color	red,yellow,green,cyan,blue,gray(可选)
context	文本内容

{% endhideToggle %}

{% endtabs %}

友链

{% flink %}

class_name: 友情链接
class_desc: 那些人，那些事
link_list:
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!
- name: 小码博客
  link: https://blog.hikki.site
  avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
  descr: 喜欢的东西就努力去追求，万一成功了呢!

{% endflink %}

{% hideToggle 语法格式 %}

yaml

{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
    - name: 小码博客
      link: https://blog.hikki.site
      avatar: https://images.hikki.site/blog-static/636511250b21b-lXcJG3.jpg
      descr: 喜欢的东西就努力去追求，万一成功了呢!
{% endflink %}

{% endhideToggle %}

链接卡片

{% tabs %}

{% link 小码同学, https://blog/hikki.site, /data/img/favicon.ico %}

markdown

{% link 小码同学, https://blog/hikki.site, /data/img/favicon.ico %}

markdown

{% link 标题, 链接, 图片链接（可选） %}

{% endtabs %}

按钮btns

{% hideToggle 使用方式 %}

markdown

{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

圆角样式：rounded, circle
增加文字样式：可以在容器内增加 标题和描述文字
布局方式：
默认为自动宽度，适合视野内只有一两个的情况。

参数	备注
wide	宽一点的按钮
fill	填充布局，自动铺满至少一行，多了会换行
center	居中，按钮之间是固定间距
around	居中分散
grid2	等宽最多2列，屏幕变窄会适当减少列数
grid3	等宽最多3列，屏幕变窄会适当减少列数
grid4	等宽最多4列，屏幕变窄会适当减少列数
grid5	等宽最多5列，屏幕变窄会适当减少列数

{% endhideToggle %}

{% tabs %}

{% note blue ‘fas fa-bullhorn’ simple %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

{% endnote %}

markdown

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

{% note blue ‘fas fa-bullhorn’ simple %}

或者含有图标的按钮：

{% endnote %}

{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

markdown

{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

{% note blue ‘fas fa-bullhorn’ simple %}

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

{% endnote %}

{% btns circle center grid5 %}

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

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

markdown

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

{% endbtns %}

{% endtabs %}

GitHub卡片 GhCark

{% note blue ‘fas fa-bullhorn’ simple %}

ghcard使用了github-readme-stats的API，支持直接使用markdown语法来写。

{% endnote %}

{% hideToggle 使用方式 %}

markdown

{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

更多参数可以参考：

使用,分割各个参数。写法为：参数名=参数值
以下只写几个常用参数值。

参数名	取值	释义
hide	stars,commits,prs,issues,contribs	隐藏指定统计
count_private	true	将私人项目贡献添加到总提交计数中
show_icons	true	显示图标
theme	请查阅Available Themes	主题

{% endhideToggle %}

网站卡片 sites

markdown

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

{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

插入视频、音频

{% tabs %}

{% hideToggle 效果展示 %}

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

markdown

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

{% endhideToggle %}

{% hideToggle 使用方法 %}

{% audio 音频链接 %}

{% endhideToggle %}

{% hideToggle 效果展示 %}

100%宽度

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

markdown

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

50%宽度

markdown

{% 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%宽度

markdown

{% videos, 4,right %}
{% 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 %}

{% endhideToggle %}

{% hideToggle 使用方法 %}

{% videos,列数  %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

列数：支持1~4列

{% endhideToggle %}

{% endtabs %}

题注 & 注音

引入题注，我们在写文章时，经常需要用到对某个词进行解释，这是题注就可以很好的解决这个问题。

小码博客^1

小码公众号^2

把鼠标放到数字上面试试^3

使用方法

markdown

小码博客[^1]

小码公众号[^2]

把鼠标放到数字上面试试[^3]

[^1]: https://blog.hikki.site
[^2]: 小码公众号叫“小码同学”
[^3]: 这就是题注

文章加密

安装插件

bash

npm install --save hexo-blog-encrypt

博客配置

在博客配置文件_config.yml文件添加如下：

yaml

# 文章加密
encrypt:
    enable: true

设置密码

markdown

---
title: Hello World
date: 2020-03-13 21:12:21
password: 123456
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好，这里需要密码。
---

小码同学

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自小码同学

教程50 博客29

喜欢这篇文章的人也看了

随便逛逛

Windows11家庭版开启远程访问

WordPress配置又拍云CDN

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部