Hexo外挂标签

本站采用了店长的外挂标签，但是使用方法太多，博主太懒(其实是脑子太笨，不想记)所以写这篇文章记录下博主觉得自己会用到的一些(更全面的教程和使用方法可以查看文章最后原文链接)

安装方法

• npm插件安装方案（推荐）
• 源码修改配置方案

1. 安装插件,在博客根目录[Blog]下打开终端，运行以下指令：

   npm install hexo-butterfly-tag-plugins-plus --save

   考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差，建议您将其替换成hexo-renderer-kramed

   npm uninstall hexo-renderer-marked --save
   npm install hexo-renderer-kramed --save

2. 添加配置信息，以下为写法示例
   在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

   # tag-plugins-plus
   # see https://akilar.top/posts/615e2dec/
   tag_plugins:
     enable: true # 开关
     priority: 5 #过滤器优先权
     issues: false #issues标签依赖注入开关
     link:
       placeholder: /img/link.png #link_card标签默认的图标图片
     CDN:
       anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
       jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
       issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
       iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
       carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
       tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

3. 参数释义

参数	备选值(类型)	释义
enable	true/false	【必选】控制开关
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issues	true/false	【可选】issues标签控制开关，默认为false
link.placeholder	【必选】link卡片外挂标签的默认图标
CDN.anima	URL	【可选】动画标签anima的依赖
CDN.jquery	URL	【可选】issues标签依赖
CDN.issues	URL	【可选】issues标签依赖
CDN.iconfont	URL	【可选】iconfont标签symbol样式引入，如果不想引入，则设为false
CDN.carousel	URL	【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
CDN.tag_plugins_css	URL	【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号

源码修改配置方案适用于不想应用全部外挂标签的用户，供熟悉外挂标签原理的用户自行选择装配需要的标签文件。

1. 下载资源文件

下载资源文件

1. 将下载的hexo-butterfly-tag-plugins-plus.zip解压得到资源文件夹,下文以[tag_plugins_file]指代该文件夹。
2. 将[tag_plugins_file]\lib\scripts目录下的文件放到[Blogroot]\themes\butterfly\scripts\tag\文件夹内。
3. 将[tag_plugins_file]\lib\style目录下的文件放到[Blogroot]\themes\butterfly\source\css\tags\文件夹内。
4. 修改[Blogroot]\_config.butterfly.yml的inject配置项，添加CDN依赖项。由于issues写入timeline和site-card标签要用到jquery，请务必根据注释指示的版本决定是否添加。

   inject:
     head:
       - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'">  #动画标签anima的依赖
       - <script async src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js"></script> #carousel相册鼠标动作的依赖
     bottom:
       - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
       # 自butterfly_v3.4.0+开始，主题基本实现去jquery化，需要自己添加引用，请读者根据版本自行决定是否添加这行引用。
       - <script defer src="https://npm.elemecdn.com/hexo-theme-volantis@4.3.1/source/js/issues.js"></script>
       #数据集合标签issues的依赖

5. 考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差，建议您将其替换成hexo-renderer-kramed

   npm uninstall hexo-renderer-marked --save
   npm install hexo-renderer-kramed --save

6. 外挂标签使用方案请参阅下文。

行内文本样式text

• 标签语法
• 样式预览
• 示例源码

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

1. 带 下划线 的文本
2. 带 着重号 的文本
3. 带 波浪线 的文本
4. 带 删除线 的文本
5. 键盘样式的文本 command + D
6. 密码样式的文本：这里没有验证码

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

行内文本span

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% span 样式参数(参数以空格划分), 文本内容 %}

1. 字体: logo, code
2. 颜色: red、yellow、green、cyan、blue、gray
3. 大小: small, h4, h3, h2, h1, large, huge, ultra
4. 对齐方向: left, center, right

• 彩色文字
  在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
• 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  Volantis
  A Wonderful Theme for Hexo

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% 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 %}

段落文本p

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% p 样式参数(参数以空格划分), 文本内容 %}

1. 字体: logo, code
2. 颜色: red、yellow、green、cyan、blue、gray
3. 大小: small, h4, h3, h2, h1, large, huge, ultra
4. 对齐方向: left, center, right

• 彩色文字
  在一段话中方便插入各种颜色的标签，包括：

  红色

  、

  黄色

  、

  绿色

  、

  青色

  、

  蓝色

  、

  灰色

  。
• 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。

  Volantis

  A Wonderful Theme for Hexo

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% 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 %}

上标标签tip

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

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% tip [参数，可选] %}文本内容{% endtip %}

1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
2. 自定义图标: 支持fontawesome。

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

{% tip %}default{% endtip %}
{% tip info %}info{% 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 %}

动态标签anima

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% tip [参数，可选] %}文本内容{% endtip %}

更多详情请参看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-fast或faa-slow来控制动画快慢。

1. On DOM load（当页面加载时显示动画）

warning

ban

1. 调整动画速度

warning

ban

1. On hover（当鼠标悬停时显示动画）

warning

ban

1. On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

1. On DOM load（当页面加载时显示动画）

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

2. 调整动画速度

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

3. On hover（当鼠标悬停时显示动画）

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

