一些记录...

Lying awake and worrying about the day ahead.

0%

Hexo中 Tag 插件使用教程

Posted on Edited on In
Symbols count in article: 6.4k Reading time ≈ 6 mins.

标签插件（Tag Plugins）

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

标签插件不应该被包裹在 Markdown 语法中

Hexo自带的标签插件

引用块

在文章中插入引言，可包含作者、来源和标题。
别名：quote

语法格式

1
2
3
{% quote [author[, source]] [link] [source_link_title] %}
content
{% endquote %}

示例

无参数
1
2
3
{% quote %}
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.
{% endquote %}

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.

引用书上的句子
1
2
3
{% quote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endquote %}

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

David LevithanWide Awake
引用网络文章
1
2
3
{% quote 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.
{% endquote %}

Every interaction is both precious and an opportunity to delight.

反引号代码块

``` [language] [title] [url] [link text] code snippet ```

  • title：代码标题
  • url：代码源地址或说明地址
  • link text：地址名称

YouTube

在文章中插入YouTube视频

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

  • type：指插入视频的类型，可选playlist
  • cookie：是否禁用YouTube cookie，可选true or false

引用资源

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

资源文件夹

全局资源文件夹

将图片放到source/img后，通过类似![](../img/Alipay.jpg)方法访问

文章资源文件夹

将_config.yml文件下的变量作下面操作

_config.yml
1
post_asset_folder: true

当文件资源管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们。
之后所有图片、视频的插入都将通过文章资源文件夹

嵌入图片

当文件资源管理功能打开后，可以用如下方式快速地访问文件夹下的图片，宽高可以设为百分比

1
{% asset_img /assets/cat.png  100 100 %}

Markdown嵌入图片

当文件资源管理功能打开后,

_config.yml
1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg">

文章摘要和截断

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。

注意，摘要可能会被 Front Matter 中的 excerpt 覆盖。

Next主题下的标签插件

Center-quote

文本居中的引用形式

用法

1
2
{% centerquote %}Quote1{% endcenterquote %}
{% cq %}Quote2{% endcq %}

示例

Elegant in code, simple in core

Note

Note标签通过在左边界使用特殊颜色划线，实现提醒功能。

配置

next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false #false时PC端不显示图标，但移动端仍会显示，故需要在标签语句中手动no-icon进行标注
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

用法

note.js
1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

Tabs

Tabs标签用于多个内容之间的切换，默认情况下只显示其中一个结果或不展开显示，使文章更有条理。

配置

next/_config.yml
1
2
3
4
5
6
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

用法

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
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

示例

1
2
3
4
5
6
7
8
9
10
11
{% tabs part %}
<!-- tab 空 @heart -->
**This is Tab 1**
<!-- endtab  -->
<!-- tab 箜 -->
**This is Tab 2**
<!-- endtab -->
<!-- tab 崆 -->
**This is Tab 3**
<!-- endtab -->
{% endtabs %}

This is Tab 1

This is Tab 2

This is Tab 3

PDF

配置

next/_config.yml
1
2
3
4
pdf:
  enable: true
  # Default height
  height: 500px

用法

pdf.js
1
2
3
4
{% pdf url [height] %}

[url]    : Relative path to PDF file.（可以是在线网址，也可以是本地文件）
[height] : Optional. Height of the PDF display element, e.g. 800px.

示例

1
2
在线：{% pdf https://example.com/sample.pdf %}
本地：{% pdf /path/to/your/file.pdf 600px %}

Label

高亮一段话

用法

1
2
3
4
5
6
{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

示例

1
2
examples:
{% label @default %} {% label primary@primary %} {% label success@success %} {% label info@info %} {% label warning@warning %} {% label danger@danger %}
default primary success info warning danger

Video

用于添加视频

用法

video.js
1
{% video url %}

示例

1
2
在线：{% video https://example.com/sample.mp4 %}
本地：{% video video.mp4 %}

Button

useless

Group-pictures

用于显示多个图片

用法

group-pictures.js
1
2
3
4
5
6
{% grouppicture [group]-[layout] %}{% endgrouppicture %}

alias：{% gp [group]-[layout] %}{% endgp %}

[group]  : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.

示例

1
2
3
4
5
6
7
{% grouppicture 5-3%}
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160720_192243_AO_HDR.jpg)
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160817_185254_AO_HDR.jpg)
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20160818_190040_AO_HDR.jpg)
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20180123_131106.jpg)
  ![](https://suncos-01-1254144885.cos.ap-shanghai.myqcloud.com/%E6%89%8B%E6%9C%BA/IMG_20170712_154515.jpg)
{% endgrouppicture %}

参考文章

  1. Hexo官方文档
  2. Hexo中Tags配置