通过hexo + NexT + github pages + 搭建个人博客(二) -- plugin-tags

发表于 更新于 分类于 ， 阅读次数：

前一篇通过hexo + NexT + github pages + 搭建个人博客(一)

Hexo官方文档介绍了很多默认支持的Plugin Tags.

NexT官方文档又增加了很多Next Theme额外支持的.

我把这两篇文章的所有Tags列在下列表里, 并增加一些例子留作记录以便之后使用:

Hexo Tags
(点击看实例)		 标签
Block Quote {% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
Pull Quote {% pullquote [class] %}
content
{% endpullquote %}
效果跟blockquote没有什么区别.
Code Block {% codeblock [title] [lang:language] [url] [link text] %}
or ``` [language] [title] [url] [link text] code snippet ```
jsFiddle {% jsfiddle shorttag [tabs] [skin] [width] [height] %}
Gist {% gist gist_id [filename] %}
iframe {% iframe url [width] [height] %}
image {% img [class names] /path/to/image [width] [height] "title text 'alt text'" %}
link {% link text url [external] [title] %}
Include Code {% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
YouTube {% youtube video_id %}
Vimeo {% vimeo video_id [width] [height] %}
Include Posts {% post_path filename %}
{% post_link filename [optional text] [escape] %}
Include Assets {% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] [escape] %}
Raw {% raw %} content {% endraw %}
Post摘录 <!-- more -->
NexT Tags
(点击看实例)		 标签
Centered Quote {% centerquote %}Something{% endcenterquote %}
{% cq %}Something{% endcq %}
Include Raw {% include_raw '_data/path/to/file.html' %}
Note {% 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.
Tabs {% tabs Unique name, [index] %}
< !-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
< !-- endtab -->
{% endtabs %}
Mermaid {% mermaid type %}
{% endmermaid %}

type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.
Video {% video url %}
图组 {% 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.

jsFiddle

这是一款HTML,CSS,JAVASCRIPT在线调试工具, 官网地址https://jsfiddle.net/ 先注册, 然后写好代码存储之后可以在地址栏里"https://jsfiddle.net/"后面的部分就是shorttag. 例如下面这个.

1
{% jsfiddle retzzz/w05mcnde %}

可以渲染成:

1
{% jsfiddle retzzz/w05mcnde result,html,js,css dark 600 300 %}

可以渲染成:

Gist

Gist是github提供的一个额外的功能, 可以快速的记录代码片段, 文档. 网址https://gist.github.com, 每条gist实际就是一个git repository. 可以包含多个文件. 对应一个gist ID, 可以在地址栏中找到. 下面这行:

1
{% gist 8da7592dc849d364330acebe8cf88ca3 helloworld.py %}

可以渲染成:

iframe

iframe可以用来插入别的单独页面, 可以是本地的, 也可以上网络上的, 比如下面一行 

1
{% iframe http://player.youku.com/embed/XOTI3NDc1OTU2 500 300 %}
插入了优酷页面, 将被渲染成

而这个 

1
{% iframe /tags/index.html 500 300 %}
使用了本地页面(注意地址以"/"开头), 将被渲染成

image

拷贝zsnt.jpg到你博客源代码目录source/images下, 则下面这行 

1
{% img class1 /images/zsnt.jpg 400 300 "南通机场 '图片无法显示' " %}
将被渲染成:

图片无法显示 
1
{% link text url [external] [title] %}

这里external可以被设置成"true"或者"false", true意味着在新标签打开链接, "false"意思是用本页打开链接. 而title是鼠标悬停时显示的提示.

下面两个例子: 

1
{% link "Go to bing in this tab" https://www.bing.com false "Go to bing1" %}
Go to bing in this tab

1
{% link "Go to bing in new tab" https://www.bing.com true "Go to bing2" %}
Go to bing in new tab

我理解是一般情况下我们可以用markdown语法里提供的链接方式就可以了, 但是如果想要在当前tab打开链接或者想要有鼠标悬停提示, 可以使用这个tag.

Include Code

这个tag可以帮助把一个本地源代码中的一部分显示到页面里. 这些代码默认在source/downloads/code下存放, 也可以通过修改config文件里的code_dir来修改默认指定的位置. 比如下面这行 

1
{% include_code lang:python from:5 to:10 abc.py %}
将被渲染为:
这是一个python脚本view raw
1
2
3
4
5
import types

from _weakrefset import WeakSet

# Instance of old-style class

这个办法比起Gist来说更加不方便, 所以建议直接用Gist.

Include Posts

这个可以帮助在不同的文章间跳转和引用.

比如下面这两行 

1
{% post_path buildblog %}
被渲染为字符串: /9cbcca7a/

1
{% post_link buildblog %}

被渲染为超链接: 通过hexo + NexT + github pages + 搭建个人博客(一)

点击这里可以跳转到官网帮助

这里有一件事情, 是不管是这个post_link还是前面提到的link, 或者是markdown的语法[]()都做不好, 就是通过html tag id跳转到某个post的指定位置.

唯一比较可行的办法是通过一个plugin hexo-abbrlink简化一下permalink, 然后直接用[]()直接用hard code的permalink跳转, 比如 

1
[buildblog#image](/9cbcca7a/#image)
被渲染成可以直接跳转的: buildblog#image

Include Assets (#include-assets)

这篇文章介绍了global asset folder和post asset folder, 当配置文件里设置了post asset folder, 并且copy一个有jpg文件进去(这里我的文件叫runway.jpg).

1
{% asset_path runway.jpg %}

被渲染成字符串 /338d5118/runway.jpg 

1
{% asset_img runway.jpg "asset img" %}
被渲染成图片: 
1
{% asset_link runway.jpg "asset link" %}
被渲染成超链接: asset link

Mermaid画图

Mermaid是用文本生成图表的一个工具, 配置里面需要手动激活

_config.next.yml
1
2
mermaid:
  enable: true

比如下面这段 

1
2
3
4
5
6
{% mermaid graph TD %}
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}
会被渲染成:

graph TD
A-->B;
A-->C;
B-->D;
C-->D;

现在支持流程图, 时序图, 类图, 状态图, 甘特图. 更多帮助可以参考官网

这里有个坑, 如果有其他html标签的id是"mermaid", 会导致渲染无法成功. 避免使用mermaid做heading, 和任何锚点.