markdown终究还是输了

Button

根据输入导航至相对路径，拼接法

<!DOCTYPE html>

aaaa text 

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
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
  <head>
    <title>aaaa</title>
    <style>
        .btn {
            background-color: green; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 5px 10px; /* 内边距 */
            border: none; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
            cursor: pointer; /* 鼠标悬停时的光标形状 */
            transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
        }
        .btn:hover {
            background-color: purple; /* 鼠标悬停时的背景颜色 */
        }
    </style>
  </head>
  <body>
    text <button onclick="redirect()" class="btn">button</button>
    <script>
      function redirect() {
        var currentUrl = window.location.href.replace(/\/+$/, '');
        if (currentUrl.endsWith("#more")) {
          currentUrl = currentUrl.replace("/#more", "");
        }
        var input = prompt("get input");
        if (input === "edgex") {
          var relativePath = '/edgex';
          // 拼接新的URL
          var newUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')) + relativePath;
          window.location.href = newUrl;
        } else if (input === null || input === "") {
          window.alert("no input");
        } else if (input !== null) {
          var relativePath = '/404';
          // 拼接新的URL
          var first = currentUrl.substring(0, currentUrl.lastIndexOf('/'));
          var newUrl = first.substring(0, first.lastIndexOf('/')) + relativePath;
          window.location.href = newUrl;
        }
      }
    </script>
  </body>
</html>
## 导航相对路径，js href法 aaaa text 

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
<!DOCTYPE html>
<html>
  <head>
    <title>aaaa</title>
    <style>
        .btn {
            background-color: green; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 5px 10px; /* 内边距 */
            border: none; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
            cursor: pointer; /* 鼠标悬停时的光标形状 */
            transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
        }
        .btn:hover {
            background-color: purple; /* 鼠标悬停时的背景颜色 */
        }
    </style>
  </head>
  <body>
    text <button onclick="redirect()" class="btn">button</button>
    <script>
      function redirect() {
        var input = prompt("get input");
        if (input === "edgex") {
          window.location.href = "../edgex";
        }
      }
    </script>
  </body>
</html>
## 直接button导航，相对，href法 aaaa text 

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
<!DOCTYPE html>
<html>
  <head>
    <title>aaaa</title>
    <style>
        .btn {
            background-color: green; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 5px 10px; /* 内边距 */
            border: none; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
            cursor: pointer; /* 鼠标悬停时的光标形状 */
            transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
        }
        .btn:hover {
            background-color: purple; /* 鼠标悬停时的背景颜色 */
        }
    </style>
  </head>
  <body>
    text <button onclick="redirect()" class="btn">button</button>
    <script>
      function redirect() {
        window.location.href = "../edgex";
      }
    </script>
  </body>
</html>
## button 夹在 a标签href aaaa text 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <title>aaaa</title>
    <style>
        .btn {
            background-color: green; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 5px 10px; /* 内边距 */
            border: none; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
            cursor: pointer; /* 鼠标悬停时的光标形状 */
            transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
        }
        .btn:hover {
            background-color: purple; /* 鼠标悬停时的背景颜色 */
        }
    </style>
  </head>
  <body>
    text <a href="../edgex"><button class="btn">button</button></a>
  </body>
