常用指令

hexo cl 清理文件
hexo g 生成静态文件
hexo d 部署博客
hexo s 启动本地服务
hexo n 标题 创建一篇文章
hexo new page 标题 创建一个新页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
title: # 网站标题
categories: # 分类(只能单线)
- category_1
- category_1_1
- category_1_1_1
tags: # 标签(可以多标)
- tag_1
- tag_2
type: "" # 指定这个页面的类型(比如categories/tags)
cover: # 封面图片,注意不能用../命令,双引号有无均可
comments: # 评论开关 true/false
date: # 创建时间
updated: # 更新时间
description: # 网站描述
aside: # 侧边栏开关
top_img: # 文章banner图,如果有cover的话默认用的是cover(这个可以给_post之外的用),其隐藏前缀目录为Website/public/注意格式应为:images/xxx,但是这样会使_posts里文章的相关文章封面失效,需要用URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---
写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标籤
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图,可设为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple 【可选】显示 toc 简洁模式
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时,才需要配置,默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside 【可选】显示侧边栏 (默认 true)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标籤、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时,才需要配置,默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

<

行内样式文本 text

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

行内文本 span

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

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

    A Wonderful Theme for Hexo

1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% 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 %}

段落文本 p

1

1

引用 note

内置图标

内置图标

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
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

iconslight_bg_offset只对方法一生效
1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 primary disabled %}
primary 提示块标籤
{% endnote %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

自定义图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' simple %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' simple%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
该充电了哦!
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note blue 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' modern %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' modern%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
该充电了哦!
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note blue 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' flat %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' flat%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
该充电了哦!
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note blue 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled  %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' disabled %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' disabled %}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
该充电了哦!
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note blue 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% 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 %}

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

上标标签 tip

