Hexo-NexT v7.1.1 Tag插件的使用

具体效果可查看：https://www.zhyong.cn/posts/437b/

Tag插件简介

几天前将NexT主题由v5.1.4升级到2019年5月1日更新的v7.1.1，个人觉得新版的NexT主题优化和设置的更好，很多实用的功能如代码复制、SEO优化、大量内置标签，以前在v5.1.4中需要手动修改代码才能实现的功能，新版本已经帮我们已经实现好了，只需要修改配置文件themes\next\_config.yml即可。新版本中，发现了一个很大的特色——标签的使用，在此学习下如何使用标签。

Next主题：https://github.com/theme-next/hexo-theme-next
官方博客：https://theme-next.org/

关于Tag插件：

Tag Plugin是一种使Hexo支持特殊样式内容的方法。例如，我们无法在标准Markdown中显示具有自定义尺寸的图像。然后我们可以使用标签插件来解决它。 Hexo有很多可以帮助用户的标签。 Hexo还具有主题接口，使主题能够创建自己的标签。

Tag插件包含的有：Centered Quote、Include Raw、Button、Full Image、Group Pictures、Label、Mermaid、Note、PDF、Tabs、Video .

以下分别演示使用即显示。

Centered Quote

此标记将在其前后两行生成引号，引用的文本将居中。当使用居中引用时，如果我们有多行文本，并且每行具有不同的长度，则引用将不是对称的，因此建议在仅具有单行文本时使用。例如在文章之前的所有文章后做一个总结。

代码：

{% cq %}Elegant in code, simple in core{% endcq %}

显示：
{% cq %}Elegant in code, simple in core{% endcq %}

Include Raw

此标记包含您博客中的所有原始内容，路径相对于您的站点源目录。如显示我站点下的404.html文件。

代码：

{% include_raw '/404.html' %}

显示：
{% include_raw '/404.html' %}

Button

{% button url, text, icon [class], [title] %}

{% btn url, text, icon [class], [title] %}

url     : 绝对或相对URL
text    : 按钮文字，如果未指定图标则为必须
icon    : FontAwesome图标名称（开头没有'fa-'）。如果未指定文本，则为必需
[class] : FontAwesome类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X ，可选参数。
[title] : 鼠标悬停时的工具提示，可选参数。

使用：
最好添加

标签，测试时没加div，下面显示不完全，加上非常美观。

{% btn https://www.zhyong.cn ,首页,home fa-2x,这是YouForever的首页%}

显示：

{% btn https://www.zhyong.cn,首页,home fa-fw,这是YouForever的首页%}

Full Image

从v6.4.0开始，此标签支持两个可选参数：

• Lazy load → lazy
• Image size → size

{% fullimage /url [@lazy], [alt], [title], [size] %}

{% fi /url [@lazy], [alt], [title], [size] %}

/url    : 图片的相对路径
[@lazy] : 图片懒加载，仅在需要时加载图片，需要依赖：https://github.com/theme-next/theme-next-jquery-lazyload 
[alt]   : 备用文本（适用于搜索引擎）
[title] : 鼠标悬停时的工具提示。
[size]  : 任意比例（％，px，em）的图像大小。

除 /url 之外的所有参数都是可选的

使用：

{% fi https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/Icon/youforever_sub.jpg@lazy ,,YouForever公众号 %}

显示：
{% fi https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/Icon/youforever_sub.jpg@lazy ,,YouForever公众号 %}
对比使用

![YouForever公众号](https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/Icon/youforever_sub.jpg)]

YouForever公众号

确实使用fi图片标签更加清晰、美观，无外边框，以后多使用此标签。

Group Pictures

{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}

[group]  : 要在组中添加的图片总数。
[layout] : 要显示的组下的默认图片。

使用：

{% gp 3-2%}
![](https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/201906/github.png)
![](https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/201906/github.png)
![](https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/201906/github.png)
{% endgp %}

显示：
{% gp 3-2%}

image

image

image

{% endgp %}

Label

{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' 可以指定是否有空格
          例如。 'success @text'类似于'success @ text'。
          如果未指定，则将选择默认类。

使用：

{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %} 
{% label success@这是成功的信息%}

显示：
{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %}
{% label success@这是成功的信息%}

Mermaid

设置

# Mermaid tag
mermaid:
- enable: false
+ enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

使用：

{% mermaid type %}
{% endmermaid %}

type : 美人鱼图表的类型，请访问 https://github.com/knsv/mermaid 以获取更多信息

使用教程：https://mermaidjs.github.io/

{% mermaid sequenceDiagram %}
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{% endmermaid %}

显示：
{% mermaid sequenceDiagram %}
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{% endmermaid %}

Note

{% note [class] [no-icon] %}
任何内容（支持内联标签）
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : 禁用备注中的图标

所有参数都是可选的。

使用：

{% note %}
无任何样式
{% endnote %}

{% note success %}
成功的笔记
{% endnote %}

显示：
{% note %}
无任何样式
{% endnote %}

{% note success %}
成功的笔记
{% endnote %}

PDF

启用PDF标签插件：https://github.com/theme-next/theme-next-pdf

使用：

{% pdf url [height] %}

[url]    : 相对路径
[height] : 可选参数，pdf展示的高度, e.g. 800px.

示例：

{% pdf https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/books%2Fbyte-of-python-chinese-edition.pdf %}

显示：

{% pdf https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/books%2Fbyte-of-python-chinese-edition.pdf %}

Tabs

设置

tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

{% tabs Unique name, [index] %}

任何内容（也支持内联标签）。

{% endtabs %}

Unique name   : 标签的唯一名称阻止标记，不带逗号。
                将在#id中用作每个选项卡的前缀及其索引号。
                如果名称中有空格，则生成#id时，所有空格都将用短划线替换。
                仅对于帖子/页面的当前网址必须是唯一的！
[index]       : 活动标签的索引号。
                如果未指定，将选择第一个选项卡（1）。
                如果index为-1，则不会选择任何选项卡。它会像扰流板一样。
                可选参数。
[Tab caption] : 当前标签的标题。
                如果未指定标题，则使用标签索引后缀的唯一名称将用作标签的标题。
                如果没有指定标题，但指定了图标，标题将为空。
                可选参数。
[@icon]       : FontAwesome图标名称（开头没有'fa-'）。
                可以指定是否有空格;例如'tab caption @icon'类似于'Tab caption @ icon'。
                可选参数。

使用：

{% tabs tabsone %}

这是第一个标签


这是第二个标签


这是第三个标签

{% endtabs %}

显示：

{% tabs tabsone %}

这是第一个标签


这是第二个标签


这是第三个标签

{% endtabs %}

Video

使用：

{% video url %}

显示：

{% video https://zhyong-cn-file.oss-cn-shanghai.aliyuncs.com/media%2F%E5%86%AF%E6%8F%90%E8%8E%AB%E3%80%8A%E7%BA%A2%E6%98%AD%E6%84%BF%E3%80%8B%5B%E8%BD%AF%E5%AD%97%E5%B9%95%5D.mp4%}

参考：
Tag Plugins | NexT
Icons | Font Awesome