hexo 插件及 next 内置样式集

1

npm install hexo-lazyload-image --save

1
2
3
4

lazyload:
  enable: true
  onlypost: false
  loadingImg: # eg ./images/loading.gif

1

<ruby>博採眾長<rp>（</rp> <rt>lruihao.cn</rt><rp>）</rp></ruby>

1

npm i hexo-ruby-marks

1

{% ruby _**base**_|_**top text**_ %}

1

npm install --save hexo-pwa

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

pwa:
  manifest:
    path: /manifest.json
    body:
      name: hexo
      short_name: hexo
      icons:
        - src: /images/android-chrome-192x192.png
          sizes: 192x192
          type: image/png
        - src: /images/android-chrome-512x512.png
          sizes: 512x512
          type: image/png
      start_url: /index.html
      theme_color: '#ffffff'
      background_color: '#ffffff'
      display: standalone
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

1

npm install hexo-tag-dplayer --save

1

{% dplayer key=value ... %}

1
2
3
4
5
6
7
8

dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag

1

{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

1

npm install --save hexo-tag-aplayer

1

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

1
2
3

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

{% aplayer "你离开了南京，从此没人和我说话" "李志" "https://cdn-1256932288.cos.ap-chengdu.myqcloud.com/files/nanjing.mp3" "https://p2.music.126.net/UuSe-Vc6rS7JtRJSQgDU2g==/2323268069553116.jpg?param=300x300" %}

1

npm install --save hexo-filter-flowchart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

```%flow #去掉%号
st=>start: Start|past:>https://lruihao.cn[blank]
e=>end: End:>https://www.lruihao.cn[blank]
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>/hexo/nextplugin.html
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

1

npm install hexo-spoiler --save

1
2

plugins:
  - hexo-spoiler

1

{% spoiler [text] %}

1
2
3
4
5

{% spoiler text %}
{% spoiler ~~text~~ %}
{% spoiler *text* %}
{% spoiler **text** %}<br>
{% spoiler **hello welcome to 博採眾長！** %}

1
2
3
4
5
6

{% caniuse feature @ periods %}
<!-- Tag Alias -->
{% can feature @ periods %}

feature : Search for the feature you want on https://caniuse.com, then click on the hash sign to the left of the search result heading and you will get the unique name of this feature.
periods : Select the browser versions to display. Supported values: past_1, past_2, past_3, past_4, past_5, current, future_3, future_2, future_1. If this value is empty, the default value 'current' will be used.

1

{% caniuse fetch %}

1

{% can sharedarraybuffer @ current %}

1

{% caniuse loading-lazy-attr @ future_3,future_2,future_1 %}

1

{% caniuse link-rel-modulepreload @ past_1,past_2,past_3,past_4,past_5 %}

1

{% include_raw '_data/path/to/file.html' %}

1

Any <strong>raw content</strong> may be included with this tag.

1

{% include_raw '_data/path/to/include-raw.html' %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{% mermaid gitGraph: %}
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
checkout master
commit
merge newbranch
{% endmermaid %}

1

{% video url %}

1
2

{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{% 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]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{% tabs 选项，-1 %}
<!-- tab -->
**选项 1**
<!-- endtab -->
<!-- tab -->
**选项 2**
<!-- endtab -->
<!-- tab -->
**选项 3**
<!-- endtab -->
{% endtabs %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 15
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

1

{% note default %}

1
2

### 引用（文本居中）

1
2
3
4
5
6
7

### [Font Awesome 图标](https://www.runoob.com/font-awesome/fontawesome-tutorial.html)
> Font Awesome 是一套绝佳的图标字体库和 CSS 框架。
> Font Awesome 字体为您提供可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。
> 要使用 Font Awesome 图标，请在 HTML 页面的 部分中添加以下行：

#### 1、国内推荐 CDN

1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

1
2
3
4
5
6
7
8

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

1
2
3
4
5

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

1
2
3

[language] [title] [url] [link text]

code snippet

1
2

-  printf("Hello World!");
+  printf("Hello_World!");

1

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

1
2
3
4
5
6
7
8
9

<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

<!--或者-->

- <i class="fa fa-check-square"></i> 已完成
- <i class="fa fa-square"></i> 未完成

1
2

# Label tag.
label: true

1
2
3

{% label default@default %}

primary success info warning danger