</html>
## a标签href button 
1
<a href="../edgex">button<a>
## markdown 跳转链接 带标签外挂 [button ](../edgex) 
1
[{% label button %}](../edgex)
# Gallery ## 显示title的gallery并排布局
源文件目录
文件头部属性
部署后的分类页面
部署后的分类页面
部署后的分类页面 
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
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .image {
      flex: 1;
      padding: 5px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image">
      <img src="https://picturebed-raccoon.oss-cn-hangzhou.aliyuncs.com/202402141913731.png" alt="源文件目录" style="zoom:50%;" />
    </div>
    <div class="image">
      <img src="https://picturebed-raccoon.oss-cn-hangzhou.aliyuncs.com/202402141915615.png" alt="文件头部属性" style="zoom:50%;" />
    </div>
    <div class="image">
      <img src="https://picturebed-raccoon.oss-cn-hangzhou.aliyuncs.com/202402141916078.png" alt="部署后的分类页面" style="zoom:50%;" />
    </div>
  </div>
</body>
</html>

引用

markdown的加载不出来

1
2
aaaa[^1]
[^1]: link

改用html
1
2
3
4
5
6
7
8
9
这是一条引用<sup><a href="#ref1">1</a></sup>
这是一条引用<sup><a href="#ref2">2</a></sup>
这是一条引用<sup><a href="#ref1">1</a></sup>
这是一条引用<sup><a href="#ref3">3</a></sup>

1. <p name = "ref1">https://lolitasian.blog.csdn.net/article/details/121656279</p>
2. <a name = "ref2" href="https://lolitasian.blog.csdn.net/article/details/121656279">https://lolitasian.blog.csdn.net/article/details/121656279</a>
3. <br><img name = "ref3" src="https://img-blog.csdnimg.cn/d74d20cb0f7f4be8831cb43ceea8ed7d.png
"></img>

视频

vedio

vedio不会自动播放

1
2
3
<video width="100%" height="400" controls>
    <source src="aaa.mp4" type="video/mp4">
</video>

iframe

b站视频一定要加&autoplay=0

1
<iframe width="100%" height="400" src="//player.bilibili.com/player.html?aid=1100018808&bvid=BV1gA4m1L7KW&cid=1429108117&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

wyy

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=2014956674&auto=1&height=66"></iframe>

外挂标签

资源文件夹

1
2
3
4
5
直接引用, 不要加相对路径

{% asset_link uos简明教程（新手向.pdf %}

{% asset_img Web.png this is description %}
uos简明教程（新手向.pdf

標籤外掛（Tag Plugins）引自 butterfly.js.org

標籤外掛是Hexo獨有的功能，並不是標準的Markdown格式。

以下的寫法，只適用於Butterfly主題，用在其它主題上不會有效果，甚至可能會報錯。使用前請留意

標籤外掛雖然能為主題帶來一些額外的功能和UI方面的強化，但是，標籤外掛也有明顯的限制，使用時請留意。

Note (Bootstrap Callout)

移植於next主題，並進行修改。

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
11
12
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: simple
  icons: false
  border_radius: 3
  # 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

icons和light_bg_offset只對方法一生效

Note 標籤外掛有兩種用法

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名稱 用法
class 【可選】標識，不同的標識有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon 【可選】不顯示 icon
style 【可選】可以覆蓋配置中的 style
（simple/modern/flat/disabled）

simple

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
{% note simple %}
默認 提示塊標籤
{% endnote %}

{% note default simple %}
default 提示塊標籤
{% endnote %}

{% note primary simple %}
primary 提示塊標籤
{% endnote %}

{% note success simple %}
success 提示塊標籤
{% endnote %}

{% note info simple %}
info 提示塊標籤
{% endnote %}

{% note warning simple %}
warning 提示塊標籤
{% endnote %}

{% note danger simple %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

modern

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
{% note modern %}
默認 提示塊標籤
{% endnote %}

{% note default modern %}
default 提示塊標籤
{% endnote %}

{% note primary modern %}
primary 提示塊標籤
{% endnote %}

{% note success modern %}
success 提示塊標籤
{% endnote %}

{% note info modern %}
info 提示塊標籤
{% endnote %}

{% note warning modern %}
warning 提示塊標籤
{% endnote %}

{% note danger modern %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

flat

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
{% note flat %}
默認 提示塊標籤
{% endnote %}

{% note default flat %}
default 提示塊標籤
{% endnote %}

{% note primary flat %}
primary 提示塊標籤
{% endnote %}

{% note success flat %}
success 提示塊標籤
{% endnote %}

{% note info flat %}
info 提示塊標籤
{% endnote %}

{% note warning flat %}
warning 提示塊標籤
{% endnote %}

{% note danger flat %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

disabled

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
{% note disabled %}
默認 提示塊標籤
{% endnote %}

{% note default disabled %}
default 提示塊標籤
{% endnote %}

{% note primary disabled %}
primary 提示塊標籤
{% endnote %}

{% note success disabled %}
success 提示塊標籤
{% endnote %}

{% note info disabled %}
info 提示塊標籤
{% endnote %}

{% note warning disabled %}
warning 提示塊標籤
{% endnote %}

{% note danger disabled %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

no-icon

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
{% note no-icon %}
默認 提示塊標籤
{% endnote %}

{% note default no-icon %}
default 提示塊標籤
{% endnote %}

{% note primary no-icon %}
primary 提示塊標籤
{% endnote %}

{% note success no-icon %}
success 提示塊標籤
{% endnote %}

{% note info no-icon %}
info 提示塊標籤
{% endnote %}

{% note warning no-icon %}
warning 提示塊標籤
{% endnote %}

{% note danger no-icon %}
danger 提示塊標籤
{% endnote %}

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

3.2.0 以上版本支

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名稱 用法
color 【可選】顔色
(default / blue / pink / red / purple / orange / green)
icon 【可選】可配置自定義 icon (只支持 fontawesome 圖標, 也可以配置 no-icon )
style 【可選】可以覆蓋配置中的 style
（simple/modern/flat/disabled）

simple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

modern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

flat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

disabled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心開車 安全至上
{% endnote %}
{% note red no-icon %}
這是三片呢？還是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石頭布
{% endnote %}
{% note green no-icon %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

Gallery相冊圖庫

2.2.0以上提供

一個圖庫集合。

寫法

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
  • name：圖庫名字
  • description：圖庫描述
  • link：連接到對應相冊的地址
  • img-url：圖庫封面的地址

例如：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
Group Image Gallery
壁紙

收藏的一些壁紙

Group Image Gallery
漫威

關於漫威的圖片

Group Image Gallery
OH MY GIRL

關於OH MY GIRL的圖片

Gallery相冊

2.0.0 以上提供

區別於舊版的Gallery相冊,新的 Gallery 相冊會自動根據圖片長度進行排版，書寫也更加方便，與 markdown 格式一樣。可根據需要插入到相應的 md。

寫法:

1
2
3
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 圖片格式
{% endgallery %}
參數 解釋
lazyload 【可選】點擊按鈕加載更多圖片，填寫 true/false。默認為 false。
rowHeight 【可選】圖片顯示的高度，如果需要一行顯示更多的圖片，可設置更小的數字。默認為 220。
limit 【可選】每次加載多少張照片。默認為 10。

示例

1
2
3
4
5
6
7
8
9
10
11
{% gallery %}
markdown 圖片格式
{% endgallery %}

{% gallery true,220,10 %}
markdown 圖片格式
{% endgallery %}

{% gallery true,,10 %}
markdown 圖片格式
{% endgallery %}

例如

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

寫法：

1
2
{% gallery url,[link],[lazyload],[rowHeight],[limit] %}
{% endgallery %}
參數 解釋
url 【必須】 識別詞
link 【必須】遠程的 json 鏈接
lazyload 【可選】點擊按鈕加載更多圖片，填寫 true/false。默認為 false。
rowHeight 【可選】圖片顯示的高度，如果需要一行顯示更多的圖片，可設置更小的數字。默認為 220。
limit 【可選】每次加載多少張照片。默認為 10。

遠程鏈接 Json 的例子

有三個參數，url是必須存在的，alt 和 title 可有，也可沒有。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0556.jpg",
    "alt": "IMG_0556.jpg",
     "title": "這是title"
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0472.jpg",
    "alt": "IMG_0472.jpg"
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0453.jpg",
    "alt": ""
  },
  {
    "url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0931.jpg",
    "alt": ""
  }
]

示例

1
2
3
4
5
6
7
8
{% gallery url,https://xxxx.com/sss.json %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,220,10 %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,,10 %}
{% endgallery %}

tag-hide

2.2.0以上提供

請注意，tag-hide內的標簽外掛content內都不建議有h1 - h6 等標題。因為Toc會把隱藏內容標題也顯示出來，而且當滾動屏幕時，如果隱藏內容沒有顯示出來，會導致Toc的滾動出現異常。

如果你想把一些文字、內容隱藏起來，並提供按鈕讓用户點擊顯示。可以使用這個標籤外掛。

inline 在文本里面添加按鈕隱藏內容，只限文字

( content不能包含英文逗號，可用&sbquo;)

1
{% hideInline content,display,bg,color %}

  • content: 文本內容

  • display: 按鈕顯示的文字(可選)

  • bg: 按鈕的背景顏色(可選)

  • color: 按鈕文字的顏色(可選)

Demo

1
2
3
哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %}

門裏站着一個人? {% hideInline 閃 %}

哪個英文字母最酷？ 因為西裝褲(C裝酷)</span>

門裏站着一個人? 閃</span>

block獨立的block隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等

( display 不能包含英文逗號，可用&sbquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本內容
  • display: 按鈕顯示的文字(可選)
  • bg: 按鈕的背景顏色(可選)
  • color: 按鈕文字的顏色(可選)

Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎麼可能有答案
{% endhideBlock %}

查看答案

傻子，怎麼可能有答案

2.3.0以上支持

如果你需要展示的內容太多，可以把它隱藏在收縮框裏，需要時再把它展開。

( display 不能包含英文逗號，可用&sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

mermaid

使用mermaid標籤可以繪製Flowchart（流程圖）、Sequence diagram（時序圖 ）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和Pie Chart（圓形圖），具體可以查看mermaid文檔

修改 主題配置文件

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

寫法：

1
2
3
{% mermaid %}
內容
{% endmermaid %}

例如：

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Tabs

移植於next主題

使用方法

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 (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

Demo 1 - 預設選擇第一個【默認】

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 預設選擇tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 沒有預設值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定義Tab名 + 只有icon + icon和Tab名

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字為第一個Tab

只有圖標 沒有Tab名字

名字+icon

Button

3.0以上適用

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 鏈接
[text]        : 按鈕文字
[icon]        : [可選] 圖標
[color]       : [可選] 按鈕背景顔色(默認style時）
                      按鈕字體和邊框顔色(outline時)
                      default/blue/pink/red/purple/orange/green
[style]       : [可選] 按鈕樣式 默認實心
                      outline/留空
[layout]      : [可選] 按鈕佈局 默認為line
                      block/留空
[position]    : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
                      center/right/留空
[size]        : [可選] 按鈕大小
                      larger/留空

Demo

1
2
3
4
5
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}
Butterfly Butterfly Butterfly

more than one button in center

1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

inlineImg

主題中的圖片都是默認以塊級元素顯示，如果你想以內聯元素顯示，可以使用這個標簽外掛。

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    圖片鏈接
[height]   ：   圖片高度限制【可選】

Demo

1
2
3
4
5
你看我長得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我覺得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

image-20210319001204045

label

由於 hexo 的渲染限制， 在段落開頭使用 label 標籤外掛會出現一些問題。例如：連續開頭使用 label 標籤外掛的段落無法換行

建議 不要 在段落開頭使用 label 標籤外掛

高亮所需的文字

1
{% label text color %}
參數 解釋
text 文字
color 【可選】背景顏色，默認為 default
default/blue/pink/red/purple/orange/green

Demo

1
2
臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。

宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

timeline

4.0.0 以上支持

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
參數 解釋
title 標題/時間線
color timeline 顏色
default(留空) / blue / pink / red / purple / orange / green

Demo

1
2
3
4
5
{% timeline 2022 %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,blue %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,pink %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,red %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,purple %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,orange %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

1
2
3
4
5
{% timeline 2022,green %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

這是測試頁面

4.1.0 支持

可在任何界面插入類似友情鏈接列表效果

內容格式與友情鏈接界面一樣，支持 yml 格式

1
2
3
{% flink %}
xxxxxx
{% endflink %}

Demo

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
{% flink %}
- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: 今日事,今日畢
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
{% endflink %}

abcjs 樂譜

在頁面上渲染樂譜

修改 主題配置文件

1
2
3
4
5
6
# abcjs (樂譜渲染)
# See https://github.com/paulrosen/abcjs
# ---------------
abcjs:
  enable: true
  per_page: true

寫法：

1
2
3
{% score %}
樂譜代碼
{% endscore %}

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% score %}
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
"Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
{% endscore %}
X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C][K:style=normal] [A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that

series 系列文章

在頁面上顯示系列文章

修改 主題配置文件

1
2
3
4
5
series:
   enable: true
   orderBy: 'title' # Order by title or date
   order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
   number: true

寫法：

1
2
{% series %}
{% series [series name] %}

在文章的 front-matter 上添加參數 series，並給與一個標識

使用此標簽外掛，會把相同標識的文章以列表的形式展示

如果不寫 series 標識，則默認為你使用此標簽外掛所在的文章的 series 標識

Demo

1
{% series markdown %}