Hexo Markdown以及各种插件功能测试

Markdown 插件

常用标记

- 29^th^ => `29<sup>th</sup>`
- H~2~0 => `H<sub>2</sub>O`
- ==marked== => `<mark>inserted</mark>`
- ++inserted++ => `<ins>inserted</ins>`

29^th => 29th
H₂0 => H2O
marked => inserted
inserted => <ins>inserted</ins>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
      .lighter {
        font-weight: lighter;
      }

      .bold {
        font-weight: bold;
      }

      .bolder {
        font-weight: bolder;
      }
    </style>
</head>
<body>
	<P>这是分段</P>
	<b>这是粗体</b>
	<br/>
	<big>这是大号字</big>
	<br/>
	<em>这是着重字</em>
	<br/>
	<i>这是斜体字</i>
	<br/>
	<small>这是小号字</small>
	<br/>
	<strong>加重语气</strong>
	<br/>
	这是<sup>上标字</sup>
	<br/>
	这是<sub>下标字</sub>
	<br/>
	<ins>插入字</ins>
	<br/>
	<del>删除字</del>
	<br/>

<p>This is a <span class="lighter">lighter text</span>.</p>
<p>This is a <span class="bold">bold text</span>.</p>
<p>This is a <span class="bolder">bolder text</span>.</p>

<p>
font-weight 属性以 lighter、bold 和 bolder 作为值，数字从 100 到 900。因此，使用它，你不仅可以将文本加粗，还可以使其比周围的文本更亮。
你通常应该避免使用 b，因为它已经是一种样式。当你使用 b 标记将文本设为粗体时，你明确地告诉浏览器将 HTML 中的文本设为粗体。

strong 也使文本显示粗体，但它是语义的。使用它，你就不是从 HTML 样式化（HTML 最初从未用于此目的），而是告诉浏览器使文本在外观上比周围的其他文本更为加粗。

CSS font-weight 属性让你可以更好地控制文本的粗细程度。lighter、bold 和 bolder的值是一个开始，但你可以通过应用数字/权重（例如 100、200、300、400、500、600、700、800 和 900）作为值，从而更进一步，这会产生不同的粗细。
</p>

</body>
</html>

markdown-it-task-checkbox

- [x] item 1
    - [x] item 1-1
    - [ ] item 1-2
    - [ ] item 1-3
    - [ ] item 1-4
- [ ] item 2
    - [ ] item 2-1
    - [ ] item 2-2
    - [ ] item 2-3
    - [ ] item 2-4

markdown-it-multimd-table

目前仅支持多列合并

| 标题1        | 标题2        |
| ------------ | ------------ |
| 合并第一行                ||
| 第二行第一列 | 第二行第二列 |

标题1	标题2
合并第一行
第二行第一列	第二行第二列

colspan > or empty cell:

a	b
>	1
2

rowspan ‘^’

a	b
1	2
^^	4

|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |

Markdown	Rendered HTML
Italic	Italic	\

- Item 1	- Item 1	\
- Item 2	- Item 2
```python	```python \
.1 + .2	.1 + .2 \
```	```

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Calendar Cache | > 5 hours  | @georgehrke | in progress | - [x] ok?
| Object Cache   | > 5 hours  | @georgehrke | in progress | [x] item1<br/>[ ] item2
| Object Cache   | > 5 hours  | @georgehrke | in progress | <ul><li>- [x] item1</li><li>- [ ] item2</li></ul>
| Object Cache   | > 5 hours  | @georgehrke | in progress | <ul><li>[x] item1</li><li>[ ] item2</li></ul>


- [x] works
- [x] works too

Task	Time required	Assigned to	Current Status	Finished
Calendar Cache	> 5 hours	@georgehrke	in progress	- [x] ok?
Object Cache	> 5 hours	@georgehrke	in progress	[x] item1 [ ] item2
Object Cache	> 5 hours	@georgehrke	in progress	- [x] item1- [ ] item2
Object Cache	> 5 hours	@georgehrke	in progress	[x] item1[ ] item2

works
works too

Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: |  :white_check_mark: | :heavy_check_mark:

Function	MySQL / MariaDB	PostgreSQL	SQLite
substr	✔️	✅	✔️

markdown-it-abbr

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

The HTML specification
is maintained by the W3C.

footnote

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

Here is a footnote reference,^[1] and another.^[2]

belong to the previous footnote.

综合测试

直接访问 markdown-it demo

---
__Advertisement :)__

- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
  resize in browser.
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
  i18n with plurals support and easy syntax.

You will like those projects!

---

### h3 Heading 8-)
#### h4 Heading
##### h5 Heading
###### h6 Heading


### Horizontal Rules

___

---

***

### Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'


### Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


### Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


### Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar


### Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

### Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |


### Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


### Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"


### Plugins

The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).


#### [Emojies](https://github.com/markdown-it/markdown-it-emoji)

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.


#### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)

- 19^th^
- H~2~O


#### [\<ins>](https://github.com/markdown-it/markdown-it-ins)

++Inserted text++


#### [\<mark>](https://github.com/markdown-it/markdown-it-mark)

==Marked text==


#### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.


#### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b


#### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Advertisement 😃

pica - high quality and fast image
resize in browser.
babelfish - developer friendly
i18n with plurals support and easy syntax.

h3 Heading 😎

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

Typographic replacements

Enable typographer option to see result.

test… test… test… test?.. test!..

!!! ??? , – —

“Smartypants, double quotes” and ‘single quotes’

Emphasis

This is bold text

This is italic text

~~Strikethrough~~

Blockquotes

Blockquotes can also be nested…
…by using additional greater-than signs right next to each other…
…or with spaces between arrows.

Lists

Unordered

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
You can use sequential numbers…
…or keep all the numbers as 1.

Start numbering with offset:

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code “fences”

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Minion
Stormtroopocat

Like links, Images also have a footnote style syntax

Alt text

With a reference later in the document defining the URL location:

Plugins

The killer feature of markdown-it is very effective support of
syntax plugins.

Emojies

Classic markup: 😉 :crush: 😢 :tear: 😆 😋
Shortcuts (emoticons): 😃 😦 😎 😉

