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>`
  • 29th => 29<sup>th</sup>
  • H20 => H<sub>2</sub>O
  • marked => <mark>inserted</mark>
  • inserted => <ins>inserted</ins>

markdown-it-task-checkbox

和主题某些css冲突,停用

- [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
  • [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
  • [x] works
  • [x] works too
Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: |  :white_check_mark: | :heavy_check_mark:
Function MySQL / MariaDB PostgreSQL SQLite
substr ✔️ ✔️

emoji

:smile::smirk::sunny:

😄😏☀️

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.

markdown-it-container

::: warning
*here be dragons*
:::

here be dragons

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-imsize

![test](https://cimg1.17lai.site/data/2021/10/1220211012022352.png)
![test](https://cimg1.17lai.site/data/2021/10/1220211012022352.png =100x200)

test

test

公式测试

采用**markdown-it-latex2img**

1 数学公式

1.1 内联公式

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

  • 勾股定理:
  • 等差数列求和公式:
  • 牛顿-莱布尼茨公式:
  • 二项分布:

1.2 块公式

正态分布:

斐波那契数列,前后两项的比值逐渐收敛到黄金分割比例

因式分解

狄利克雷函数

高斯公式

范德蒙行列式

线性方程组

2 物理公式

  • 牛顿第一定律:
  • 牛顿第二定律:
  • 牛顿第三定律:
  • 质能守恒:

万有引力定律:

基尔霍夫定律

热力学第二定律

3 化学公式

离子反应与沉淀:

氮气氢气合成氨

化学平衡常数:

4 生物公式

光合作用

5 语法参考

MathJax basic tutorial and quick reference

长公式

小括号测试

$\alpha\beta$

$\alpha_\beta$

$\alpha_\beta = \gamma_\delta$

(abctest)

\(abctest\)

\\(abctest\\)

(abctest)

(abctest)

\(abctest\)

下划线测试

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

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="fa fa-download"></i><span> Download Now</span>
</a>

更多tips可参考 blog

在文档中增加图标

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

github
github
github

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

图表绘制

Mermaid

Markdown mermaid教程

mermaid

hexo-tag-mermaidhexo-tag-plantuml

需要用下面块包裹

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

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 ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit }
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

class

[docs - live editor]

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}
classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}
classDiagram class Shape{ <> noOfVertices draw() } class Color{ <> RED BLUE GREEN WHITE BLACK }

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
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{% endmermaid %}
pie "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

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

用例图

User -> (Start)
User --> (Use the application) : A small label

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

类图

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

活动图

@startuml
start

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

stop
@enduml

组件图

@startuml

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

@enduml

状态图

@startuml

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

State1 -> State2
State2 --> [*]

@enduml

对象图

@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

部署图

@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

URL 卡片

valkyr ssh manager
valkyr-ssh, a simple commandline tool to help you store ssh login address
{% valkyrurl
[url=https://github.com/toastsgithub/valkyr-ssh]
[title="valkyr ssh manager"]
[avatar=http://images2.dzmtoast.top/post-cover/github-logo_hub2899c31b6ca7aed8d6a218f0e752fe4_46649_1200x1200_fill_box_center_2.png]
[desc="valkyr-ssh, a simple commandline tool to help you store ssh login address"]
%}
{% 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
  • 空格要用引号包裹起来!

BILIBILI卡片

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

{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

插入音乐和视频

插入音乐

官方教程

{% 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 地址

单曲附带歌词显示


音乐播放列表

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

插入视频

官方教程

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

西瓜视频

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

详细参数表:

参数 默认 解释
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" %}

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

脑图

原作者记录

{"t":"heading","d":1,"p":{"lines":[0,1]},"v":"思维导图?","c":[{"t":"heading","d":2,"p":{"lines":[2,3]},"v":"使用现有的插件或组件?","c":[{"t":"heading","d":3,"p":{"lines":[3,4]},"v":"Mermaid:更偏向流程图"},{"t":"heading","d":3,"p":{"lines":[4,5]},"v":"Kityminder","c":[{"t":"heading","d":4,"p":{"lines":[5,6]},"v":"现成hexo插件有些小问题。"},{"t":"heading","d":4,"p":{"lines":[6,7]},"v":"二次开发,失败"}]}]},{"t":"heading","d":2,"p":{"lines":[7,8]},"v":"找寻相关项目?","c":[{"t":"heading","d":3,"p":{"lines":[8,9]},"v":"Markmap大法!","c":[{"t":"heading","d":4,"p":{"lines":[9,10]},"v":"直接弄,失败"},{"t":"heading","d":4,"p":{"lines":[10,11]},"v":"使用jsdom,失败"},{"t":"heading","d":4,"p":{"lines":[11,12]},"v":"寻找现成库,成功"}]}]},{"t":"heading","d":2,"p":{"lines":[12,13]},"v":"咕咕咕咕咕咕咕咕咕咕咕咕"},{"t":"heading","d":2,"p":{"lines":[13,14]},"v":"凑一下行数让版面好看点"}]}
{% markmap 250px %}
# 思维导图?
## 使用现有的插件或组件?
### Mermaid:更偏向流程图
### Kityminder
#### 现成hexo插件有些小问题。
#### 二次开发,失败
## 找寻相关项目?
### Markmap大法!
#### 直接弄,失败
#### 使用jsdom,失败
#### 寻找现成库,成功
## 咕咕咕咕咕咕咕咕咕咕咕咕
## 凑一下行数让版面好看点
{% endmarkmap %}

  1. Here is the footnote. ↩︎

  2. Here’s one with multiple blocks.

    Subsequent paragraphs are indented to show that they ↩︎


文章作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
 上一篇
Earthly 一个更加强大的镜像构建工具 Earthly 一个更加强大的镜像构建工具
Earthly 是一个更加高级的 Docker 镜像构建工具,Earthly 通过自己定义的 Earthfile 来代替传统的 Dockerfile 完成镜像构建。Makefile + Dockerfile = Earthfile
2021-11-01
下一篇 
第一次使用VS Code时你应该知道的一切配置 第一次使用VS Code时你应该知道的一切配置
VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。
2021-10-18
  目录