1
{% 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图标

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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

1
{% 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-fastfaa-slow来控制动画快慢。
  1. On DOM load(当页面加载时显示动画)

    warning

    ban

  2. 调整动画速度

    warning

    ban

  3. On hover(当鼠标悬停时显示动画)

    warning

    ban

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

    warning

    ban

  1. On DOM load(当页面加载时显示动画)
    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}
  2. 调整动画速度
    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  3. On hover(当鼠标悬停时显示动画)
    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}
  4. On parent hover(当鼠标悬停在父级元素时显示动画)
    1
    2
    {% 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

1
{% checkbox 样式参数(可选), 文本(支持简单md) %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

1
2
3
4
5
6
7
8
9
10
{% 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

1
{% radio 样式参数(可选), 文本(支持简单md) %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

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

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题(可选)[,color] %}
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
{% endtimeline %}
参数 解释
title 标题/时间线
color timeline颜色:default(留空) / blue / pink / red / purple / orange / green

时间轴样式

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

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% timeline 时间轴样式,blue %}

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

<!-- endtimeline -->

<!-- timeline 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) -->

不需要额外处理。

<!-- endtimeline -->

<!-- timeline 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`。

<!-- endtimeline -->

{% endtimeline %}
1
{% link 标题, 链接, 图片链接(可选) %}
1
{% link 下雨天不打伞, https://zkkk123.cn, /img/avatar.jpg %}

按钮 btn

1
2
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,,outline%}

This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block center larger %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block right blue larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,green larger %}
</div>
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认style时)
按钮字体和边框顔色(outline时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为line
block/留空
[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空

按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. , circle
  2. 增加文字样式:可以在容器内增加 标题

    描述文字


    布局方式:
  3. 默认为自动宽度,适合视野内只有一两个的情况。
参数 含义
wide 宽一点的按钮
fill 填充布局,自动铺满至少一行,多了会换行
center 居中,按钮之间是固定间距
around 居中分散
grid2 等宽最多2列,屏幕变窄会适当减少列数
grid3 等宽最多3列,屏幕变窄会适当减少列数
grid4 等宽最多4列,屏幕变窄会适当减少列数
grid5 等宽最多5列,屏幕变窄会适当减少列数
  1. 如果需要显示类似「团队成员」之类的一组含有头像的链接:

  2. 或者含有图标的按钮:

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

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

    1
    2
    3
    4
    5
    6
    7
    {% 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 %}
  2. 或者含有图标的按钮:

    1
    2
    3
    4
    {% btns rounded grid5 %}
    {% cell 下载源码, /, fas fa-download %}
    {% cell 查看文档, /, fas fa-book-open %}
    {% endbtns %}
  3. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% 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>

github卡片 ghcard

1
2
{% ghcard 用户名, 其它参数(可选) %}
{% ghcard 用户名/仓库, 其它参数(可选) %}

更多参数可以参考:

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

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

  2. 仓库信息卡片
    | | |
    | — | — |
    | | |
    | | |
    | | |

  1. 用户信息卡片

    1
    2
    3
    4
    5
    | {% 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 %} |
  2. 仓库信息卡片

    1
    2
    3
    4
    5
    | {% 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 %} |

github徽标 ghbdage

1
{% 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。

本外挂标签的参数分为三组,用||分割。

  1. 基本参数

  2. 信息参数

    //如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割
  3. 拓展参数

    //如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割

本外挂标签的参数分为三组,用||分割。

  1. 基本参数

    1
    2
    {% bdage Theme,Butterfly %}
    {% bdage Frame,Hexo,hexo %}
  2. 信息参数

    1
    2
    3
    {% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
    //如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割
    {% bdage Source,GitHub,GitHub||,https://github.com/ %}
  3. 拓展参数

    1
    2
    3
    {% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署,默认线路托管于Vercel||style=social&logoWidth=20 %}
    //如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割
    {% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %}
{% endsitegroup %}
1
2
3
4
5
6
7
{% 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 %}

行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度(可选) %}
  1. 高度:height=20px

这是 一段话。

这又是 一段话。

1
2
3
这是 {% 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

1
{% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}
  1. 图片宽度高度:width=300px, height=32px
  2. 图片描述:alt=图片描述(butterfly需要在主题配置文件中开启图片描述)
  3. 占位背景色:bg=#f2f2f2
  1. 添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。
  2. 指定宽度:

  3. 指定宽度并添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。
  4. 设置占位背景色:

    优化不同宽度浏览的观感
    优化不同宽度浏览的观感
  1. 添加描述:

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

    1
    {% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
  3. 指定宽度并添加描述:

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

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

音频 audio

1
{% audio 音频链接 %}
1
2
3
4
5
6
7
<audio controls="" preload="" __idm_id__="269361153">
<source
src="http://music.163.com/song/media/outer/url?id=574566207.mp3"
type="audio/mp3"
/>
Your browser does not support the audio tag.
</audio>

嵌入自适应B站视频

key 说明
aid 之前 B 站使用的 AV 号
bvid 目前的 BV 号
page 第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频
as_wide 是否宽屏 【1: 宽屏, 0: 小屏】
high_quality 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
danmaku 是否开启弹幕 【1: 开启(默认), 0: 关闭】
1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=52516662&bvid=BV19p4y1Q7ph&cid=91773304&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

视频 video

1
{% video 视频链接 %}
  1. 对其方向:left, center, right
  2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。
  1. 100% 宽度

  2. 50% 宽度

  3. 25% 宽度

  1. 100% 宽度
    1
    {% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  2. 50% 宽度
    1
    2
    3
    4
    5
    6
    {% 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% 宽度
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {% 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 %}

相册 gallary

Butterfly自带gallery相册,而且会根据图片大小自动调整排版,效果比Volantis的gallery更好,故不再收录Volantis的gallery标签。

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

  1. gallerygroup 相册图库
    1
    2
    3
    4
    5
    <div class="gallery-group-main">
    {% galleryGroup name description link img-url %}
    {% galleryGroup name description link img-url %}
    {% galleryGroup name description link img-url %}
    </div>
  2. gallery 相册
    1
    2
    3
    {% gallery %}
    markdown 圖片格式
    {% endgallery %}
  • gallerygroup 相册图库
    参数名 |释义
    -|-
    name |图库名字
    description |图库描述
    link |链接到对应相册的地址
    img-url |图库封面

    思维拓展一下,相册图库的实质其实就是个快捷方式,可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册,完全可以作为一个链接卡片,链接到视频、QQ、友链都是不错的选择。

  • gallery 相册
    区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
  1. gallerygroup 相册图库
  1. gallery 相册

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

  1. gallerygroup 相册图库

    1
    2
    3
    4
    <div class="gallery-group-main">
    {% galleryGroup '壁纸' '收藏的一些壁纸' '/images/wallpaper' https://s3.bmp.ovh/imgs/2022/10/21/e2f70d668441dd87.jpg %}
    {% galleryGroup '日常' '关于日常的图片' '/images/daily' !https://s3.bmp.ovh/imgs/2022/10/21/604fc804c3dc29ed.jpg %}
    </div>
  2. gallery 相册

    1
    2
    3
    4
    5
    6
    7
    8
    {% gallery %}
    ![](https://s3.bmp.ovh/imgs/2022/10/21/1ec5a40201abe7bd.jpg)
    ![](https://s3.bmp.ovh/imgs/2022/10/21/e2f70d668441dd87.jpg)
    ![](https://s3.bmp.ovh/imgs/2022/10/21/966d85c470185cc9.jpg)
    ![](https://s3.bmp.ovh/imgs/2022/10/21/b5abfc93b10a6701.jpg)
    ![](https://s3.bmp.ovh/imgs/2022/10/21/604fc804c3dc29ed.jpg)
    ![](https://s3.bmp.ovh/imgs/2022/10/21/fff599cb49a7b0b9.jpg)
    {% endgallery %}

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

折叠框 folding

1
2
3
4
5
{% folding 参数(可选), 标题 %}

![](https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg)

{% endfolding %}

html语法格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<details>
<summary>
<p>查看图片测试</p>
</summary>
<div class="content">
<p>
<img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src="https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg"
alt="" />
</p>
</div>
</details>

<details cyan open>
<summary>
<p>查看默认打开的折叠框</p>
</summary>
<div class="content">
<p>这是一个默认打开的折叠框。</p>
</div>
</details>

<details green>
<summary>
<p>查看代码测试</p>
</summary>
<div class="content"></div>
</details>

<details yellow>
<summary>
<p>查看列表测试</p>
</summary>
<div class="content">
<ul>
<li>haha</li>
<li>hehe</li>
</ul>
</div>
</details>

<details red>
<summary>
<p>查看嵌套测试</p>
</summary>
<div class="content">
<details blue>
<summary>
<p>查看嵌套测试2</p>
</summary>
<div class="content">
<details>
<summary>
<p>查看嵌套测试3</p>
</summary>
<div class="content">
<p>
hahaha
<span
><img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src='https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg'
style='height:24px'></span
>
</p>
</div>
</details>
</div>
</details>
</div>
</details>

参数位置可以填写颜色和状态,多个参数用空格隔开。

  • 颜色
    blue, cyan, green, yellow, red
  • 状态
    状态填写 open 代表默认打开。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    {% folding 查看图片测试 %}

    ![](https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg)

    {% 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://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg' style='height:24px'></span>

    {% endfolding %}

    {% endfolding %}

    {% endfolding %}
    查看图片测试

查看默认打开的折叠框

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

查看代码测试
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

分栏 tab

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

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

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

数据集合 issue

诗词标签 poem

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}
  1. title:诗词标题
  2. author:作者,可以不写
水调歌头
苏轼

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

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

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

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

阿里图标 icon

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

特效标签 wow

进度条 progress

进度条标签参考沂佰孜猫-给HEXO文章添加彩色进度条
源样式提取自Cuteen主题。

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

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

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

注释 notaction

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

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

把鼠标移动到我上面试试

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

气泡注释 bubble

1
{% bubble [content] , [notation] ,[background-color] %}

content: 注释词汇
notation: 悬停显示的注解内容
background-color: 可选,气泡背景色。默认为“#71a4e3”

最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如CSS的兄弟相邻选择器 例如 h1 + p {margin-top:50px;}</span>,flex布局Flex 是 Flexible Box 的缩写,意为弹性布局”,用来为盒状模型提供最大的灵活性”</span>,transform变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span>,animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋</span>写法,还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。</span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

1
最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %},{% bubble flex布局,"Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性","#ec5830" %},{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %},animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋","#de4489" %}写法,还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

引用文献 reference

1
2
{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}

考虑到锚点跳转的特性,不建议您将引用出处标签referfrom写在常隐外挂标签(如folding、tab、hideToggle)中,这样能有效避免跳转失败。

  1. referto 引用上标
    id: 上标序号内容,需与referfrom标签的id对应才能实现跳转
    literature: 引用的参考文献名称

  2. referfrom 引用出处
    id: 序号内容,需与referto标签的id对应才能实现跳转
    literature: 引用的参考文献名称
    url: 引用的参考文献链接,可省略

Akilarの糖果屋(akilar.top)是一个私人性质的博客</span>[1]Akilarの糖果屋群聊简介参考资料</span></span>,从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架</span>[2]Hexo中文文档参考资料</span></span>,Butterfly主题</span>[3]Butterfly 安装文档(一) 快速开始参考资料</span></span>

本项目参考了Volantis</span>[4]hexo-theme-volantis 标签插件参考资料</span></span>的标签样式。引入[tag].js,并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档</span>[5]Volantis文档:内置标签插件参考资料</span></span>
Butterfly主题的各个衍生魔改</span>[6]Butterfly 安装文档:标签外挂(Tag Plugins参考资料</span></span></span>[7]小弋の生活馆全样式预览参考资料</span></span></span>[8]l-lin-font-awesome-animation参考资料</span></span></span>[9]小康的butterfly主题使用文档参考资料</span></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %},从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %},Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %}

本项目参考了Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入`[tag].js`,并针对`butterfly`主题修改了相应的`[tag].styl`。在此鸣谢`Volantis`主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %}
Butterfly主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂(Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %}



{% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %}
{% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %}
{% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %}
{% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %}
{% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %}
{% referfrom '[6]','Butterfly 安装文档:标签外挂(Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %}
{% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %}
{% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %}
{% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}

收缩框 hideToggle

1
2
3
4
{% hideToggle 我是谁 %}
爷是:
aike
{% endhideToggle %}
我是谁

爷是:
aike

隐藏块 hideBlock

1
2
3
4
{% hideBlock 我是谁 %}
爷是:
aike
{% endhideBlock %}

爷是:
aike

音乐 Aplayer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
"narrow": false,// (可选)播放器袖珍风格
"autoplay": true,// (可选) 自动播放,移动端浏览器暂时不支持此功能
"mode": "random",// (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation'
"showlrc": 3,// (可选)歌词显示配置项,可选项有:1,2,3
"mutex": true,// (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
"theme": "#e6d0b2",// (可选)播放器风格色彩设置,默认:#b7daff
"preload": "metadata",// (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
"listmaxheight": "513px",// (可选) 该播放列表的最大长度
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}

简单示例

1
{% meting "60198" "netease" "playlist" %}

进阶示例

1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

绘图 mermaid

1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}
1
2
3
{% mermaid %}
内容
{% endmermaid %}

使用 mermaid 标签可以绘制 Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和 Pie Chart(圆形图),具体可以查看 mermaid 文档