hexo-theme-blank 文档-标签插件

目录

  1. 1. Note
    1. 1.1. 效果:
    2. 1.2. 已知问题
  2. 2. 便签
    1. 2.1. 效果:
  3. 3. 小tag标签
    1. 3.1. 效果:
  4. 4. Checkbox & Radio
    1. 4.1. 效果:
  5. 5. 富文本按钮
    1. 5.1. 效果:
  6. 6. Folding
    1. 6.1. 效果:

hexo-theme-blank 文档三 ,这篇文章,介绍 blank 主题的Tag 标签插件。

Checkbox & Radio,富文本按钮,Folding修改移植于 Volantis 主题

Note

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

{% note primary %}
primary
{% endnote %}

{% note default %}
default
{% endnote %}

{% note danger %}
danger
{% endnote %}

{% note warning %}
warning
{% endnote %}

{% note info %}
info
{% endnote %}

{% note light %}
light
{% endnote %}

效果:

success

primary

default

danger

warning

info

light

已知问题

有时文章内容过多,hexo 就会出现 note 标签渲染不成功问题
解决方法:直接使用 div标签

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
<div class="note note-success">
success
</div>

<div class="note note-primary">
primary
</div>

<div class="note note-default">
default
</div>

<div class="note note-danger">
danger
</div>

<div class="note note-warning">
warning
</div>

<div class="note note-info">
info
</div>

<div class="note note-light">
light
</div>

便签

写法为:

1
2
3
4
5
6
7
<p class="note note-success">标签note-success</p>
<p class="note note-primary">标签note-primary</p>
<p class="note note-default">标签note-default</p>
<p class="note note-danger">标签note-danger</p>
<p class="note note-warning">标签note-warning</p>
<p class="note note-info">标签note-info</p>
<p class="note note-light">标签note-light</p>

效果:

标签note-success

标签note-primary

标签note-default

标签note-danger

标签note-warning

标签note-info

标签note-light

小tag标签

小 tag 标签是从 小康博客 哪里扒来的

写法:

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

<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 [颜色|方向加粗]'>你的文字</p>

(不写颜色默认为灰色)。当然了你也可以设置某个边框加粗。例如

<p class='div-border green left right'>绿色</p>

绿色

Checkbox & Radio

写法为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Checkbox & Radio

{% 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 checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

效果:

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

富文本按钮

写法为:

1
2
3
4
5
6
7
8
9
10
富文本按钮

{% btns circle grid5 %}
{% cell DmxZ, https://dmx.pub, https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/avatar.png %}
{% endbtns %}

{% btns rounded grid5 %}
{% cell 下载源码, https://github.com/a2396837/hexo-theme-blank/, fas fa-download %}
{% cell 查看文档, https://github.com/a2396837/hexo-theme-blank/#hexo-theme-blank, fas fa-book-open %}
{% endbtns %}

效果:

Folding

写法为:

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

{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/avatar.png)

{% 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/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

效果:

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

hexo theme blank
聊聊最近之 5~6月
hexo-theme-blank 文档-进阶设置
© 2020 DmxZ
Powered by hexo | Theme is blank