Markdown 插件 常用标记 - 29^th^ => `29<sup>th</sup>`
- H~2~0 => `H<sub>2</sub>O`
- ==marked== => `<mark>inserted</mark>`
- ++inserted++ => `<ins>inserted</ins>`
29th => 29<sup>th</sup>
H2 0 => H<sub>2</sub>O
marked => <mark>inserted</mark>
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>
- [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
目前仅支持多列合并
| 标题1 | 标题2 |
| ------------ | ------------ |
| 合并第一行 ||
| 第二行第一列 | 第二行第二列 |
colspan >
or empty cell
:
rowspan ‘^’
| 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
Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: | :white_check_mark: | :heavy_check_mark:
Function MySQL / MariaDB PostgreSQL SQLite substr ✔️ ✅ ✔️
😄😏☀️
*[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 .
::: warning
*here be dragons*
:::
here be dragons
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, and another.
belong to the previous footnote.
![test](https://cimg1.17lai.site/data/2021/10/1220211012022352.png)
![test](https://cimg1.17lai.site/data/2021/10/1220211012022352.png =100x200)
综合测试 直接访问 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.You will like those projects!
h3 Heading 😎 h4 Heading h5 Heading h6 Heading Horizontal Rules Typographic replacements Enable typographer option to see result.
© © ® ® ™ ™ (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
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:
foo bar Code Inline code
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code “fences”
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
Like links, Images also have a footnote style syntax
With a reference later in the document defining the URL location:
Plugins The killer feature of markdown-it
is very effective support ofsyntax plugins .
Classic markup: 😉 :crush: 😢 :tear: 😆 😋
Shortcuts (emoticons): 😃 😦 😎 😉
see how to change output with twemoji.
Inserted text
Marked text
Footnote 1 link.
Footnote 2 link.
Inline footnote definition.
Duplicated footnote reference.
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 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 解析达到注释效果 这是一段没有被注释的文字
Usage {% button url, text, icon [class], [title] %}
or
{% 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 Text Button with text & title {% btn #, Text %}{% btn #, Text & Title,, Title %}
Text Text & Title {% 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
{% note info %}
{% btn #, Text & Icon, home fa-fw %}
{% btn #,, home, Title %}{% btn #, Text %}
[Link](#)
{% endnote %}
<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>
<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>
<div class="center">{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}</div>
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 %}
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}
{% 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 %}
#### Table in Note
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}
Table in Note 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 不能以 @ 开头
tag group-image 组图 移植自 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 %}
更多参考这里
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 {% 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 {% 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 {% 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 {% 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 {% 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 .
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 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 个空格,可以有多行,最后用空行结束此标记。
嵌套链接及引用块
欢迎访问我的博客链接:夜法之书
这里嵌套一行引用信息。
Hexo-admonition 插件使用示例
这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note,并设置了自定义标题。
提示内容开头留 4 个空格,可以有多行,最后用空行结束此标记。
公式测试 采用**markdown-it-latex2img **
Demo
数学公式 内联公式 开头的$
必须在其右边紧跟一个非空格字符,而结尾的$
必须在其左边紧接一个非空格字符,并且不能紧跟一个数字。
勾股定理:a 2 + b 2 = c 2 等差数列求和公式:S n = n a 1 + n ( n − 1 ) 2 d , n ∈ N ∗ 牛顿-莱布尼茨公式:∫ 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 … … , n 块公式 正态分布X ∼ N ( μ , σ 2 ) :
f ( x ) = 1 2 π σ e − ( x − μ ) 2 2 σ 2 斐波那契数列A n = A n − 1 + A n − 2 ,前后两项的比值逐渐收敛到黄金分割比例
lim n → ∞ A n − 1 A n = 5 − 1 2 . 因式分解
( x − 1 ) ( x − 3 ) = x 2 − 4 x + 3 = x 2 − 4 x + 4 − 1 = ( x − 2 ) 2 − 1 狄利克雷函数
D ( x ) = { 1 , x ∈ Q 0 , x ∉ Q 高斯公式
∭ Ω ( ∂ P ∂ x + ∂ Q ∂ y + ∂ R ∂ z ) d v = ∬ Σ P d y d z + Q d z d x + R d x d y 范德蒙行列式
D n − 1 = | 1 1 … 1 x 2 x 3 … x n ⋮ ⋮ ⋮ x 2 n − 2 x 3 n − 2 … x n n − 2 | = ∏ 2 ≤ j < i ≤ n ( x i − x j ) 线性方程组
{ a 11 x 1 + a 12 x 2 + ⋯ + a 1 n x n = b 1 a 21 x 1 + a 22 x 2 + ⋯ + a 2 n x n = b 2 ⋯ ⋯ ⋯ a m 1 x 1 + a m 2 x 2 + ⋯ + a m n x n = b m 物理公式 牛顿第一定律:∑ F → i = d v → d t = 0 牛顿第二定律:F → = d m d t v → + m d v → d t = d m d t v → + m a → = d m d t v → + m d 2 r → d t 2 牛顿第三定律:F 12 → = − F 21 → 质能守恒:E = m c 2 万有引力定律:F = G M m r 2
G m M ( r + h ) 2 = m ν 2 ( r + h ) 基尔霍夫定律
[ ∂ ( Δ r H m ) ∂ T ] p = ∑ B v B C p , m ( B ) 热力学第二定律
d S ≥ δ Q T 化学公式 离子反应与沉淀:SO A 4 A 2 − + Ba A 2 + ⟶ BaSO A 4 ↓
氮气氢气合成氨
高 温 、 加 压 催 化 剂 N A 2 + 3 H A 2 ↽ − − ⇀ 高温、加压 催 化 剂 2 NH A 3 化学平衡常数:Zn + 2 HCl ( aq ) = H 2 + ZnCl 2 ( aq )
K θ = [ p ( H 2 ) / p θ ] [ c ( ZnCl 2 ) ] c 2 ( HC ) 生物公式 光合作用
 < ! − − s w i g  205 − − >
语法参考 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 − η ∂ E ( W , b ) ∂ 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
支持MarkdownHexo 支持 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>`
图表绘制 插入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教程
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 是一个允许你快速编写一下图表的组件 :
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
[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>
{% 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
titledesc
descriptionurl
destination when you click image url or title空格要用引号包裹起来! 原作者失踪很久了,个人定制修改了一个自用版本,原版把 CSS 内嵌,引起不必要的体积增大,性能问题。修改版把 CSS 部分独立出来了,方便定制修改!
hexo-matery-url
BILIBILI 视频 {% bilicard BV1sr4y1K7Be %}
这个接口容易获取失败,网络超时错误
{% bilicard your_video_id %}
{% 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 %}
强烈推荐这个,提的几个 issue 作者回复很快,问题修复也非常快。
支持爬取 douban 数据本地缓存,图片代理地址自定义,爬取 cookie 自定义!
插件配置 需要在 _config.yml
中配置 doubanCard
,但这并不是必选项,如果你遇到了某些需要登录的豆瓣网址,那么请填写 cookie,如果你遇到图片代理失效的问题,请自行替换 imgProxy。未经验证的代理网址可以参考这个 issue:图像加速服务weserv地址被reset了,不能显示图片
doubanCard:
cookie: ABCDEFGHIJKLMNOPQRSTUVWXYZ
imgProxy: https://images.weserv.nl/?url=
{% 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)
详细见 支持RSS分类订阅
hexo-lazyload-image 详细见 图片懒加载
插入音乐和视频 插入音乐 官方教程
{% 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 "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 height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>
官方教程
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 %}
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 请开启此项配置
思维导图
统计学习方法
系列教程 全部文章RSS订阅
Hexo系列 HexoRSS分类订阅
[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程
markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe 笔记系列 Note分类RSS订阅