标签插件与文章标签不同。它们移植自 Octopress,为您提供了一种快速向文章添加特定内容的便捷方式。
虽然您可以使用任何格式编写文章,但标签插件始终可用,语法保持一致。
标签插件不应该包装在 Markdown 语法内,例如 []({% post_path lorem-ipsum %})
不支持。
块引用
非常适合在文章中添加引用,可以选择添加作者、来源和标题信息。
别名: quote
{% blockquote [author[, source]] [link] [source_link_title] %} |
示例
无参数。普通块引用。
{% blockquote %} |
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.
来自书籍的引用
{% blockquote David Levithan, Wide Awake %} |
不要只为自己寻求幸福。为所有的人寻求幸福。通过仁慈。通过怜悯。
来自 Twitter 的引用
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %} |
新功能:DevDocs 现在支持语法高亮。 http://devdocs.io
来自网络文章的引用
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %} |
每一次互动都是珍贵的,也是带来喜悦的机会。
代码块
一个在文章中添加代码片段的有用功能。
别名: code
{% codeblock [title] [lang:language] [url] [link text] [additional options] %} |
以 option:value
的格式指定附加选项,例如 line_number:false first_line:5
。
附加选项 | 描述 | 默认值 |
---|---|---|
line_number |
显示行号 | true |
line_threshold |
仅当代码块的行数超过此阈值时才显示行号。 | 0 |
highlight |
启用代码高亮 | true |
first_line |
指定首行行号 | 1 |
mark |
高亮特定行,每个值用逗号隔开。使用连字符指定数字范围 示例: mark:1,4-7,10 将高亮第 1 行、第 4 到 7 行以及第 10 行。 |
|
wrap |
将代码块包装在 <table> 中 |
true |
示例
一个普通的代码块
{% codeblock %} |
alert('Hello World!'); |
指定语言
{% codeblock lang:objc %} |
[rectangle setX: 10 y: 10 width: 20 height: 20]; |
在代码块中添加标题
{% codeblock Array.map %} |
array.map(callback[, thisArg]) |
添加标题和 URL
{% codeblock _.compact https://underscorejs.node.org.cn/#compact Underscore.js %} |
\_.compact([0, 1, false, 2, '', 3]); |
反引号代码块
这与使用代码块相同,只是使用三个反引号来分隔代码块。
`` [language] [title] [url] [link text] code snippet ``长引用
在文章中添加长引用
{% pullquote [class] %} |
jsFiddle(已在 v7.0.0
中删除)
该标签已在 Hexo 7.0.0 中删除。我们提供了一个插件 hexo-tag-embed 用于向后兼容您的现有文章。
嵌入 jsFiddle 代码片段
{% jsfiddle shorttag [tabs] [skin] [width] [height] %} |
Gist(已在 v7.0.0
中删除)
如果您使用
v7.0.0+
,请使用 hexo-tag-embed 代替。
嵌入 Gist 代码片段
{% gist gist_id [filename] %} |
iframe
嵌入 iframe
{% iframe url [width] [height] %} |
图片
插入指定大小的图片。
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %} |
链接
插入带有 target="_blank"
属性的链接。
{% link text url [external] [title] %} |
包含代码
插入 source/downloads/code
文件夹中的代码片段。文件夹位置可以通过配置文件中的 code_dir
选项指定。
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %} |
示例
嵌入 test.js 的全部内容
{% include_code lang:javascript test.js %} |
仅嵌入第 3 行
{% include_code lang:javascript from:3 to:3 test.js %} |
嵌入第 5 到 8 行
{% include_code lang:javascript from:5 to:8 test.js %} |
嵌入第 5 行到文件末尾
{% include_code lang:javascript from:5 test.js %} |
嵌入第 1 到 8 行
{% include_code lang:javascript to:8 test.js %} |
YouTube(已在 v7.0.0
中删除)
如果您使用
v7.0.0+
,请使用 hexo-tag-embed 代替。
插入 YouTube 视频。
{% youtube video_id [type] [cookie] %} |
示例
嵌入视频
{% youtube lJIrF4YjHfQ %} |
嵌入播放列表
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %} |
启用隐私增强模式
在这种模式下不会使用 YouTube 的 cookie。
{% youtube lJIrF4YjHfQ false %} |
Vimeo(已在 v7.0.0
中删除)
如果您使用
v7.0.0+
,请使用 hexo-tag-embed 代替。
插入自适应或指定大小的 Vimeo 视频。
{% vimeo video_id [width] [height] %} |
包含文章
包含指向其他文章的链接。
{% post_path filename %} |
使用此标签时,您可以忽略永久链接和文件夹信息,例如语言和日期。
例如:{% post_link how-to-bake-a-cake %}
。
只要文章文件名是 how-to-bake-a-cake.md
,即使文章位于 source/posts/2015-02-my-family-holiday
并具有永久链接 2018/en/how-to-bake-a-cake
,这也会生效。
您可以自定义显示的文本,而不是显示文章的标题。
默认情况下,文章标题和自定义文本都会被转义。您可以使用 escape
选项来禁用转义。
例如
显示文章标题。
{% post_link hexo-3-8-released %}
显示自定义文本。
{% post_link hexo-3-8-released 'Link to a post' %}
转义标题。
{% post_link hexo-4-released 'How to use <b> tag in title' %} |
不转义标题。
{% post_link hexo-4-released '<b>bold</b> custom title' false %} |
包含资源
包含文章资源,与 post_asset_folder
结合使用。
{% asset_path filename %} |
嵌入图片
hexo-renderer-marked 3.1.0+ 可以(可选)自动解析图片的文章路径,请参考 此节 了解如何启用它。
“foo.jpg” 位于 http://example.com/2020/01/02/hello/foo.jpg
。
默认(无选项)
{% asset_img foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" /> |
自定义类
{% asset_img post-image foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" class="post-image" /> |
显示大小
{% asset_img foo.jpg 500 400 %}
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400" /> |
标题和替代文本
{% asset_img foo.jpg "lorem ipsum'dolor'" %}
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor" /> |
URL
url_for (7.0.0+)
返回一个以根路径为前缀的 URL。输出会自动编码。
{% url_for text path [relative] %} |
示例
_config.yml |
{% url_for blog index.html %} |
<a href="/blog/index.html">blog</a> |
相对链接,默认情况下遵循 relative_link
选项
例如,文章/页面路径是 ‘/foo/bar/index.html’
_config.yml |
{% url_for blog index.html %} |
<a href="../../index.html">blog</a> |
您也可以禁用它来输出非相对链接,即使 relative_link
已启用,反之亦然。
{% url_for blog index.html false %} |
<a href="/index.html">blog</a> |
full_url_for (7.0.0+)
返回一个以 config.url
为前缀的 URL。输出会自动编码。
{% full_url_for text path %} |
示例
_config.yml |
{% full_url_for index /a/path %} |
<a href="https://example.com/blog/a/path">index</a> |
原始
如果某些内容在您的文章中造成处理问题,请用 raw
标签将其包装起来,以避免渲染错误。
{% raw %} |
文章摘录
使用 <!-- more -->
标签之前放置的文本作为文章的摘录。如果指定了 前置内容 中的 excerpt:
值,则它将优先使用。
示例
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |