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

和主题某些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:

ab
>1
2

rowspan ‘^’

ab
12
^^4
|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |
MarkdownRendered HTML
ItalicItalic\
- 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
TaskTime requiredAssigned toCurrent StatusFinished
Calendar Cache> 5 hours@georgehrkein progress- [x] ok?
Object Cache> 5 hours@georgehrkein progress[x] item1 [ ] item2
Object Cache> 5 hours@georgehrkein progress- [x] item1- [ ] item2
Object Cache> 5 hours@georgehrkein progress[x] item1[ ] item2
  • [x] works
  • [x] works too
Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: |  :white_check_mark: | :heavy_check_mark:
FunctionMySQL / MariaDBPostgreSQLSQLite
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**

Demo

1 数学公式

1.1 内联公式

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

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

1.2 块公式

正态分布:

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

因式分解

狄利克雷函数

高斯公式

范德蒙行列式

线性方程组

2 物理公式

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

万有引力定律:

基尔霍夫定律

热力学第二定律

3 化学公式

离子反应与沉淀:

氮气氢气合成氨

化学平衡常数:

4 生物公式

光合作用

5 语法参考

MathJax basic tutorial and quick reference

长公式

img

img

img

小括号测试

$\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}}

img

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>



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

用例图

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

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 #### 单曲附带歌词显示
{% 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必须值视频地址
loopfalse视频循环播放
volume0.7播放器音量
hotkeytrue开启热键
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
logo-在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
mutextrue该选项开启时,如果同页面有其他播放,该播放器会暂停
highlight[]自定义进度条提示点
preloadauto视频文件预载入模式,可选项: 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 文档

optiondefaultdescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
typerequiresong, playlist, album, search, artist
autooptionsmusic link, support: netease, tencent, xiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: ‘all’, ‘one’, ‘none’
orderlistplayer play order, values: ‘list’, ‘random’
preloadautovalues: ‘none’, ‘metadata’, ‘auto’
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage 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
typeautoaudio type 可选 ‘auto’, ‘hls’, ‘normal’
autoplayfalseautoplay
loop‘all’player loop play, values: ‘all’, ‘one’, ‘none’
order‘list’player play order, values: ‘list’, ‘random’
volume0.7default 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 为准
page1page
danmakutrue是否有弹幕 ture or false
allowfullscreenallowfullscreen允许全屏, allowfullscreen 或 true 允许,其他选项不允许
sandbox配置iframe sandbox
width100%css 属性
max_width850pxcss 属性
marginautocss 属性

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

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

西瓜视频

详细参数表:

参数默认解释
xid-西瓜视频的 ID,就是那一串数字
id-一般情况下不需要填写
autoplayfalseautoplay
startTime0开始时间,秒
allowfullscreenallowfullscreen允许全屏, allowfullscreen 或 true 允许,其他选项不允许
sandbox配置iframe sandbox
width100%css 属性
max_width850pxcss 属性
marginautocss 属性
{% mmedia "xigua" "xid=6925997698269053453" %}
{% mmedia "xigua" "xid:6925997698269053453" "autoplay:true" %}
{% mmedia "xigua" "xid=6925997698269053453" %}

ArtPlayer

此部分请熟读 ArtPlayer 文档

  • 使用 := 分割。

详细参数表:

参数默认解释
url-url
title-title
poster-poster
type-type
autoplayfalsevideo autoplay
loopfalsevideo loop
volume0.7default 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

**xigua**
**artplayer**

脑图

原作者记录

{% markmap 250px %}
# 思维导图?
## 使用现有的插件或组件?
### Mermaid:更偏向流程图
### Kityminder
#### 现成hexo插件有些小问题。
#### 二次开发,失败
## 找寻相关项目?
### Markmap大法!
#### 直接弄,失败
#### 使用jsdom,失败
#### 寻找现成库,成功
## 咕咕咕咕咕咕咕咕咕咕咕咕
## 凑一下行数让版面好看点
{% endmarkmap %}

系列教程

全部文章RSS订阅

Hexo系列 HexoRSS分类订阅

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

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

笔记系列 Note分类RSS订阅

经历了很长时间,使用了各种各样的方案,最终选择了一种相对完美的方式。docker私有部署运行的joplin,使用markdown语法,github作为图床,picgo作为图像自动上传后端,pypora作为MD编辑器,Snipaste作为截图工具。后备gitlab ee selfhost备份,自建图床VPS多线负载均衡。cloudflare partner cdn加速,jsdelivr加速。

  • pigo图床搭建与配置
  • Joplin教程
  • Snipaste截图工具
  • Typora 作为Markdown编辑器最强
  • Joplin和使用
  • Joplin同步与备份
  • Joplin导入与导出
  • Joplin安装使用,调用外部编辑器,网盘同步等等
  • Joplin简明教程
  • markdown语法简明教程
  • 教你用各种插件打造一个强大的笔记工具。
  • 如何部署自己私有的为知笔记。
  • 其实博主更推荐私有部署joplin

  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 一个更加强大的镜像构建工具
Earthly 是一个更加高级的 Docker 镜像构建工具,Earthly 通过自己定义的 Earthfile 来代替传统的 Dockerfile 完成镜像构建。Makefile + Dockerfile = Earthfile
2021-11-01
下一篇 

阅读全文

第一次使用VS CODE时你应该指导的一切配置
第一次使用VS CODE时你应该指导的一切配置 第一次使用VS CODE时你应该指导的一切配置
VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。
2021-10-18
  目录