0%

Hexo中Tags配置

Hexo编写文本时采用的是markdown格式,就会导致有些功能实现起来不太方便,如调整文字颜色、内容切换、图片组合等,这时就可以通过tags标签插件来实现,此外也可以根据个人需求,编辑自己想要的插件。这里以Next主题为例,介绍一下Next主题中通过配置标签插件来实现文本编辑的多样性。

Center-quote

center-quote插件可以实现引用效果,在目标文本前后插入引号,建议用在单个文本中。

1
2
3
center-quote.js
{% centerquote %}Quote1{% endcenterquote %}
{% cq %}Quote2{% endcq %}
1
{% cq %}Elegant in code, simple in core{% endcq %}
显示

Elegant in code, simple in core

Note

Note标签通过在左边界使用特殊颜色划线,实现提醒功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
next/_config.yml
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: true #false时PC端不显示图标,但移动端仍会显示,故需要在标签语句中手动no-icon进行标注
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
1
2
3
4
5
6
7
note.js
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}
[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.
All parameters are optional.
1
2
3
4
{% note %}
<b>Header</b>
(without define class style)
{% endnote %}
显示

Header
(without define class style)

1
2
3
4
{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
{% note info %}
### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
显示

Header
Welcome to Hexo!

1
2
3
4
5
{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
note info, note info, note info
{% endnote %}
显示

Header
Note without icon: note info no-icon
note info, note info, note info

Tabs

tabs标签用于多个内容之间的切换,默认情况下只显示其中一个结果或不展开显示,使文章更有条理。

1
2
3
4
5
6
7
next/_config.yml
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (without 'fa-' at the begining).
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.
1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
显示

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
{% tabs Third unique name, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
显示

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
显示

This is Tab 1.

This is Tab 2.

This is Tab 3.

PDF

PDF标签用于插入一个页面用于显示pdf文件。

1
2
3
4
5
next/_config.yml
pdf:
enable: true
# Default height
height: 500px
1
2
3
4
pdf.js
{% pdf url [height] %}
[url] : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.
1
{% pdf https://example.com/sample.pdf %}
显示
1
{% pdf /path/to/your/file.pdf 600px %}
显示

Mermaid

Mermaid标签用于创建树状分支图。

1
2
3
4
5
6
next/_config.yml
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest
1
2
3
4
mermaid.js
{% mermaid type %}
{% endmermaid %}
type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.
1
2
3
4
5
6
7
{% mermaid graph TD %}
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{% endmermaid %}
显示

Label

Label标签可以为一段话添加颜色、划线等特殊标记。

1
2
3
4
5
{% label [class]@Text %}
[class] : default | primary | success | info | warning | danger.
'@Text' can be specified with or without space
E.g. 'success @text' similar to 'success@text'.
If not specified, default class will be selected.
1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
显示
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim *ad* minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Video

Video标签用于添加视频。

1
2
video.js
{% video url %}
1
{% video https://example.com/sample.mp4 %}
显示
1
{% video /path/to/your/video.mp4 %}
显示

Button

Button标签可以添加带有链接的标签。

1
2
3
4
5
6
7
8
9
10
11
12
button.js
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url : Absolute or relative path to URL.
text : Button text. Required if no icon specified.
icon : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
Optional parameter.
[title] : Tooltip at mouseover.
Optional parameter.
1
{% button #, Text %}
显示
Text
1
2
{% btn #, Text %}
{% btn #, Text & Title,, Title %}
显示
Text Text & Title
1
<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div>
显示
1
2
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>
显示

Text & Icon (buggy) Text & Icon (fixed width)

1
Lorem {% btn #, Lorem, home fa-fw fa-lg %} ipsum dolor sit amet
显示
Lorem Lorem ipsum dolor sit amet
1
2
3
4
5
6
{% note info %}
{% btn #, Text & Icon, home fa-fw %}

{% btn #,, home, Title %}{% btn #, Text %}
[Link](#)
{% endnote %}
显示
1
2
3
<div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div>
<div>{% btn #,, italic %}{% btn #,, scribd %}</div>
<div>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</div></div>
显示
1
<div class="text-center">{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</div>
显示
1
<div class="text-center">{% btn https://github.com/theme-next/hexo-theme-next, NexT, github fa-fw fa-lg, NexT source code %}</div>
显示
NexT

Group-pictures

Group-pictures标签用于显示多个图片。

1
2
3
4
5
group-pictures.js
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}
[group] : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.
1
2
3
4
5
6
7
8
9
{% grouppicture 7-5%}
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160720_192243_AO_HDR.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160817_185254_AO_HDR.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160818_190040_AO_HDR.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20180123_131106.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20170712_154515.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20161127_161939_HDR.jpg)
![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20190523_191951.jpg)
{% endgrouppicture %}
显示

参考:Tag Plugins

觉着不错就支持一下吧!