Hexo 标签插件

2020-10-20 16:47 更新

标签插件(Tag Plugins)

标签插件和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。

Block Quote

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

捷径: quote

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

没有提供参数,则只输出普通的 blockquote

    {% blockquote %}  
    Lo  
    {% endblockquote %}  

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 %}  
    Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.  
    {% endblockquote %}  

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

David LevithanWide Awake

引用 Twitter

    {% blockquote @DevDocs https:  
    NEW: DevDocs now comes with syntax highlighting. http:  
    {% endblockquote %}  

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

@DevDocs[twitter.com/devdocs/status/356095192085962752](https://twitter.com/devdocs/status/356095192085962752)

引用网路上的文章

    {% 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.  
    {% endblockquote %}  

Every interaction is both precious and an opportunity to delight.

Seth Godin[Welcome to Island Marketing](http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html)

Code Block

在文章中插入代码。

快捷方式: code

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

以option:value格式指定其他选项,例如line_number:false first_line:5。

额外的选择 描述 默认
line_number 显示行号 true
highlight 启用代码突出显示 true
first_line 指定第一行号 1
mark 突出显示特定行,每个值用逗号分隔。使用破折号指定数字范围 示例:mark:1,4-7,10将标记第1、4至7和10行。
wrap 将代码块包装在 `` true

例子

普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');

指定语言

    {% codeblock lang:objc %}  
    [rectangle setX: 10 y: 10 width: 20 height: 20];  
    {% endcodeblock %}  
    [rectangle setX: 10 y: 10 width: 20 height: 20];  

在代码块中添加标题

{%codeblock Array.map%} 
array.map(callback [,thisArg])
{%endcodeblock%}
Array.maparray.map(callback [,thisArg])

添加标题和URL

{%codeblock _.compact http://underscorejs.org/#compact Underscore.js%} 
_.compact([0,1,false,2,``,3]);
=> [1、2、3]
{%endcodeblock%}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

反引号代码块

这与使用代码块相同,但是使用三个反引号来分隔该块。

```[语言] [标题] [URL] [链接文本]代码段

拉报价

要将拉引号添加到您的帖子中:

{%pullquote [class]%}
content
{%endpullquote%}

jsFiddle

嵌入 jsFiddle 代码段:

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

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

插入 YouTube 视频。

{% youtube video_id [type] [cookie] %}

例子

嵌入视频

{%youtube lJIrF4YjHfQ%}

嵌入播放列表

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

启用隐私增强模式

在此模式下不使用 YouTube 的 cookie。

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

Vimeo

插入自适应或指定大小的 Vimeo 视频。

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

包括帖子

包括指向其他帖子的链接。

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

使用此标记时,您可以忽略永久链接和文件夹信息,例如语言和日期。

例如:{% 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 %}

Hexo 3.8.0发布

显示自定义文本。

{% 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 %}

粗体自定义标题

包括资产

包括要与结合使用的职位资产post_asset_folder

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

嵌入图片

标记为 3.1.0+的 hexo-renderer 标记可以(可选)自动解析图像的帖子路径,有关如何启用它的信息,请参阅本节

“ foo.jpg” 位于http://example.com/2020/01/02/hello/foo.jpg。

Default (无选项)**

{% 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">

标题和替代

{% asset_img logo.svg "lorem ipsum'dolor'" %}
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor">

RAW

如果某些内容导致帖子中的处理问题,请使用raw标记将其包裹起来,以避免呈现错误。

{% raw %}
content
{% endraw %}

摘录后

使用<!-- more -->标签前面的文字作为帖子的摘录。如果已指定,则最重要的excerpt:值将优先。

例子:

Lorem ipsum dolor坐镇,奉献自若,sius do eiusmod tempor incididunt ut Labore et dolore magna aliqua。
<!-更多->
尽量减少使用veniam,不要进行任何锻炼,否则将导致commodo后果。Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。不擅长于圣人的情节,应在负责任的犯罪活动中动工。



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号