Chester.Cao Blog

Devlopper in C#

0%

Hexo 标签插件的使用

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

起因

将MarkDown扩展 适应更多编辑的需要

配置环境

  • Node
  • Git

Hexo 标签插件使用

引用块

在文章中插入引言，可包含作者、来源和标题，均可选。

标签方式：使用 blockquote 或者 简写 quote。

1
2
3
{% blockquote [author] [source_link] [source_link_title] %}
content
{% endblockquote %}

例子:

1
2
3
{% blockquote wilenwu https://wilenwu.github.io/posts/hexo/Hexo-tag-plugins.html Hexo标签插件的使用 %}
参考
{% endblockquote %}

效果如下：

参考

代码块

在文章中插入代码，包含指定语言、附加说明和网址，均可选。
标签方式：使用 codeblock 或者 简写 code。

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

例子:

1
2
3
4
5
{% codeblock Svn更新 lang:Shell http://blog.rcant.com 参考链接 %}
#!/bin/sh
cd $SvnDir
svn up .
{% endcodeblock %}

效果如下：

Svn更新参考链接
1
2
3
#!/bin/sh
cd $SvnDir
svn up .

iframe

在文章中插入 iframe。

1
{% iframe [url] [width] [height] %}

例子：

1
{% iframe http://blog.rcant.com 800 300 %}

效果：

Image

在文章中插入指定大小的图片。

1
{% img [class names] /path/to/image [width] [height] "title text 'alt text'" %}

例子：

请保证图片文件存在

1
{% img default /static/images/tree.jpg 300 100 "测试文字 '提示文字'" %}

效果：

提示文字

在文章中插入链接。

1
{% link [text] [url] [title] %}

例子:

1
{% link 百度链接 http://www.baidu.com 百度 %}

效果:

百度链接

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

1
{% include_code [title] [lang:language] path/to/file %}

NexT 标签插件使用

文本居中引用

此标签将生成一个带上下分割线的引用，同时引用内文本将自动居中。 文本居中时，多行文本若长度不等，视觉上会显得不对称，因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用

使用方式

HTML方式：直接在 Markdown 文件中编写 HTML 来调用，给 img 添加属性 class=”blockquote-center” 即可。
标签方式：使用 centerquote 或者 简写 cq。

1
2
3
4
# HTML方式
<blockquote class="blockquote-center">blah blah blah</blockquote>
# 标签方式
{% centerquote %}blah blah blah{% endcenterquote %}

突破容器宽度限制的图片

当使用此标签引用图片时，图片将自动扩大 26%，并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式（详细参看底下示例）：

使用方式

HTML方式：直接在 Markdown 文件中编写 HTML 来调用，为 img 添加属性 class=”full-image”即可。
标签方式：使用 fullimage 或者 简写 fi， 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。

1
2
3
4
5
# HTML方式:
<img src="/image-url" class="full-image" />

# 标签 方式
{% fullimage /image-url, alt, title %}

Note 标签

1
2
3
{% note [class] [no-icon] %} 
content (support inline tags too.io).
{% endnote %}

[class]: default | primary | success | info | warning | danger
[no-icon] : 禁用图标

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note default %} 
default
{% endnote %}

{% note default no-icon %} 
default
{% endnote %}

{% note primary %} 
primary
{% endnote %}

{% note success %} 
success
{% endnote %}

{% note info %} 
info
{% endnote %}

{% note warning %} 
warning
{% endnote %}

{% note danger %} 
danger
{% endnote %}

效果如下：

default

default no-icon

primary

success

info

warning

danger

Tabs 选项卡

使用方式

1
2
3
4
5
{% tabs [Uniquename] [index] %}
<!-- tab [caption] [@icon] -->
**This is Tab 1.**
<!-- endtab -->
{% endtabs %}

Unique name：选项卡唯一名字
[index]：活动卡索引号
[caption]：标签标题
[@icon]：FontAwesome图标名称

例子:

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

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

<!-- tab Solution 3 @paw -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

效果如下：

This is Tab 1.

This is Tab 2.

This is Tab 3.

Label 标签

使用方法

1
{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.

例子：

1
Will you choose {% label default@default %}, {% label primary@primary %}, {% label success@success %}, {% label info@info %}, {% label warning@warning %} or {% label danger@danger %} ?

效果：

Will you choose default, primary, success, info, warning or danger ?

Video 标签

1
{% video https://example.com/sample.mp4 %}

Button 标签

使用 button 或者 简写 btn

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

url：绝对或相对路径
text, icon：按钮文字或FontAwesome图标
[class]：FontAwesome类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
[title]：鼠标悬停时的工具提示

例子：

1
{% button http://www.baidu.com, Baidu, home fa-fw, 百度 %}

效果：

Baidu

参考

Hexo标签插件的使用

Hexo博客系列

欢迎关注我的其它发布渠道