Block Quote—块引用

更好的添加块引用，相较于 md 的块引用方式，会在下方添加作者、出处以及链接等信息（如果添加了的话）

语法：

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

参数说明

  • author，作者信息
  • source，来源信息
  • link，链接信息
  • link，链接对应的标题。增加这个之后，就不会直接显示链接，而是显示一个可以点击的标题

效果展示：
不加参数的效果：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书籍信息：

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter 信息：

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

引用网页信息：

Every interaction is both precious and an opportunity to delight.

Code Block—代码块

这个标签插件同样是能够扩展 md 的代码块功能。
语法：

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

参数说明：

  • title：标题内容
  • lang：language，代码块上显示的语言类型
  • url，添加链接信息
  • link text，链接对应的标题
  • additional options，额外的说明信息

效果展示：
默认情况：

1
alert('Hello World!');

添加代码块对应的语言类型：

1
[rectangle setX: 10 y: 10 width: 20 height: 20];

添加额外的说明内容：

Array. map
1
array.map(callback[, thisArg])

添加链接和链接对应的文字内容

_. compactUnderscore. js
1
2
_. compact ([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Backtick Code Block—反引号代码块

反引号代码块，这个就是markdown原生支持的代码块方式，使用三个反引号来包裹住代码部分。
这部分功能没有上面那么强大，可以添加额外的说明内容和问题等，但能够满足基本的代码块引用功能。

1
print("Hello World")

Pull Quote—添加引用

语法：

1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

参数说明：

  • class，可以为left或者right，表示引言部分在哪一边
    被引用的部分放在这个标签插件的后面

效果展示
class为left，在左边时的效果

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

class为right，在右边时的效果

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

jsFiddle—嵌入jsFiddle代码

这个似乎是通过 jsFiddle 这个平台来嵌入前端代码，可以多标签展示js、html、css代码
语法：

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

效果展示：

Gist—嵌入gits代码块

这个似乎也是借助了其他的工具，展示了git的记录
语法：

1
{% gist gist_id [filename] %}

效果展示：

iframe—嵌入iframe标签

这个能够在网页中嵌入一个iframe标签，能够实现丰富的功能，甚至能够实现在网页中浏览网页。虽然hexo博客支持html语法，可以直接在网页中使用 <iframe> 直接嵌入
语法：

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

参数说明：

  • url：需要嵌入内容的网址
  • width,height，嵌入内容的宽度和高度，可以使用百分比来设置

效果展示：

image—嵌入图片

和上面类型，能够在网页中嵌入 img 标签来引用图片
语法：

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

参数说明：

  • class names，应该是这个img标签的class信息
  • path，应该是图片的路径
  • width,height，嵌入图片的宽度和高度
  • title text，
  • all text，

Link—添加链接

这个标签能够实现和md引用链接相同的效果。
语法：

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

参数说明：

  • text，显示链接的问题
  • url，对应的链接
  • external，
  • title，

include Code—引用本地代码文件

和上面 code block 代码块的作用类型，可以展示代码，但这个是引用本地的代码文件中的内容。文档说是引用 source/downloads/code 文件夹下的代码文件内容，可以通过 from 和 to 来展示指定行的内容。
关于代码文件的路径问题，可以在 code_dir 中配置。
语法：

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

Youtube—插入youtube内容

为网页插入一个 youtube 内容
语法：

1
{% youtube video_id %}

参数说明：

  • video_id，视频对应的id号

Vimeo—插入视频内容

这个标签是插入 vemeo 网站上的内容，增加了宽度和高度设置
语法：

1
{% vimeo video_id [width] [height] %}

参数说明：

  • video_id，视频的id号
  • width,height，视频的宽度和高度设置

include Posts—添加链接其他界面的内容

这个功能在界面中添加一个跳转到本博客其他文章的链接，就可以在不知道博客文章网址的情况下，设置一个跳转。
使用这个标签，就可以根据文件名进行跳转，而不用理会文件的路径、永久链接等信息。
此外此标签不能够被使用在mk的 []() 语法中
语法：

1
2
{% post_path filename %}
{% post_link filename [title] [escape] %}

参数说明：

  • filename，要跳转的文件名
  • title，可以不展示原本的标题，可以自定义一个新的标题
  • escape，文章的标题以及自定义标题都是默认转义的，如果不需要转义，需要把escape设置为false
    效果展示：
    1
    2
    {% post_link 標籤外掛-Tag-Plugins 'How to use <b> tag in title' %}
    {% post_link 標籤外掛-Tag-Plugins '<b>bold</b> custom title' false %}

include Assets—添加附件内容

为网页添加本地的附件内容，
语法：

1
2
3
{% asset_path filename %}
{% asset_img filename [title] %}
{% asset_link filename [title] [escape] %}

参数说明：
参数和使用方法上面标签一样

Raw—展示原本内容

有些内容需要展示原本的样子，但是如果直接展示，就会转义。而使用 row 标签包裹，里面的内容不会进行任何的处理。这个和md语法中的反引号作用类似
语法：

1
2
3
4
{% raw %}
content
{% endraw %}

文章摘要以及截断

使用 <!-- more --> ，那么在这标签之前的内容就会被视为摘要，在首页中就之后出现这部分的内容。
虽然文章的内容被截断，一部分作为摘要显示在首页中，但是这部分内容还是会正常显示在文章页中。

参考资料

Hexo Built-in Tag Plugins (Hexo內置標籤外掛) | Butterfly
Hexo文档-标签插件