常用指令

Hexo init初始化博客
Hexo n 标题 创建一篇文章
Hexo clean 清理文件
Hexo g 生成静态文件
Hexo d 部署博客
hexo server启动本地服务
hexo render渲染文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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. 网站资讯emoji表情
  4. 阿里图标库
  5. 添加标签外挂文件
  6. 哔哔动态
  7. CSS整合
  8. 使用ServiceWorker优化速度
  9. 禁用控制台组合拳
  10. 页面加载动画
  11. 页面链接二维码(扫一扫)卡片

行内文本样式 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 这里没有验证码 %}

复选列表 checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red ,yellow, green, cyan, blue, gray, 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, 叉 %}

标签外挂

引用 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

icons和light_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 ）
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

simple

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 提示块标籤

modern

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 提示块标籤

flat

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 提示块标籤

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 disabled %}
默认 提示块标籤
{% endnote %}

{% note default disabled %}
default 提示块标籤
{% endnote %}

{% note primary disabled %}
primary 提示块标籤
{% endnote %}

{% note success disabled %}
success 提示块标籤
{% endnote %}

{% note info disabled %}
info 提示块标籤
{% endnote %}

{% note warning disabled %}
warning 提示块标籤
{% endnote %}

{% note danger disabled %}
danger 提示块标籤
{% endnote %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

no-icon

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

simple

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

modern

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

flat

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

disabled

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

no-icon

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

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

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
{% tip %}默认情况{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

另一种风格的 note 和小 tag 标签

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

1
2
3
4
5
6
7
8
9
10
11
12
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

以上代码的效果可以看本段开头处的效果（不写颜色默认为灰色）。当然了你也可以设置某个边框加粗。例如 <p class='div-border green left right'>绿色</p>

绿色

label

1
{% label text color %}
参数解释
text文字
color【可选】背景颜色，默认为 defaultdefault/blue/pink/red/purple/orange/green
1
2
臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

几款漂亮的css美化框

迷幻紫
西瓜红
天空之境
撖榄绿
优雅紫
1
2
3
4
5
<div id="zm_mhz"> 迷幻紫</div>
<div id="zm_xgh"> 西瓜红</div>
<div id="zm_tkzj">天空之境</div>
<div id="zm_gll">撖榄绿</div>
<div id="zm_yyz">优雅紫</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/留空
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,fas fa-check,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

嵌入自适应 B 站视频

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>

参数说明：

key说明
aid之前 B 站使用的 AV 号
bvid目前的 BV 号
page第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频
as_wide是否宽屏 【1: 宽屏, 0: 小屏】
high_quality是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
danmaku是否开启弹幕 【1: 开启(默认), 0: 关闭】

哔哩哔哩卡片

若需要隐藏简介只需要添加 true 即可

1
{% bilibili 视频链接 [视频时长 隐藏简介] %}

如果你要隐藏简介，添加true即可

1
2
3
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 %}
如果你要隐藏简介，添加true即可（注意，要隐藏简介则必须设置适配时间！），如下:
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 true %}

插入网易云音乐

1
2
3
{% raw %}
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0"  width=330 height=86  src="//music.163.com/outchain/player?type=2&id=167655&auto=1&height=66"></iframe>
{% endraw %}

拉取推送

拉取

1
git clone https://github.com/........./.........git

推送

1
2
3
git add .
git commit -m "github action update"
git push origin main

音视频插入

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  1. 100%宽度
  1. 50%宽度
  2. 25%宽度
  1. 100%宽度
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  1. 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 %}
  1. 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 %}

子页面图片

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}








代码块

1
2
3
4
```diff
+ add
- del
```

tabs (标签块)

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

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

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

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
  1. 标题：title
  2. 颜色：default(留空) / blue / pink / red / purple / orange / green

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

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
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,blue %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,pink %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,red %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,purple %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,orange %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,green %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}
1
2
3
{% flink %}
xxxxxx
{% endflink %}

可在任何界面插入类似友情链接列表效果
内容格式与友情链接界面一样，支持 yml 格式

友情链接
那些人，那些事
JerryC
JerryC
今日事,今日毕
Hexo
Hexo
快速、简单且强大的网誌框架
网站
值得推荐的网站
Youtube
Youtube
视频网站
Weibo
Weibo
中国最大社交分享平臺
Twitter
Twitter
社交分享平臺
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
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平臺
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平臺
{% endflink %}

