标签插件与帖子标签不同。它们是从 Octopress 移植而来的,为你提供了一种快速向帖子添加特定内容的有用方法。
¥Tag plugins are different from post tags. They are ported from Octopress and provide a useful way for you to quickly add specific content to your posts.
虽然你可以用任何格式撰写帖子,但标签插件始终可用,语法保持不变。
¥Although you can write your posts in any format, the tag plugins will always be available and syntax remains the same.
标签插件不应封装在 Markdown 语法中,例如不支持 []({% post_path lorem-ipsum %})
。
¥Tag plugins should not be wrapped inside Markdown syntax, e.g. []({% post_path lorem-ipsum %})
is not supported.
引用块
¥Block Quote
非常适合在你的帖子中添加引文,并带有可选的作者、来源和标题信息。
¥Perfect for adding quotes to your post, with optional author, source and title information.
别名:quote
¥Alias: quote
{% blockquote [author[, source]] [link] [source_link_title] %} |
示例
¥Examples
无参数。普通块引用。
¥No arguments. Plain blockquote.
{% 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。
来自书中的引用
¥Quote from a book
{% blockquote David Levithan, Wide Awake %} |
不要只为自己寻求幸福。为所有人寻求幸福。通过仁慈。通过怜悯。
¥
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
来自 Twitter 的引用
¥Quote from Twitter
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %} |
NEW:DevDocs 现在带有语法高亮显示。http://devdocs.io
¥
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
引用自网上的一篇文章
¥Quote from an article on the web
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %} |
每次互动都是珍贵的,也是令人愉悦的机会。
¥
Every interaction is both precious and an opportunity to delight.
代码块
¥Code Block
将代码片段添加到帖子的有用功能。
¥A useful feature for adding code snippets to your post.
别名:code
¥Alias: code
{% codeblock [title] [lang:language] [url] [link text] [additional options] %} |
以 option:value
格式指定其他选项,例如 line_number:false first_line:5
。
¥Specify additional options in option:value
format, e.g. 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 |
示例
¥Examples
纯代码块
¥A plain code block
{% codeblock %} |
alert('Hello World!'); |
指定语言
¥Specifying the language
{% codeblock lang:objc %} |
[rectangle setX:10 y:10 宽度:20 高度:20]; |
¥
[rectangle setX: 10 y: 10 width: 20 height: 20]; |
向代码块添加标题
¥Adding a caption to the code block
{% codeblock Array.map %} |
array.map(callback[, thisArg]) |
添加标题和 URL
¥Adding a caption and a URL
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %} |
_.compact([0, 1, false, 2, '', 3]);=> [1, 2, 3] |
反引号代码块
¥Backtick Code Block
这与使用代码块相同,但使用三个反引号来分隔块。
¥This is identical to using a code block, but instead uses three backticks to delimit the block.
`` [language] [title] [url] [link text] code snippet ``拉取引文
¥Pull Quote
要向你的帖子添加引言:
¥To add pull quotes to your posts:
{% pullquote [class] %} |
jsFiddle(已在 v7.0.0
中删除)
¥jsFiddle (deleted in v7.0.0
)
该标签已在 Hexo 7.0.0 中删除。我们提供了一个插件 hexo-tag-embed,以便与你现有的帖子向后兼容。
¥The tag was removed in Hexo 7.0.0. We have provided a plugin hexo-tag-embed for backward compatibility with your existing posts.
要嵌入 jsFiddle 片段:
¥To embed a jsFiddle snippet:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %} |
要点(已在 v7.0.0
中删除)
¥Gist (deleted in v7.0.0
)
如果你使用
v7.0.0+
,请改用 hexo-tag-embed。¥Please use hexo-tag-embed instead if you use
v7.0.0+
.
要嵌入 Gist 片段:
¥To embed a Gist snippet:
{% gist gist_id [filename] %} |
iframe
嵌入 iframe:
¥To embed an iframe:
{% iframe url [width] [height] %} |
图片
¥Image
插入具有指定大小的图片。
¥Inserts an image with specified size.
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %} |
链接
¥Link
插入带有 target="_blank"
属性的链接。
¥Inserts a link with target="_blank"
attribute.
{% link text url [external] [title] %} |
包含代码
¥Include Code
在 source/downloads/code
文件夹中插入代码片段。文件夹位置可以通过配置中的 code_dir
选项指定。
¥Inserts code snippets in source/downloads/code
folder. The folder location can be specified through the code_dir
option in the config.
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %} |
示例
¥Examples
嵌入 test.js 的全部内容
¥Embed the whole content of test.js
{% include_code lang:javascript test.js %} |
仅嵌入第 3 行
¥Embed line 3 only
{% include_code lang:javascript from:3 to:3 test.js %} |
嵌入第 5 行至第 8 行
¥Embed line 5 to 8
{% include_code lang:javascript from:5 to:8 test.js %} |
嵌入第 5 行至文件末尾
¥Embed line 5 to the end of file
{% include_code lang:javascript from:5 test.js %} |
嵌入第 1 行至第 8 行
¥Embed line 1 to 8
{% include_code lang:javascript to:8 test.js %} |
YouTube(已在 v7.0.0
中删除)
¥YouTube (deleted in v7.0.0
)
如果你使用
v7.0.0+
,请改用 hexo-tag-embed。¥Please use hexo-tag-embed instead if you use
v7.0.0+
.
插入 YouTube 视频。
¥Inserts a YouTube video.
{% youtube video_id [type] [cookie] %} |
示例
¥Examples
嵌入视频
¥Embed a video
{% youtube lJIrF4YjHfQ %} |
嵌入播放列表
¥Embed a playlist
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %} |
启用隐私增强模式
¥Enable privacy-enhanced mode
此模式下不使用 YouTube 的 cookie。
¥YouTube’s cookie is not used in this mode.
{% youtube lJIrF4YjHfQ false %} |
Vimeo(在 v7.0.0
中删除)
¥Vimeo (deleted in v7.0.0
)
如果你使用
v7.0.0+
,请改用 hexo-tag-embed。¥Please use hexo-tag-embed instead if you use
v7.0.0+
.
插入响应式或指定大小的 Vimeo 视频。
¥Inserts a responsive or specified size Vimeo video.
{% vimeo video_id [width] [height] %} |
包含帖子
¥Include Posts
包括指向其他帖子的链接。
¥Include links to other posts.
{% post_path filename %} |
使用此标签时,你可以忽略永久链接和文件夹信息,例如语言和日期。
¥You can ignore permalink and folder information, like languages and dates, when using this tag.
例如:{% post_link how-to-bake-a-cake %}
。
¥For instance: {% 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
,这也会起作用。
¥This will work as long as the filename of the post is how-to-bake-a-cake.md
, even if the post is located at source/posts/2015-02-my-family-holiday
and has permalink 2018/en/how-to-bake-a-cake
.
你可以自定义要显示的文本,而不是显示帖子的标题。
¥You can customize the text to display, instead of displaying the post’s title.
帖子的标题和自定义文本默认转义。你可以使用 escape
选项禁用转义。
¥Post’s title and custom text are escaped by default. You can use the escape
option to disable escaping.
例如:
¥For instance:
显示帖子标题。
¥Display title of the post.
{% post_link hexo-3-8-released %}
显示自定义文本。
¥Display custom text.
{% post_link hexo-3-8-released 'Link to a post' %}
转义标题。
¥Escape title.
{% post_link hexo-4-released 'How to use <b> tag in title' %} |
不转义标题。
¥Do not escape title.
{% post_link hexo-4-released '<b>bold</b> custom title' false %} |
包含资源
¥Include Assets
包含帖子资源,与 post_asset_folder
结合使用。
¥Include post assets, to be used in conjunction with post_asset_folder
.
{% asset_path filename %} |
嵌入图片
¥Embed image
hexo-renderer-marked 3.1.0+ 可以(可选)自动解析帖子的图片路径,请参阅 此部分 了解如何启用它。
¥hexo-renderer-marked 3.1.0+ can (optionally) resolves the post’s path of an image automatically, refer to this section on how to enable it.
“foo.jpg” 位于 http://example.com/2020/01/02/hello/foo.jpg
。
¥”foo.jpg” is located at http://example.com/2020/01/02/hello/foo.jpg
.
默认(无选项)
¥Default (no option)
{% asset_img foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" /> |
自定义类别
¥Custom class
{% asset_img post-image foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" class="post-image" /> |
显示大小
¥Display size
{% asset_img foo.jpg 500 400 %}
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400" /> |
标题和 Alt
¥Title & Alt
{% 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。输出自动编码。
¥Returns a url with the root path prefixed. Output is encoded automatically.
{% url_for text path [relative] %} |
示例:
¥Examples:
_config.yml |
{% url_for blog index.html %} |
<a href="/blog/index.html">blog</a> |
相对链接,默认遵循 relative_link
选项,例如帖子/页面路径为 ‘/foo/bar/index.html’
¥Relative link, follows relative_link
option by default
e.g. post/page path is ‘/foo/bar/index.html’
_config.yml |
{% url_for blog index.html %} |
<a href="../../index.html">blog</a> |
你还可以禁用它以输出非相对链接,即使启用了 relative_link
,反之亦然。
¥You could also disable it to output a non-relative link, even when relative_link
is enabled and vice versa.
{% url_for blog index.html false %} |
<a href="/index.html">blog</a> |
full_url_for(7.0.0+)
返回带有 config.url
前缀的 URL。输出自动编码。
¥Returns a url with the config.url
prefixed. Output is encoded automatically.
{% full_url_for text path %} |
示例:
¥Examples:
_config.yml |
{% full_url_for index /a/path %} |
<a href="https://example.com/blog/a/path">index</a> |
原始
¥Raw
如果某些内容导致你的帖子出现处理问题,请用 raw
标签将其封装以避免渲染错误。
¥If certain content is causing processing issues in your posts, wrap it with the raw
tag to avoid rendering errors.
{% raw %} |
帖子摘录
¥Post Excerpt
使用 <!-- more -->
标签前的文本作为帖子的摘录。如果指定了 front-matter 中的 excerpt:
值,则将优先使用。
¥Use text placed before the <!-- more -->
tag as an excerpt for the post. excerpt:
value in the front-matter, if specified, will take precedent.
示例:
¥Examples:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |