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

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

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

代码:

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

显示:

Elegant in code, simple in core

Include Raw

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

代码:

1
{% include_raw '/404.html' %}

显示:
404-对不起!您访问的页面不存在

对不起,您请求的页面不存在、或已被删除、或暂时不可用

请点击以下链接继续浏览网页

返回上一页面

返回网站首页

Button

button.js
1
2
3
4
5
6
7
8
9
{% 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>标签,测试时没加div,下面显示不完全,加上非常美观。

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

显示:

Full Image

v6.4.0开始,此标签支持两个可选参数:

  • Lazy load → lazy
  • Image size → size
full-image.js
1
2
3
4
5
6
7
8
9
10
11
{% 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 之外的所有参数都是可选的

使用:

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

显示:

对比使用

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

YouForever公众号

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

Group Pictures

group-pictures.js
1
2
3
4
5
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}

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

使用:

1
2
3
4
5
{% 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 %}

显示:

Label

label.js
1
2
3
4
5
6
{% label [class]@Text %}

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

使用:

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

显示:
默认 主要 成功 信息 警告 危险
这是成功的信息

Mermaid

设置

themes/next/_config.yml
1
2
3
4
5
6
7
8
# 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

使用:

1
2
3
4
{% mermaid type %}
{% endmermaid %}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
{% 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 <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{% endmermaid %}

显示:

            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!

Note

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
任何内容(支持内联标签)
{% endnote %}

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

所有参数都是可选的。

使用:

1
2
3
4
5
6
7
{% note %}
无任何样式
{% endnote %}

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

显示:

无任何样式

成功的笔记

PDF

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

使用:

pdf.js
1
2
3
4
{% pdf url [height] %}

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

示例:

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

显示:

Tabs

设置

themes/next/_config.yml
1
2
3
4
5
6
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 0
tabs.js
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] -->
任何内容(也支持内联标签)。
<!-- endtab -->
{% endtabs %}

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

使用:

1
2
3
4
5
6
7
8
9
10
11
{% tabs tabsone %}
<!-- tab 第一标签@user-->
这是第一个标签
<!-- endtab -->
<!-- tab 第二标签@address-book -->
这是第二个标签
<!-- endtab -->
<!-- tab 第三标签 -->
这是第三个标签
<!-- endtab -->
{% endtabs %}

显示:

这是第一个标签

这是第二个标签

这是第三个标签

Video

使用:

1
{% video url %}

显示:


参考:
Tag Plugins | NexT
Icons | Font Awesome

微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!
0%