Hexo中Tags配置
2019-11-22 本文已影响0人
sunfove
个人网站：sunfove.xyz
由于简书的编辑器不支持这里介绍的tags功能，建议移步个人网站中的Hexo中Tags配置，有更直观的阅读体验。
Hexo编写文本时采用的是markdown格式，就会导致有些功能实现起来不太方便，如调整文字颜色、内容切换、图片组合等，这时就可以通过tags标签插件来实现，同时也可以根据个人需求，编辑自己想要的插件。这里以Next主题为例，介绍一下Next主题中通过配置标签插件来实现文本编辑的多样性。
1. Center-quote
1.1 Center-quote 简介
center-quote插件可以实现引用效果，在目标文本前后插入引号，建议用在单个文本中。
1.2 Center-quote 用法
center-quote.js
{% centerquote %}Quote1{% endcenterquote %}
{% cq %}Quote2{% endcq %}
1.3 Center-quote 案例
{% cq %}Elegant in code, simple in core{% endcq %}
2. Note
2.1 Note简介
Note标签通过在左边界使用特殊颜色划线，实现提醒功能。
2.2 Note配置
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
2.3 Note用法
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.
2.4 Note案例
None：
{% note %}
<b>Header</b>
(without define class style)
{% endnote %}
Default ：
{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}
Primary
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Info ：
{% note info %}
### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Success ：
{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Warning ：
{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
Danger：
{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
No-icon ：
{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
note info, note info, note info
{% endnote %}
3.Tabs
3.1 Tabs简介
Tabs标签用于多个内容之间的切换，默认情况下只显示其中一个结果或不展开显示，使文章更有条理。
next/_config.yml
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 0
3.2 Tabs用法
{% 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.
3.3 Tabs案例
一般形式：
{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
不展开：
{% tabs Third unique name, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
符号：
<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
4. PDF
4.1 PDF简介
PDF标签用于插入一个页面用于显示pdf文件。
4.2 PDF配置
next/_config.yml
pdf:
enable: true
# Default height
height: 500px
4.3 用法
pdf.js
{% pdf url [height] %}
[url] : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.
4.4 PDF案例
在线PDF：
{% pdf https://example.com/sample.pdf %}
本地PDF：
{% pdf /path/to/your/file.pdf 600px %}
5.Mermaid
5.1 Mermaid简介
Mermaid标签用于创建树状分支图。
5.2 Mermaid配置
next/_config.yml
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest
5.3 Mermaid用法
mermaid.js
{% mermaid type %}
{% endmermaid %}
type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.
5.4 Mermaid案例
{% 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 %}
6. Label
6.1 Label简介
Label标签可以为一段话添加颜色、划线等特殊标记。
6.2 Label用法
{% 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.
6.3 Label案例
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.
7. Video
7.1 Video简介
Video标签用于添加视频。
7.2 Video用法
video.js
{% video url %}
7.3 Video案例
在线视频：
{% video https://example.com/sample.mp4 %}
本地视频：
{% video /path/to/your/video.mp4 %}
8. Button
8.1 Button简介
Button标签可以添加带有链接的标签。
8.2 Button用法
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.
8.3 Button案例
基本：
{% button #, Text %}
标题：
{% btn #, Text %}
{% btn #, Text & Title,, Title %}
图标：
<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div>
文字：
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>
段落：
Lorem {% btn #, Lorem, home fa-fw fa-lg %} ipsum dolor sit amet
嵌套：
{% note info %}
{% btn #, Text & Icon, home fa-fw %}
{% btn #,, home, Title %}{% btn #, Text %}
[Link](#)
{% endnote %}
间距：
<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>
相对链接：
<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>
绝对链接：
<div class="text-center">{% btn https://github.com/theme-next/hexo-theme-next, NexT, github fa-fw fa-lg, NexT source code %}</div>
9. Group-pictures
9.1 Group-pictures简介
Group-pictures标签用于显示多个图片。
9.2 Group-pictures用法
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.
9.3 Group-pictures案例
{% grouppicture 7-5%}
{% endgrouppicture %}
参考：Tag Plugins
