0%

hexo和next内置标签

Posted on Edited on In

Note

标签使用

1
2
3
4
5
6
7
8
{% note class_name %} blabla {% endnote %}
class_name:
	- default
	- primary
	- success
	- info
	- warning 
	- danger

效果演示

default

primary

success

info

warning

danger

Tabs

标签使用

1
2
3
4
5
6
7
8
9
{% tabs unique_name,default_index %}
<!-- tab [tag_name] -->
这是tab1
<!-- endtab -->
<!-- tab [tag_name] -->
这是tab2
<!-- endtab -->
...
{% endtabs %}

效果演示

1
2
3
4
5
6
7
8
9
10
11
{% tabs code,1 %}
<!-- tab java -->
java code
<!-- endtab -->
<!-- tab scala -->
scala code
<!-- endtab -->
<!-- tab python -->
python code
<!-- endtab -->
{% endtabs %}
1
2
3
4
5

public class Hello{
  //
}

1
2
3
4
5

object Hello{
  //
}

undefined

Block Quote

Perfect for adding quotes to your post, with optional author, source and title information.

Alias: quote

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

Examples

No arguments. Plain blockquote.

1
2
3
{% 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.
{% 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.

Quote from a book

1
2
3
{% 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

Quote from Twitter

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

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

@DevDocstwitter.com/devdocs/status/356095192085962752

Quote from an article on the web

1
2
3
{% 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 GodinWelcome to Island Marketing

Code Block

Useful feature for adding code snippets to your post.

Alias: code

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

Specify additional options in option:value format, e.g. line_number:false first_line:5.

Extra Options Description Default
line_number Show line number true
highlight Enable code highlighting true
first_line Specify the first line number 1
mark Line highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrap Wrap the code block in true

Examples

A plain code block

1
2
3
4
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');

Specifying the language

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

Adding a caption to the code block

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

Adding a caption and a URL

1
2
3
4
5
6
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.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.

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

Pull Quote

To add pull quotes to your posts:

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

jsFiddle

To embed a jsFiddle snippet:

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

Gist

To embed a Gist snippet:

1
{% gist gist_id [filename] %}

iframe

To embed an iframe:

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

Image

Inserts an image with specified size.

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

Inserts a link with target="_blank" attribute.

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

Include Code

Inserts code snippets in source/downloads/code folder. The folder location can be specified through the code_dir option in the config.

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

Examples

Embed the whole content of test.js

1
{% include_code lang:javascript test.js %}

Embed line 3 only

1
{% include_code lang:javascript from:3 to:3 test.js %}

Embed line 5 to 8

1
{% include_code lang:javascript from:5 to:8 test.js %}

Embed line 5 to the end of file

1
{% include_code lang:javascript from:5 test.js %}

Embed line 1 to 8

1
{% include_code lang:javascript to:8 test.js %}

YouTube

Inserts a YouTube video.

1
{% youtube video_id %}

Vimeo

Inserts a responsive or specified size Vimeo video.

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

Include Posts

Include links to other posts.

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

You can ignore permalink and folder information, like languages and dates, when using this tag.

For instance: .

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. Using post_path inside Markdown syntax []() is not supported.

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.

1
{% post_link hexo-3-8-released %}

Hexo 3.8.0 Released

Display custom text.

1
{% post_link hexo-3-8-released 'Link to a post' %}

Link to a post

Escape title.

1
{% post_link hexo-4-released 'How to use <b> tag in title' %}

How to use tag in title

Do not escape title.

1
{% post_link hexo-4-released '<b>bold</b> custom title' false %}

bold custom title

Include Assets

Include post assets.

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

Raw

If certain content is causing processing issues in your posts, wrap it with the raw tag to avoid rendering errors.

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

Post Excerpt

Use text placed before the tag as an excerpt for the post. excerpt: value in the front-matter, if specified, will take precedent.

Examples:

1
2
3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group Pictures

Usage

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

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

Examples

1
2
3
4
5
6
7
8
{% grouppicture 6-3 %}
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
{% endgrouppicture %}

PDF

Settings

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

Usage

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

[url]    : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.

Examples

1
2
{% pdf https://example.com/sample.pdf %}
{% pdf /path/to/your/file.pdf 600px %}

Label

Usage

1
2
3
4
5
6
7
label.js
{% 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.

Examples

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.