toggle (收缩框)

自带

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

爷是:
Weidows

折叠框 folding

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

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

查看默认打开的折叠框

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

查看代码测试
1
![](https://cdn.siax.cn/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha 

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://cdn.siax.cn/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.siax.cn/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

inline (一行内)

1
2
3
4
5
6
{% hideInline content,display,bg,color %}

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

我是谁:{% hideInline Weidows,查看答案,#FF7242,#fff %}

我是谁:Weidows

Block (块)

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

爷是:
Weidows

行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}
  1. 高度：height=20px

这是 一段话。

这又是 一段话。

1
2
3
这是 {% inlineimage https://cdn.siax.cn/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.siax.cn/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

github卡片 ghcard

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

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

更多参数可以参考：

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

参数名取值释义
hidestars,commits,prs,issues,contribs隐藏指定统计
count_privatetrue将私人项目贡献添加到总提交计数中
show_iconstrue显示图标
theme请查阅Available Themes主题
  1. 用户信息卡片
  1. 仓库信息卡片
  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 %} |
  1. 仓库信息卡片
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 %} |

作品推荐卡片card

注意填写内容时不要有英文符号，不然会出bug

1
2
3
4
5
6
7
8
{% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
// 你也可以什么都不填，将会全部使用默认值，如下：
{% card %}
// 你也可以省略部分内容，如下：
{% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
{% card 标题,链接,背景 %}
// 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下：
{% card 诡秘之主,,,,,fa-solid fa-book-open,小说 %}
参数描述默认值
标题作品的名字未知
链接作品的详情页，填写后会显示查看详情按钮无
背景背景 图片Url（必须是图片，想要实现颜色可自行更改代码）纯色#333
评分范围 0-5，可以是小数，如3.5和3.1表示三星半，图标只有半星的）0
评价点评内容此作品博主暂未作出评价
图标左上角图标，请填写fontawsome图标无
标签右上角标签无
宽度卡片宽度，需要填单位，如：100px 或 10rem220px
高度卡片高度，要求同上300px
第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”查看详情
小说
诡秘之主
此作品博主暂未作出评价
未知
此作品博主暂未作出评价查看详情
诡秘之主
此作品博主暂未作出评价
小说
诡秘之主
1
2
3
4
5
6
7
8
9
10
11
// 使用js是为了高亮代码，不必在意
// 参数如下：
{% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
// 示例如下：
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300,4.5,第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”,fa-solid fa-book-open,小说 %}
// 你也可以什么都不填，将会全部使用默认值，如下：
{% card %}
// 你也可以省略部分内容，如下：
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300 %}
// 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下：
{% card 诡秘之主,,,,,fa-solid fa-book-open,小说 %}
标题
介绍
Sianx
总之岁月漫长，然而值得等待。
点击直达链接
点击直达链接
点击直达链接
总之岁月漫长，然而值得等待。

注意填写内容时不要有英文符号，不然会出bug

1
2
3
4
5
6
7
{% link 链接,标题,图标,介绍 %}
// 你也可以什么都不填，将会全部使用默认值，如下：
 {% link %}
// 你也可以省略部分内容，如下：
{% link 链接 %}
// 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% link 链接,,,介绍 %}
参数描述默认值
链接如果连接中包含http则新标签打开，否则本标签页打开无
标题网站的标题点击直达链接
图标网站favicon链接
介绍网站的description无
1
2
3
4
5
6
7
8
9
10
11
<!-- 使用html是为了高亮代码，不必在意 -->
<!-- 参数如下： -->
{% link 链接,标题,图标,介绍 %}
<!-- 示例如下： -->
{% link https://siax.cn/,Sianx,https://cdn.siax.cn/npm/picture-sianx@1.0.0/Blog/logo.png,总之岁月漫长，然而值得等待。 %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
 {% link %}
<!-- 你也可以省略部分内容，如下： -->
{% link https://siax.cn %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% link https://siax.cn,,,总之岁月漫长，然而值得等待。 %}

关于raw

一些内容不想被主题渲染，可以使用该标签呈现原始状态。

1
2
3
{% raw %}
content
{% endraw %}

单页html不渲染

1
2
3
4
5
6
---
layout: false
---
{% raw %}
代码
{% endraw %}