see how to change output with twemoji.

Footnotes

Footnote 1 link^[3].

Footnote 2 link^[4].

Inline footnote^[5] definition.

Duplicated footnote reference^[4:1].

Definition lists

Term 1

Definition 1
with lazy continuation.

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1: Definition 1
Term 2: Definition 2a; Definition 2b

Abbreviations

This is HTML abbreviation example.

It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.

Markdown 语法

markdown 注释

#### 基于 HTML 标签的注释

<!-- 这是一段被注释掉的文字 -->

这是一段没有被注释的文字

<!--
负责人：项目经理
补充内容：项目背景、实现目标、开发周期、责任人员分配。
计划用时：1周
-->

#### 基于 HTML 样式

<div style="display:none">
这是一段被注释掉的文字
</div>

这是一段没有被注释的文字


#### 通过 Markdown 解析达到注释效果

[//]: (这是一段被注释掉的文字)

这是一段没有被注释的文字

基于 HTML 标签的注释

这是一段没有被注释的文字

基于 HTML 样式

这是一段没有被注释的文字

通过 Markdown 解析达到注释效果

这是一段没有被注释的文字

tag button

Usage

{% button url, text, icon [class], [title] %}

{% btn url, text, icon [class], [title] %}

url : Absolute or relative path to URL.
text : Button text. Required if no icon specified.
icon : Font Awesome icon name. Required if no text specified.
[class] : Optional parameter. Font Awesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
[title] : Optional parameter. Tooltip at mouseover.

Examples

{% button #, Text %}

Text

Button with text & title

{% btn #, Text %}{% btn #, Text & Title,, Title %}

Text Text & Title

Button with icon

{% btn #,, home fa-5x %}
{% btn #,, home fa-4x %}
{% btn #,, home fa-3x %}
{% btn #,, home fa-2x %}
{% btn #,, home fa-lg %}
{% btn #,, home %}

Button with text & icon

{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}

Text & Icon (buggy) Text & Icon (fixed width)

Button inside text

Lorem {% btn #, Lorem, home fa-fw fa-lg %} 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.

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

Lorem 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.

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

Button inside other tag

{% note info %}
{% btn #, Text & Icon, home fa-fw %}

{% btn #,, home, Title %}{% btn #, Text %}

[Link](#)
{% endnote %}

Text & Icon

Text

Link

Button margin

<div class="center"><div>{% btn #,, heading %}{% btn #,, fab fa-edge %}{% btn #,, times %}{% btn #,, circle-notch %}</div>
<div>{% btn #,, italic %}{% btn #,, fab fa-scribd %}</div>
<div>{% btn #,, fab fa-google %}{% btn #,, fab fa-chrome %}{% btn #,, fab fa-opera %}{% btn #,, gem fa-rotate-270 %}</div></div>

Button with relative URL

<div class="center">{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</div>

Previous Chapter Next Chapter

Button with absolute URL

<div class="center">{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}</div>

GitHub

tag note

移植自Next
发现Next主题很完善，除了样式非常老旧，一些功能特性非常不错，故移植一些功能过来。

Usage

{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}

[class] : Optional parameter. Supported values: default | primary | success | info | warning | danger.
[no-icon] : Optional parameter. Disable icon in note.
[summary] : Optional parameter. Optional summary of the note.

All parameters are optional.

Examples

{% note %}
#### Header
(without define class style)
{% endnote %}

(without define class style)

{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

Default Header

Welcome to Hexo!

{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Primary Header

Welcome to Hexo!

{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Info Header

Welcome to Hexo!

{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Success Header

Welcome to Hexo!

{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Warning Header

Welcome to Hexo!

{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Danger Header

Welcome to Hexo!

{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

No icon note

Note without icon: note info no-icon

{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

{% note success %}
#### Codeblock in note

```
code block in note tag
code block in note tag
code block in note tag
```
{% endnote %}

Codeblock in note

code block in note tag
code block in note tag
code block in note tag

{% note default %}
#### Lists in note
* ul
* ul
    * ul
    * ul
* ul

1. ol
2. ol
    1. ol
    2. ol
3. ol
{% endnote %}

Lists in note

ul
ul
- ul
- ul
ul

ol
ol
1. ol
2. ol
ol

#### Table in Note
{% note default %}

| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |

{% endnote %}

Table in Note

1	2
3	4
5	6
7	8

tag label

行内标签移植自 Fluid

在 markdown 中加入如下的代码来使用 Label：

{% label primary @text %}

行内标签行内标签行内标签

或者使用 HTML 形式：

<span class="label label-primary">Label</span>

可选 Label：

primary
default
info
success
warning
danger

warning

若使用 {% label primary @text %}，text 不能以 @ 开头

组图移植自 Fluid

如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：

{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total：图片总数量，对应中间包含的图片 url 数量
n1-n2-...：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式

如下图为示例，代表共 5 张图，第一行 3 张图，第二行 2 张图。

{% gi 5 3-2 %}
  ![](https://blog.17lai.site/medias_webp/cover/fitness.webp)
  ![](https://blog.17lai.site/medias_webp/cover/fitness.webp)
  ![](https://blog.17lai.site/medias_webp/cover/fitness.webp)
  ![](https://blog.17lai.site/medias_webp/cover/fitness.webp)
  ![](https://blog.17lai.site/medias_webp/cover/fitness.webp)

{% endgi %}

hexo-tag-common

更多参考这里

Usage

{% 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] : Font Awesome icon name.
Can be specified with or without space; e.g. ‘Tab caption @icon’ is the same as ‘Tab caption@icon’.
Optional parameter.

Example

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs First unique name %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

Tabs with 3rd tab selected

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs Second unique name, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with no tab selected

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs Third unique name, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with custom labels

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with icons and labels

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs Sixth unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2@font -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs permalinks test

Permalink for > Tab one.
Permalink for > Tab one 1.
Permalink for > Tab one 2.
Permalink for > Tab one 3.

Permalink for > Tab two.
Permalink for > Tab two 1.
Permalink for > Tab two 2.
Permalink for > Tab two 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

Permalink for > [Tab one](#tab-one).
Permalink for > [Tab one 1](#tab-one-1).
Permalink for > [Tab one 2](#tab-one-2).
Permalink for > [Tab one 3](#tab-one-3).

Permalink for > [Tab two](#tab-two).
Permalink for > [Tab two 1](#tab-two-1).
Permalink for > [Tab two 2](#tab-two-2).
Permalink for > [Tab two 3](#tab-two-3).

{% tabs Tab one %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs Tab two %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with other tags

This is Tab 1.

One
Two
Three

code tag
code tag
code tag

Note default tag.

This is Tab 2.

Five
Six
Seven

<div class="video-container"><iframe src="https://www.youtube.com/embed/Kt7u5kr_P5o" frameborder="0" loading="lazy" allowfullscreen></iframe></div>

This is Tab 3.

This is Sub Tab 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub Tab 2.

This is Sub Tab 3.

This is Sub-Sub Tab 1 of Sub Tab 3.

This is Sub-Sub Tab 2 of Sub Tab 3.

This is Sub-Sub Tab 3 of Sub Tab 3.

{% tabs Tags %}
<!-- tab -->
**This is Tab 1.**

1. One
2. Two
3. Three

{% code %}
code tag
code tag
code tag
{% endcode %}

{% note default %}
Note default tag.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**

* Five
* Six
* Seven

{% note primary %}
{% code %}
{% youtube Kt7u5kr_P5o %}
{% endcode %}
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**

{% subtabs Sub Tabs %}
<!-- tab -->
**This is Sub Tab 1.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
{% endnote %}

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub Tab 2.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub Tab 3.**

{% subtabs Sub-Sub Tabs %}
<!-- tab -->
**This is Sub-Sub Tab 1 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 2 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 3 of Sub Tab 3.**

{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}

{% endnote %}
<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endtabs %}

hexo-admonition

作者ref
hexo-admonition
注意：需要把样式放入 hexo 主题的自定义样式文件中（如：my.css），并按自己喜好修改

安装插件

npm install hexo-admonition --save

使用的图标 content中 unicode

使用指南

支持的类型

提示类型 type 将用作 CSS 类名称，暂支持如下类型：

note
info, todo
warning, attention, caution
error, failure, missing, fail

语法说明

Hexo-admonition 遵循一种简单的语法：每个块都以 !!! 开头，然后是代表提示类型的关键字（type）及标题（title）。例如:

!!! warning
    这是一条采用默认标题的警告信息。
    
!!! Warning ""
    这是一条不带标题的警告信息。
    
!!! note "嵌套链接及引用块"
    欢迎访问我的博客链接：[夜法之书](https://www.blog.17lai.site)

    >这里嵌套一行引用信息。
    
!!! note Hexo-admonition 插件使用示例
    这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

    提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

warning

这是一条采用默认标题的警告信息。

这是一条不带标题的警告信息。

嵌套链接及引用块

欢迎访问我的博客链接：夜法之书

这里嵌套一行引用信息。

Hexo-admonition 插件使用示例

这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

公式测试

采用**markdown-it-latex2img**

Demo

数学公式

内联公式

开头的$必须在其右边紧跟一个非空格字符，而结尾的$必须在其左边紧接一个非空格字符，并且不能紧跟一个数字。

勾股定理: $a^{2} + b^{2} = c^{2}$
等差数列求和公式: $S_{n} = n a_{1} + \frac{n (n - 1)}{2} d, n \in N^{*}$
牛顿-莱布尼茨公式: $\int_{a}^{b} f (x) d x = F (b) - F (a) = {F (x) |}_{a}^{b}$
二项分布: $P_{n} (k) = C_{n}^{k} p^{k} q^{n - k} k = 0, 1, 2 \dots \dots, n$

块公式

正态分布 $X \sim N (μ, σ^{2})$ :

f (x) = \frac{1}{\sqrt{2 π} σ} e^{- \frac{(x - μ)^{2}}{2 σ^{2}}}

斐波那契数列 $A_{n} = A_{n - 1} + A_{n - 2}$ ,前后两项的比值逐渐收敛到黄金分割比例

lim_{n \to \infty} \frac{A_{n - 1}}{A_{n}} = \frac{\sqrt{5} - 1}{2} .

因式分解

\begin{aligned} (x - 1) (x - 3) & = x^{2} - 4 x + 3 \\ = x^{2} - 4 x + 4 - 1 \\ = (x - 2)^{2} - 1 \end{aligned}

狄利克雷函数

D (x) = {\begin{cases} 1, & x \in Q \\ 0, & x \notin Q \end{cases}

高斯公式

∭_{Ω} (\frac{\partial P}{\partial x} + \frac{\partial Q}{\partial y} + \frac{\partial R}{\partial z}) d v = \iint_{Σ} P d y d z + Q d z d x + R d x d y

范德蒙行列式

D_{n - 1} = | \begin{array}{cccc} 1 & 1 & \dots & 1 \\ x_{2} & x_{3} & \dots & x_{n} \\ ⋮ & ⋮ & ⋮ \\ x_{2}^{n - 2} & x_{3}^{n - 2} & \dots & x_{n}^{n - 2} \end{array} | = \prod_{2 \leq j < i \leq n} (x_{i} - x_{j})

线性方程组

{\begin{aligned} a_{11} x_{1} + a_{12} x_{2} + \dots + a_{1 n} x_{n} & = b_{1} \\ a_{21} x_{1} + a_{22} x_{2} + \dots + a_{2 n} x_{n} & = b_{2} \\ \dots \dots \dots \\ a_{m 1} x_{1} + a_{m 2} x_{2} + \dots + a_{m n} x_{n} & = b_{m} \end{aligned}

物理公式

牛顿第一定律: $\sum {\vec{F}}_{i} = \frac{d \vec{v}}{d t} = 0$
牛顿第二定律: $\vec{F} = \frac{d m}{d t} \vec{v} + m \frac{d \vec{v}}{d t} = \frac{d m}{d t} \vec{v} + m \vec{a} = \frac{d m}{d t} \vec{v} + m \frac{d^{2} \vec{r}}{d t^{2}}$
牛顿第三定律: $\vec{F_{12}} = - \vec{F_{21}}$
质能守恒: $E = m c^{2}$

万有引力定律: $F = \frac{G M m}{r^{2}}$

G \frac{m M}{(r + h)^{2}} = m \frac{ν^{2}}{(r + h)}

基尔霍夫定律

{[\frac{\partial (Δ_{r} H_{m})}{\partial T}]}_{p} = \sum_{B} v_{B} C_{p, m} (B)

热力学第二定律

d S \geq \frac{δ Q}{T}

化学公式

离子反应与沉淀: $SO_{4}^{2 -} + Ba^{2 +} ⟶ BaSO_{4} ↓$

氮气氢气合成氨

N_{2} + 3 H_{2} \underset{催 化 剂}{\overset{高温、加压}{\overset{- ⇀}{↽ -}}} 2 NH_{3}

化学平衡常数: $Zn + 2 HCl (aq) = H_{2} + {ZnCl}_{2} (aq)$

K^{θ} = \frac{[p (H_{2}) / p^{θ}] [c ({ZnCl}_{2})]}{c^{2} (HC)}

生物公式

光合作用

$<! - - s w i g 204 - - >$

语法参考

MathJax basic tutorial and quick reference

长公式

小括号测试

$\alpha\beta$

$\alpha_\beta$

$\alpha_\beta = \gamma_\delta$

(\alpha\beta)

\(\alpha_\beta\)

\\(\alpha_\beta = \gamma_\delta\\)

$α β$

$α_{β}$

$α_{β} = γ_{δ}$

(\alpha\beta)

(\alpha_\beta)

$\alpha_\beta = \gamma_\delta$

下划线测试

w^{(l)}*{ij} = w^{(l)}*{ij} - \eta\frac{\partial E(W, b)}{\partial w^{(l)}_{ij}}

w^{(l)} * i j = w^{(l)} * i j - η \frac{\partial E (W, b)}{\partial w_{i j}^{(l)}}

CSS测试

文字增加背景色块站点配置文件,
主题配置文件

<span id="inline-blue">站点配置文件</span>, 
<span id="inline-purple">主题配置文件</span>

引用边框变色

如果没有安装成功, 那可能就是墙的原因. 建议下载 `Node.js` 直接安装.

关于更多基本操作和基础知识, 请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.

<p id="div-border-left-red">如果没有安装成功, 那可能就是墙的原因. 建议下载 `Node.js` 直接安装. </p>
<p id="div-border-top-blue">关于更多基本操作和基础知识, 请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.</p>

图形边框效果

Download Now

<a id="download" href="https://git-scm.com/download/win"><i class="fas fa-download"></i><span> Download Now</span>
</a>

更多tips可参考 blog

在文档中增加图标

https://fontawesome.com/v6/search

支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件.
一键部署
只需一条指令即可部署到Github Pages, 或其他网站
丰富的插件
Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript.

- <i class="fas fa-pencil-alt"></i> 支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件. </i>
- <i class="fas fa-cloud-upload-alt"></i> 一键部署
<i>只需一条指令即可部署到Github Pages, 或其他网站</i>
- <i class="fa fa-cog"></i>丰富的插件
<i>Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript. </i>

`<i class="fab fa-github"></i>`
`<i class="fab fa-github fa-lg"></i>`
`<i class="fab fa-github fa-2x"></i>`

图表绘制

hexo-tag-mermaid
hexo-tag-plantuml
hexo-tag-plantuml is a tag plugin for Hexo. It can work with plantuml to draw uml.
在Hexo中绘制uml图。
hexo-filter-flowchart
Generate flowchart diagrams for Hexo.

插入PDF

hexo-pdf

用法

Normal PDF

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

{% pdf ./bash_freshman.pdf %}

Google drive

{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

Slideshare

{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

预览

Normal PDF

Tips: slideshare 和 Google drive 大陆是无法直接访问的！

Mermaid

Markdown mermaid教程

mermaid

hexo-tag-mermaid hexo-tag-plantuml

Mermaid Live editer

需要用下面块包裹

{% mermaid %}
[内容]
{% endmermaid %}

先来几个演示


graph LR 
	source(*.java) --javac--> bytecode(*.class) 
	bytecode --java--> result(程序输出)


graph LR 
	type(type) -.-> type 
	type -.-> object(object) 
	type -.-> A(A) 
	type -.-> int(int) 
	A -.-> a((a)) 
	int -.-> i((i)) 
	object --> type 
	object --> A

flowchart

[docs - live editor]

{% mermaid %}
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
{% endmermaid %}


graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

{% mermaid %}
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}


flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Sequence diagram

[docs - live editor]

{% mermaid %}
sequenceDiagram
    loop every day
        Alice->>John: Hello John, how are you?
        John-->>Alice: Great!
    end
{% endmermaid %}


sequenceDiagram
    loop every day
        Alice->>John: Hello John, how are you?
        John-->>Alice: Great!
    end

Gantt diagram

[docs - live editor]

{% mermaid %}
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h
{% endmermaid %}


gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    
    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h
    
    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h

ER图


erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"

class

[docs - live editor]

{% mermaid %}
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
            
{% endmermaid %}


classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

State

[docs - live editor]

{% mermaid %}
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
{% endmermaid %}


stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Pie

[docs - live editor]

{% mermaid %}
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
            
{% endmermaid %}


pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

User Journey

[docs - live editor]

{% mermaid %}
  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
      
{% endmermaid %}


journey
  title My working day
  section Go to work
    Make tea: 5: Me
    Go upstairs: 3: Me
    Do work: 1: Me, Cat
  section Go home
    Go downstairs: 5: Me
    Sit down: 3: Me

Git Graph

[docs - live editor]

{% mermaid %}
    gitGraph
      commit
      commit
      branch develop
      checkout develop
      commit
      commit
      checkout main
      merge develop
      commit
      commit

{% endmermaid %}


gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

C4 diagram

[docs - live editor]

C4Context
  title System Context diagram for Internet Banking System
  Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Person(customerB, "Banking Customer B")      
    Person_Ext(customerC, "Banking Customer C", "desc")            

    Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  

    Enterprise_Boundary(b1, "BankBoundary") {
     
      SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      

      System_Boundary(b2, "BankBoundary2") {  
        System(SystemA, "Banking System A")  
        System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
      } 

      System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
      SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 

      Boundary(b3, "BankBoundary3", "boundary") {  
        SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
        SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
      }
    }
  }
  
  BiRel(customerA, SystemAA, "Uses")
  BiRel(SystemAA, SystemE, "Uses")
  Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
  Rel(SystemC, customerA, "Sends e-mails to")

  UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
  UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
  UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
  UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
  UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
  
  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")


C4Context
  title System Context diagram for Internet Banking System
  Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Person(customerB, "Banking Customer B")      
    Person_Ext(customerC, "Banking Customer C", "desc")
    Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")
    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
    Enterprise_Boundary(b1, "BankBoundary") {
      SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
      System_Boundary(b2, "BankBoundary2") {  
        System(SystemA, "Banking System A")  
        System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
      } 
      System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
      SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
      Boundary(b3, "BankBoundary3", "boundary") {  
        SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
        SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
      }
    }
  }
  BiRel(customerA, SystemAA, "Uses")
  BiRel(SystemAA, SystemE, "Uses")
  Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
  Rel(SystemC, customerA, "Sends e-mails to")
  UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
  UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
  UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
  UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
  UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Katex

Live editer

{% mermaid %}
graph LR
    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
{% endmermaid %}


graph LR
    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")

plant uml

PlantUML 是一个允许你快速编写一下图表的组件 :

Sequence diagram（时序图）
Usecase diagram
Class diagram（类图）
Activity diagram (here is the legacy syntax)
Component diagram
State diagram
Object diagram
Deployment diagram(BETA)
Timing diagram(BETA)

Hexo安装hexo-tag-plantuml插件，便能使其绘制的图表在博客上展示，其原理其实使用的是 PlantUML 提供的在线服务, 只是简单地将标签包裹的代码传给服务器, 获取生成的链接, 生成 img标签替换原来的代码区域.

plantUML在线编辑网站

可使用HTML标签将其嵌套

{% plantuml %}
title Relationships - Class Diagram

class Dwelling {
  +Int Windows
  +void LockTheDoor()
}

class Apartment
class House
class Commune
class Window
class Door

Dwelling <|-down- Apartment: Inheritance
Dwelling <|-down- Commune: Inheritance
Dwelling <|-down- House: Inheritance
Dwelling "1" *-up- "many" Window: Composition
Dwelling "1" *-up- "many" Door: Composition
{% endplantuml %}

{% plantuml %}
[内容]
{% endplantuml %}

时序图

{% plantuml %}
    Bob->Alice : hello
{% endplantuml %}

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response

用例图

{% plantuml %}
User -> (Start)
User --> (Use the application) : A small label

:Main Admin: ---> (Use the application) : This is\nyet another\nlabel
{% endplantuml %}

类图

{% plantuml %}
class Object << general >>
Object <|--- ArrayList

note top of Object : In java, every class\nextends this one.

note "This is a floating note" as N1
note "This note is connected\nto several objects." as N2
Object .. N2
N2 .. ArrayList

class Foo
note left: On last defined class
{% endplantuml %}

活动图

{% plantuml %}
@startuml
start

if (Graphviz 已安装?) then (yes)
  :处理所有\n绘制任务;
else (no)
  :仅处理
  __时序图__ 和 __活动__ 图;
endif

stop
@enduml
{% endplantuml %}

组件图

{% plantuml %}
@startuml

[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4

@enduml
{% endplantuml %}

状态图

{% plantuml %}
@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml
{% endplantuml %}

对象图

{% plantuml %}
@startuml PERT
left to right direction
' Horizontal lines: -->, <--, <-->
' Vertical lines: ->, <-, <->
title PERT: Project Name

map Kick.Off {
}
map task.1 {
    Start => End
}
map task.2 {
    Start => End
}
map task.3 {
    Start => End
}
map task.4 {
    Start => End
}
map task.5 {
    Start => End
}
Kick.Off --> task.1 : Label 1
Kick.Off --> task.2 : Label 2
Kick.Off --> task.3 : Label 3
task.1 --> task.4
task.2 --> task.4
task.3 --> task.4
task.4 --> task.5 : Label 4
@enduml
{% endplantuml %}

部署图

{% plantuml %}
@startuml
actor actor
agent agent
artifact artifact
boundary boundary
card card
cloud cloud
component component
control control
database database
entity entity
file file
folder folder
frame frame
interface  interface
node node
package package
queue queue
stack stack
rectangle rectangle
storage storage
usecase usecase
@enduml
{% endplantuml %}

嵌入iframe

code_dir

code_dir的默认值为路径downloads/code

code_dir

[donwload file](/downloads/code/demo.html)

Youtube视频

在浏览器中进入想分享的视频, 点击分享, 选择第一个“嵌入”按钮, 就可以得到嵌入博文中所需要的代码, 例如

<iframe width="560" height="315" src="https://www.youtube.com/embed/arj7oStGLkU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

bilibili视频

类似油管视频, 将鼠标移到B站视频下方分享按钮, 就会出来一段嵌入代码

<iframe src="//player.bilibili.com/player.html?aid=16091118&cid=26251892&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

统一尺寸控制

在Freemind主题下source/css/my.css中, 加入以下选择器

.auto-resizable-iframe {
  /*max-width: 540px;*/
  max-width: 100%;
  margin: 0px auto;
}
.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}
.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

然后将前面iframe放入两层div元素里, 最外层元素的类设为auto-resizable-iframe, 删除iframe中的宽度长度控制, 即

<div class="auto-resizable-iframe">
  <div>
    <iframe src="https://www.youtube.com/embed/arj7oStGLkU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

两层div使得画面尺寸是响应式的. 比起直接黏贴iframe稍微麻烦一些, 但是好看的多.

本地iframe

<iframe width="100%" scrolling=no height="800" frameborder="0" src="/downloads/code/demo.html"></iframe>

iframe 自适应高度的代码如下

<script type="text/javascript">
function SetCwinHeight(){
  var iframeid = document.getElementById("iframeid"); //iframe id
  if (document.getElementById) {
    if (iframeid && !window.opera) {
      if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
        iframeid.height = iframeid.contentDocument.body.offsetHeight + 50;
      } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
        frameid.height = iframeid.Document.body.scrollHeight + 50;
      }
    }
  }
}
</script>

<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" scrolling=no height="1000" frameborder="0" src="https://www.17lai.site/iframe-html/"></iframe>

URL 卡片

valkyr url card

a simple url card display plugin for hexo

{% valkyrurl
[url=https://github.com/toastsgithub/hexo-valkyr-url]
[title="valkyr url card"]
[avatar=https://blog.17lai.site/medias_webp/cover/hexo.webp]
[desc="a simple url card display plugin for hexo"]
%}

{% valkyrurl [url=http://example.com] [otherOpt=value] %}

avatar image that describe your link (optional)
title title
desc description
url destination when you click image url or title
空格要用引号包裹起来！

原作者失踪很久了，个人定制修改了一个自用版本，原版把 CSS 内嵌，引起不必要的体积增大，性能问题。修改版把 CSS 部分独立出来了，方便定制修改！
hexo-matery-url

BILIBILI卡片

{% bilicard BV1sr4y1K7Be %}

这个接口容易获取失败，网络超时错误

{% bilicard your_video_id %}

hexo-github-card

{% githubCard user:your_user [repo:your_repo] [width:400] [height:200] [theme:default] [client_id:your_client_id] [client_secret:your_client_secret] [align:text-align_position] %}

{% githubCard user:appotry %}

{% githubCard user:appotry repo:hexo-github-card %}

hexo-douban-card

强烈推荐这个，提的几个 issue 作者回复很快，问题修复也非常快。
支持爬取 douban 数据本地缓存，图片代理地址自定义，爬取 cookie 自定义！

插件配置

需要在 _config.yml 中配置 doubanCard，但这并不是必选项，如果你遇到了某些需要登录的豆瓣网址，那么请填写 cookie，如果你遇到图片代理失效的问题，请自行替换 imgProxy。未经验证的代理网址可以参考这个 issue：图像加速服务weserv地址被reset了，不能显示图片

doubanCard:
  cookie: ABCDEFGHIJKLMNOPQRSTUVWXYZ
  imgProxy: https://images.weserv.nl/?url=

上映时间: 2014-08-07(中国大陆)

{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

Github Stats Card

Github https://github.com/appotry/github-readme-stats 参考代码
Docker Hub https://hub.docker.com/r/bloodstar/github-readme-stats
更详细参数使用说明，请参考 Github 仓库 Readme 说明
由于 github 对 api 调用次数有限制，最好自建服务器使用！

自建 Docker 服务

docker-compose.yml

version: "3"
services:
  grs:
    image: bloodstar/github-readme-stats:latest
    container_name: grs
    environment:
      PAT_1: ghp_****
      CACHE_SECONDS: 600
    ports:
      - 9000:9000

docker run

$ docker run \
  --name grs \
  --restart=unless-stopped \
  -d \
  -e PAT_1="ghp_****" \
  bloodstar/github-readme-stats

Vercel 和 docker 调用差异

和Vercel 部署调用不同，不需要 /api

这里vercel 和 docker 调用接口一致是比较容易实现的。为了方便和上游同步，这里就没有做修改。

# Vercel 部署调用
![](https://ghstats.17lai.site/api?username=appotry)

# Docker 部署调用
![](https://ghstats.17lai.site/?username=appotry)

[![Appotry's GitHub stats](https://ghstats.17lai.site/?username=appotry)](https://github.com/appotry/github-readme-stats)

GitHub Stats Card

[![Appotry's GitHub stats](https://ghstats.17lai.site/?username=appotry)](https://github.com/appotry/github-readme-stats)

<picture>
  <source
    srcset="https://ghstats.17lai.site/?username=appotry&show_icons=true&theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://ghstats.17lai.site/?username=appotry&show_icons=true"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://ghstats.17lai.site/?username=appotry&show_icons=true" />
</picture>

GitHub Repo Pins

[![Readme Card](https://ghstats.17lai.site/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

GitHub Gist Pins

[![Gist Card](https:///ghstats.17lai.site/gist?id=bbfce31e0217a3689c8d961a356cb10d)](https://gist.github.com/Yizack/bbfce31e0217a3689c8d961a356cb10d/)

Top Languages Card

[![Top Langs](https://ghstats.17lai.site/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

WakaTime Stats Card

[![Harlok's WakaTime stats](https://ghstats.17lai.site/wakatime?username=ffflabs)](https://github.com/anuraghazra/github-readme-stats)

hexo-feed-new

详细见支持RSS分类订阅

hexo-lazyload-image

详细见图片懒加载

插入音乐和视频

hexo-tag-aplayer
hexo-tag-dplayer
最近做减法，去掉不必要的功能，只使用下面这个插件。
hexo-tag-mmedia 推荐使用

插入音乐

官方教程

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: (可选) 音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: (可选) 自动播放，移动端浏览器暂时不支持此能
width:xxx: (可选) 播放器宽度 (默认: 100%)
lrc:xxx: （可选）歌词文件 URL #### 单曲附带歌词显示

{% aplayer "Hotel California" "Camille and Kennerly" "https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.mp3" "https://cdn.17lai.site/media/music/Hotel%20California/Hotel%20California.webp" "lrc:https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.lrc" %}

音乐播放列表

{% aplayerlist %}
{
    "narrow": false,                          // （可选）播放器袖珍风格
    "autoplay": true,                         // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",                         // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,                             // （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,                            // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",	                      // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",                    // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": true, 
    "mode": "random", 
    "showlrc": 3, 
    "mutex": true, 
    "theme": "#e6d0b2",
    "preload": "metadata", 
    "listmaxheight": "513px", 
    "music": [
        {
            "title": "Hotel California",
            "author": "Camille and Kennerly",
            "url": "https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.mp3",
            "pic": "https://cdn.17lai.site/media/music/Hotel%20California/Hotel%20California.webp",
            "lrc": "https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.lrc"
        },
        {
            "title": "Sold Out",
            "author": "Diamonds",
            "url": "https://cdn.17lai.site/media/music/Diamonds/05%20Sold%20Out.mp3",
            "pic": "https://cdn.17lai.site/media/music/Diamonds/Diamonds.jpg"
        }
    ]
}
{% endaplayerlist %}

插入视频

官方教程

{% dplayer key=value ... %}
例：
{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=true" "preload=metadata" "hotkey=true" %}

有关的选项列表如下:

选项	默认值	描述
url	必须值	视频地址
loop	`false`	视频循环播放
volume	`0.7`	播放器音量
hotkey	`true`	开启热键
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
logo	`-`	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
mutex	`true`	该选项开启时，如果同页面有其他播放，该播放器会暂停
highlight	`[]`	自定义进度条提示点
preload	`auto`	视频文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

注：如果使用腾讯视频、优酷视频等在线视频网站的资源，需要先进行视频地址解析，如点量视频解析，获取到实际的视频地址。

在使用优酷或者腾讯视频时可以直接复制分享代码到文章中，如：

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

dplayer

{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=false" "preload=metadata" "hotkey=true" %}

iframe

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

hexo-tag-mmedia使用

官方教程

audio

此部分请熟读 Audio 相关介绍
目前主题中不可用

使用 : 或 = 分割。
所有 <audio> 标签的原生参数均可添加，只要能写进去就可以。
具体能否实现相关标准，取决于客户端浏览器。

{% mmedia "audio" "src:a.mp3" %}

{% mmedia "audio" "src:https://baidu.com/a.mp3" "autoplay:true" %}

video

此部分请熟读 Video 相关介绍
目前主题中不可用

使用 : 或 = 分割。
所有 <video> 标签的原生参数均可添加，只要能写进去就可以。
具体能否实现相关标准，取决于客户端浏览器。

{% mmedia "video" "src:a.mp4" %}

{% mmedia "video" "src:https://baidu.com/a.mp4" "autoplay:true" %}

MetingJS

此部分请熟读 MetingJS 文档

option	default	description
id	require	song id / playlist id / album id / search keyword
server	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	require	`song`, `playlist`, `album`, `search`, `artist`
auto	options	music link, support: `netease`, `tencent`, `xiami`
fixed	`false`	enable fixed mode
mini	`false`	enable mini mode
autoplay	`false`	audio autoplay
theme	`#2980b9`	main color
loop	`all`	player loop play, values: ‘all’, ‘one’, ‘none’
order	`list`	player play order, values: ‘list’, ‘random’
preload	`auto`	values: ‘none’, ‘metadata’, ‘auto’
volume	`0.7`	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex	`true`	prevent to play multiple player at the same time, pause other players when this player start play
lrc-type	`0`	lyric type
list-folded	`false`	indicate whether list should folded at first
list-max-height	`340px`	list max height
storage-name	`metingjs`	localStorage key that store player setting

Documentation for APlayer can be found at https://aplayer.js.org/#/home?id=options

单曲

{% mmedia "meting" "auto=https://y.qq.com/n/ryqq/songDetail/0005RQAO3FqG5K" %}

{% mmedia "meting" "auto=https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html" %}

{% mmedia "meting" "server=netease"	"type=playlist"	"id=60198" %}

Aplayer

详细参数表：

参数	默认	解释
name	-	audio name
artist	-	audio artist
url	-	audio url
cover	-	audio cover
lrc	-	audio lrc
theme	-	audio theme
type	auto	audio type 可选 ‘auto’, ‘hls’, ‘normal’
autoplay	false	autoplay
loop	‘all’	player loop play, values: ‘all’, ‘one’, ‘none’
order	‘list’	player play order, values: ‘list’, ‘random’
volume	0.7	default volume,
tlistMaxHeight	-	list max height

不在表格内的参数请使用下面 JSON 类型的参数。

mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 APlayer 完全一致。

单曲

{% mmedia "aplayer" "name:Hotel California" "artist:Camille and Kennerly" "url:https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.mp3" "lrc:https://cdn.17lai.site/media/music/Hotel%20California/01%20Hotel%20California.lrc" "cover:https://cdn.17lai.site/media/music/Hotel%20California/Hotel%20California.webp" "volume:0.66" %}

列表

例子

{% mmedias "aplayer" "autoplay:false" %}
{
  "volume": 0.8,
  "audio":
  [
    {
      "name": "name1",
      "artist": "artist1",
      "url": "url1.mp3",
      "cover": "cover1.jpg",
      "lrc": "lrc1.lrc",
      "theme": "#ebd0c2"
    },
    {
      "name": "name2",
      "artist": "artist2",
      "url": "url2.mp3",
      "cover": "cover2.jpg",
      "lrc": "lrc2.lrc",
      "theme": "#46718b"
    }
  ]
}
{% endmmedias %}

Dplayer

此部分请熟读 DPlayer 文档

{% mmedia "dplayer" "url:a.mp4" %}

{% mmedias "dplayer" "flv:" "url:https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4" %}
{
  "contextmenu":
  [
    {
      text: "custom1",
      link: "https://github.com/DIYgod/DPlayer"
    }
  ]
}
{% endmmedias %}

{% mmedia "dplayer" "url:https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" %}

{% mmedia "dplayer" "url:https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" %}

{% mmedias "dplayer" %}
{
  video: 
  {
    url: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
  }
}
{% endmmedias %}

哔哩哔哩

详细参数表：

参数	默认	解释
aid	-	aid
bvid	-	bvid，与 aid 同时出现时以 bvid 为准
page	1	page
danmaku	true	是否有弹幕 ture or false
allowfullscreen	allowfullscreen	允许全屏， allowfullscreen 或 true 允许，其他选项不允许
sandbox	见配置	iframe sandbox
width	100%	css 属性
max_width	850px	css 属性
margin	auto	css 属性

mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。

{% mmedia "bilibili" "bvid:BV1fs411S7u7" %}

西瓜视频

详细参数表：

参数	默认	解释
xid	-	西瓜视频的 ID，就是那一串数字
id	-	一般情况下不需要填写
autoplay	false	autoplay
startTime	0	开始时间，秒
allowfullscreen	allowfullscreen	允许全屏， allowfullscreen 或 true 允许，其他选项不允许
sandbox	见配置	iframe sandbox
width	100%	css 属性
max_width	850px	css 属性
margin	auto	css 属性

{% mmedia "xigua" "xid=6925997698269053453" %}

{% mmedia "xigua" "xid:6925997698269053453" "autoplay:true" %}

{% mmedia "xigua" "xid=6925997698269053453" %}

ArtPlayer

此部分请熟读 ArtPlayer 文档

使用 : 或 = 分割。

详细参数表：

参数	默认	解释
url	-	url
title	-	title
poster	-	poster
type	-	type
autoplay	false	video autoplay
loop	false	video loop
volume	0.7	default volume
style	-	style

上面有一个比较特殊的参数 flv，这里单独解释一下，这个参数是用于引入其他 js 文件的，目前支持的有： hls dash shaka_dash flv webtorrent ，上述参数可多个一起使用，如果后面带有 js 地址，将直接使用，否则将使用 _config.yml 配置或插件默认配置，如：

{% mmedia "artplayer" "flv:" "url:a.flv" %}

{% mmedias "artplayer" "flv:" "hls:https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js" %}
{
  ...
}
{% endmmedias %}

{% mmedia "artplayer" "url:https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4" %}

{% mmedias "artplayer" "flv:"  %}
{
  url: "https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4"
}
{% endmmedias %}

{% mmedia "artplayer" "url:https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" %}

{% mmedias "artplayer" %}
{
  url: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"
}
{% endmmedias %}

bilibili

{% mmedia "bilibili" "bvid:BV1fs411S7u7" %}

xigua

{% mmedia "xigua" "xid=6925997698269053453" %}

artplayer

{% mmedias "artplayer" %}
{
  url: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"
}
{% endmmedias %}

hexo-tag-videojs

录屏：OBS OBS Studio录屏教程
视频切片：FFmpeg
托管：任何一个支持静态资源访问的都可以，比如跑个 Nginx
Hexo 插件：hexo-tag-videojs

Video标签需要加载完整个视频文件（如mp4）才能开始播放，拖动不便。
使用bilibili服务，审查手段未知，可能看你白嫖就封号了
自托管ts切片综合考虑是最佳方案！

FFmpeg m3u8 切片

要使用FFmpeg将一个MP4文件制作为M3U8文件并使用TS分片，您可以按照以下步骤进行操作：

安装FFmpeg

首先，您需要安装FFmpeg。可以在FFmpeg的官方网站上下载适用于您的操作系统的二进制文件。

制作M3U8文件和TS分片

使用以下命令，将您的MP4文件制作为M3U8文件和TS分片：

ffmpeg -i input.mp4 -codec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_list output.m3u8 -segment_time 10 output%03d.ts

-i input.mp4：指定输入文件为input.mp4。
-codec copy：使用与输入文件相同的编解码器。
-vbsf h264_mp4toannexb：将MP4的H.264视频流转换为MPEG-TS格式，以便进行分片。
-map 0：将所有输入流映射到输出中。
-f segment：指定输出格式为segment，表示进行分段。
-segment_list output.m3u8：指定输出的M3U8文件名为output.m3u8。
-segment_time 10：指定每个TS分片的时长为10秒。
output%03d.ts：指定输出的TS分片文件名为output001.ts、output002.ts等。

执行命令后，FFmpeg将开始处理您的视频，并将其制作为M3U8文件和多个TS分片。

检查输出

完成后，您可以在当前目录下找到一个名为output.m3u8的文件，以及一系列以output001.ts、output002.ts等命名的TS分片文件。您可以使用任何支持M3U8格式的播放器来播放此视频。

脑图

原作者记录

如果你的博客安装了 pjax 请开启此项配置

hexo_markmap:
  pjax: true

思维导图

统计学习方法

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

markdown 各种其它语法插件，latex公式支持，mermaid图表，plant uml图表，URL卡片，bilibili卡片，github卡片，豆瓣卡片，插入音乐和视频，插入脑图，插入PDF，嵌入iframe

笔记系列

Note分类RSS订阅

Here is the footnote. ↩︎
Here’s one with multiple blocks.
Subsequent paragraphs are indented to show that they ↩︎
Footnote can have markup
and multiple paragraphs. ↩︎
Footnote text. ↩︎ ↩︎
Text of inline footnote ↩︎

夜法之书

https://blog.17lai.site/posts/cf0f47fd/

本博客所有文章除特別声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源夜法之书 !

mermaid hexo plantuml mathjax

Markdown 插件

常用标记

footnote

综合测试

h3 Heading 😎

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

Typographic replacements

Emphasis

Blockquotes

Lists

Code

Tables

Links

Images

Plugins

Subscript / Superscript

Markdown 语法

markdown 注释

基于 HTML 标签的注释

基于 HTML 样式

通过 Markdown 解析达到注释效果

tag button

Usage

Examples

Button with text & title

Button with icon

Button with text & icon

Button inside text

Button inside other tag

Button margin

Button with relative URL

Button with absolute URL

tag note

Usage

Examples

Header

Default Header

Primary Header

Info Header

Success Header

Warning Header

Danger Header

No icon note

Details and summary (No icon)

Codeblock in note

Lists in note

Table in Note

tag label

tag group-image

Usage

Example

Tabs with 3rd tab selected

Tabs with no tab selected

Tabs with custom labels

Tabs with icons and labels

Tabs permalinks test

Tabs with other tags

hexo-admonition

安装插件

使用指南

支持的类型

语法说明

公式测试

数学公式

内联公式

块公式

物理公式

化学公式

生物公式

语法参考

长公式

小括号测试

下划线测试

CSS测试

引用边框变色

图形边框效果

在文档中增加图标