4. On parent hover（当鼠标悬停在父级元素时显示动画）

   {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
   {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

复选列表 checkbox

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

1. 样式: plus, minus, times
2. 颜色: red、yellow、green、cyan、blue、gray
3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

单选列表 radio

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% radio 样式参数（可选）, 文本（支持简单md） %}

1. 颜色: red、yellow、green、cyan、blue、gray
2. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

链接卡片 link

• 标签语法
• 样式预览
• 示例源码

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

引用站外地址

三尺青锋

https://lengmo714.top/img/favicon.ico

{% link 三尺青锋 , https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}

按钮 btns

Volantis的按钮使用的是btn和btns标签。btns和butterfly的button不冲突，但是btn会被强制渲染，导致部分参数失效,而且btn的效果还是butterfly的button更好看些。所以就只适配了btns。

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% 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. 显示类似「团队成员」之类的一组含有头像的链接：

三尺青锋 三尺青锋 三尺青锋 三尺青锋 三尺青锋

1. 含有图标的按钮：

下载源码 查看文档

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

心率管家

专业版

心率管家

免费版

1. 显示类似「团队成员」之类的一组含有头像的链接：

   {% btns circle grid5 %}
   {% cell 三尺青锋, https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}
   {% cell 三尺青锋, https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}
   {% cell 三尺青锋, https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}
   {% cell 三尺青锋, https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}
   {% cell 三尺青锋, https://lengmo714.top/img/favicon.ico , https://lengmo714.top%}
   {% endbtns %}

2. 含有图标的按钮：

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

3. 圆形图标+标题+描述+图片+网格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>

行内图片 inlineimage

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% 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 %} 一段话。

单张图片 image

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

1. 图片宽度高度：width=300px, height=32px
2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
3. 占位背景色：bg=#f2f2f2

1. 添加描述

每天下课回宿舍的路，没有什么故事。

1. 指定宽度

1. 指定宽度并添加描述

每天下课回宿舍的路，没有什么故事。

1. 设置占位背景色

优化不同宽度浏览的观感

1. 添加描述

   {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

2. 指定宽度

   {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

3. 指定宽度并添加描述

   {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

4. 设置占位背景色

   {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

折叠框 folding

Butterfly虽然也有内置折叠框hideToggle标签，但是Volantis的folding折叠框更好看一些。

• 标签语法
• 配置参数
• 样式预览
• 示例源码

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

1. 颜色： red、yellow、green、cyan、blue、gray
2. 状态：状态填写 open 代表默认打开。

查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

• haha
• hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

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

分栏 tab

Butterfly的tab标签和Volantis的tab标签都是移值自NexT主题，所以写法和效果一模一样

• 标签语法
• 配置参数
• 样式预览
• 示例源码

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

1. Unique name :

   • 选项卡块标签的唯一名称，不带逗号。
   • 将在#id中用作每个标签及其索引号的前缀。
   • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
   • 仅当前帖子/页面的URL必须是唯一的！

2. [index]:

   • 活动选项卡的索引号。
   • 如果未指定，将选择第一个标签（1）。
   • 如果index为-1，则不会选择任何选项卡。
   • 可选参数。

3. [Tab caption]:

   • 当前选项卡的标题。
   • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
   • 如果未指定标题，但指定了图标，则标题将为空。
   • 可选参数。
4. [@icon]:
   • FontAwesome图标名称（全名，看起来像“ fas fa-font”）
   • 可以指定带空格或不带空格；
   • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
   • 可选参数。

1. 预设选择第一个【默认】

   • test1 1
   • test1 2
   • test1 3

   This is Tab 1.

   This is Tab 2.

   This is Tab 3.

   </div></div>

   1. 预设选择tabs

      • test2 1
      • test2 2
      • test2 3

      This is Tab 1.

      This is Tab 2.

      This is Tab 3.

   2. 没有预设值

      • test3 1
      • test3 2
      • test3 3

      This is Tab 1.

      This is Tab 2.

      This is Tab 3.

   3. 自定义Tab名+只有icon+icon和Tab名

      • 第一个Tab
      • 炸弹

      tab名字为第一个Tab

      只有图标 没有Tab名字

      名字+icon

1. 预设选择第一个【默认】

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

2. 预设选择tabs

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

3. 没有预设值

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

4. 自定义Tab名+只有icon+icon和Tab名

   {% tabs test4 %}
   <!-- tab 第一个Tab -->
   **tab名字为第一个Tab**
   <!-- endtab -->
   
   <!-- tab @fab fa-apple-pay -->
   **只有图标 没有Tab名字**
   <!-- endtab -->
   
   <!-- tab 炸弹@fas fa-bomb -->
   **名字+icon**
   <!-- endtab -->
   {% endtabs %}

注释 notation

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% nota [label] , [text] %}

1. label: 注释词汇
2. text: 悬停显示的注解内容

把鼠标移动到我上面试试

{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

进度条 progress

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% progress [width] [color] [text] %}

1. width: 0到100的阿拉伯数字
2. color: 颜色，取值有red、yellow、green、cyan、blue、gray
3. text:进度条上的文字内容

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

诗词标签 poem

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% poem [title],[author] %}
诗词内容
{% endpoem %}

1. title：诗词标题
2. author：作者，可以不写

水调歌头

苏轼

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

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

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

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

音频 audio

• 标签语法
• 样式预览
• 示例源码

{% audio 音频链接 %}

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

视频 video

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% video 视频链接 %}

1. 对其方向：left, center, right
2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。

1. 100%宽度

1. 50%宽度

1. 25%宽度

1. 100%宽度

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

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

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

本文内容全部来自糖果屋博客，参考链接

引用站外地址

糖果屋

https://akilar.top/posts/615e2dec

</div>

</div>
</a></div>