Hexo 標籤外掛（Tag Plugins）集合

發表於 更新於 分類於 ， 閱讀次數： 文章字數： 2.9k 所需閱讀時間 ≈ 10 分鐘

1. Hexo NexT

1.1. Centered Quote 居中引用

1
{% cq %}居中的引言{% endcq %}

Hexo 功能測試場

1.2. Group Pictures 照片群組

Group Pictures

1
2
3
4
5
6
7
{% gp 5-2 %}
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
![](/images/next.svg)
{% endgp %}

1.3. Button 按鈕

1.3.1. Button with text & title & icon only (純文字 & 文字+說明 & 只有圖案)

1
2
3
4
5
6
{% btn #, Text %}
{% btn #, Text & Title,, Title %}
{% btn #,, home fa-5x %}
{% btn #,, home fa-3x %}
{% btn #,, home fa-lg %}
{% btn #,, home %}
Text Text & Title

1.3.2. Button with text & icon (文字 + 圖案)

1
2
{% btn #, Text & Large Icon, home%}
{% btn #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}
Text & Large Icon(沒有間距) Text & Large Icon & Title

1.3.3. Button margin (按鈕堆疊時的邊距)

1
2
3
4
5
6
7
<div class="text-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>

**-文-字-置-中-**

1.3.4. Button with relative URL (帶有相對連結的按鈕)

1
2
3
4
<div class="text-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>
Previous Chapter Next Chapter

1.3.5. Button with absolute URL (帶有絕對連結的按鈕)

1
<div class="text-center">{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}</div>
GitHub

點我展開

1.4.1. 不要用這種樣式

會導致標題導航渲染錯誤，
懷疑是 | 所導致。

1
2
3
4
5
6
{% linkgrid %}
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /+images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /+images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /+images/apple-touch-icon-next.png
% Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /+images/apple-touch-icon-next.png
{% endlinkgrid %}
1
2
3
4
5
6
7
{% lg /+images/apple-touch-icon-next.png , %}
Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /+images/apple-touch-icon-next.png
Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /+images/apple-touch-icon-next.png
Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /+images/apple-touch-icon-next.png
% Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /+images/apple-touch-icon-next.png
{% endlg %}

Theme NexT

Stay Simple. Stay NexT.

Theme NexT

Stay Simple. Stay NexT.

Theme NexT

Stay Simple. Stay NexT.

1.5. Note 筆記

1
2
3
4
5
{% note %}
#### Header
(without define class style)
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.1. ‘’ 無樣式

(without define class style)
Welcome to Hexo!

1
2
3
4
{% note default %}
#### Default Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.2. default 默認

Welcome to Hexo!

1
2
3
4
5
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.3. primary 首要

Welcome to Hexo!

1
2
3
4
{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.4. info 資訊

Welcome to Hexo!

1
2
3
4
{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.5. success 成功

Welcome to Hexo!

1
2
3
4
5
{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.6. warning 警告

Welcome to Hexo!

1
2
3
4
{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

1.5.7. danger 危險

Welcome to Hexo!

1
2
3
4
{% note default no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

1.5.8. No icon note 無圖案

Note 沒有 圖案: note info no-icon

1
2
3
4
{% note info This is a summary %}
#### Details and summary
Note with summary: `note info This is a summary`
{% endnote %}

這裡能點

1.5.9. summary 可以折疊

Note with summary: note info 這裡能點

  1. 可以寫代碼

    1
    printf("Hello, World!\n");

  2. 可以畫表格

    1 2
    3 4
    5 6
    7 8

1.6. Tabs 切換標籤

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
{% tabs 預設的名稱 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 自訂的名稱 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab @font -->
**This is Tab 3.**

{% tabs 第二層 %}
<!-- tab 加上文字 @dog -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 加上文字 @cat -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 加上文字 @crow -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

1.7. Video 影片

1
{% video url %}

只能連自己網站的資源

2. Hexo

2.1. 仍有效

2.1.1. codeblock

帶有標題的代碼區塊

1
2
3
4
{% codeblock 【代碼區塊名稱】 lang:JavaScript  %}
**T-E-S-T**
代碼放這裡
{% endcodeblock %}
【代碼區塊名稱】
1
2
**T-E-S-T**
代碼放這裡

2.1.2. asset_img

文章資產的圖片

1
{% asset_img "1280x720-Placeholder.png" **T-E-S-T** %}

文章資產的連結

1
{% asset_link "1280x720-Placeholder.png" **T-E-S-T** %}
**T-E-S-T**

2.1.4. asset_path

文章資產的路徑(文字)

1
{% asset_path "1280x720-Placeholder.png" %}
/blog/7e4/1280x720-Placeholder.png

2.1.5. url_for

站內頁面連結 目前

1
{% url_for "404_NOT_FOUND" 404.html %}
404_NOT_FOUND

2.1.6. full_url_for

站內頁面連結 部屬後

1
{% full_url_for "Hexo 架設筆記" blog/5d25/ %}
Hexo 架設筆記

2.1.7. blockquote

帶有作者與連結的引言

1
2
3
{% blockquote 胡適 https://blackrowtw.github.io/ 胡適教會我的一百個道理 %}
**不要因為有配著偉人的照片，<br>就隨便相信網路上流傳的名言佳句。**
{% endblockquote %}

不要因為有配著偉人的照片，
就隨便相信網路上流傳的名言佳句。

2.1.8. iframe youtube

(video-container)

1
{% iframe https://www.youtube.com/embed/dQw4w9WgXcQ 1280 720 %}

網址需要經過處理
原始：https://www.youtube.com/watch?v=dQw4w9WgXcQ
引入：https://www.youtube.com/embed/dQw4w9WgXcQ

與 MD 連結相同

1
{% link **-MD-原味連結-** https://blackrowtw.github.io/  **-這-是-說-明-**  %}
**-MD-原味連結-**

2.1.10. pullquote

與 MD 引言相同

1
2
3
{% pullquote class %}
**-MD-原味引言-**
{% endpullquote %}

-MD-原味引言-

2.2. 測試失敗

點我展開
  • Gist (deleted in v7.0.0)
1
{% gist gist_id filename %}
  • YouTube (deleted in v7.0.0)
1
{% youtube video_id %}
  • jsFiddle (deleted in v7.0.0)
1
{% jsfiddle shorttag tabs skin 1280 720  %}
  • post_link 報錯
1
{% post_link 7e4/ %}
  • img 不顯示
1
{% img class_names "1280x720-Placeholder.png" 1280 720 title  %}
  • include_code 無效
1
{% include_code 【代碼區塊名稱】 lang:yml "/+downloads/code/zh_TW_mobnames.yml" %}

插入 source/downloads/code 資料夾內的程式檔，資料夾取決於你在配置檔案中 code_dir 的配置。

3. Html & Css 參考樣式

Hello h1

Hello h2

Hello h3

Hello h4

Hello h5
Hello h6
1
2
3
4
5
6
<h1>Hello h1</h1>
<h2>Hello h2</h2>
<h3>Hello h3</h3>
<h4>Hello h4</h4>
<h5>Hello h5</h5>
<h6>Hello h6</h6>

Hello World

The main element represents the main content of the body of a document or application.


1
2
3
4
<p>Hello World</p>
<main>The main element represents the main content of the body of a document or application.</main>
<br>
<hr>
alternative attribute text to replace broken images

link text

ID Element

nested element 1

nested element 2

Dead link

1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="source atribute of the pic" alt="alternative attribute text to replace broken images">

<a href="link attribute to a website" target="'blank'attribute creates a new page">link text</a>

<p id="paragraph">ID Element</p>

<p>
  <img src="source atribute of the pic" alt="nested element 1">
</p>

<a href="#"> <img src="link" alt="nested element 2"> </a>

<a href="#">Dead link</a>
  • list item
  • list item
  • list item
  1. list item
  2. list item
  3. list item
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>


<ol>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>
cell1_1 cell2_1 cell3_1
cell1_2 cell2_2 cell3_2
cell1_3 cell2_3 cell3_3 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <tr>
    <td>cell1_1</td>
    <td>cell2_1</td>
    <td>cell3_1</td>
  </tr>
  <tr>
    <td>cell1_2</td>
    <td>cell2_2</td>
    <td>cell3_2</td>
  </tr>
  <tr>
    <td>cell1_3</td>
    <td>cell2_3</td>
    <td>cell3_3</td>
  </tr>
</table>

inside container

magin space below

padding space

Hello There 

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <p> inside container </p>
</div>

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

magin space below
<div class="silver-box">
  padding space
  <p class="text"> Hello There </p>
</div>


Male
Female
Helicopters

dog
cat
crow
rabbit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input name="name" type="text" value="text input" />

<textarea cols="30" rows="2">Long text.</textarea>

<input name="sex" type="radio" value="male" checked="checked"/> Male
<input name="sex" type="radio" value="female" /> Female
<input name="sex" type="radio" value="female" /> Helicopters

<input name="democheckbox" type="checkbox" value="1" checked="checked"/> dog
<input name="democheckbox" type="checkbox" value="1" /> cat
<input name="democheckbox" type="checkbox" value="1" /> rabbit

<select>
  <option selected="selected" value="1">Yes</option>
  <option value="2">No</option>
  <option value="3">Both</option>
</select>

<button type="submit" value="Submit">Button</button>
Title:

Male
Female


Checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form accept-charset="UTF-8" action="action_page.php" autocomplete="off" method="GET" target="_blank">
  <fieldset>
  <legend>Title:</legend>
  <label for="name">Name</label><br />
  <input name="name" type="text" value="Frank" /><br />
  <input checked="checked" name="sex" type="radio" value="male" />Male <br />
  <input name="sex" type="radio" value="female" />Female <br />
  <textarea cols="30" rows="2">Long text.</textarea><br />
  <select>
    <option selected="selected" value="1">Yes</option>
    <option value="2">No</option>
  </select><br />
  <input name="democheckbox" type="checkbox" value="1" />Checkbox<br />
  <button type="submit" value="Submit">Submit</button>
  </fieldset>
</form>

4. 其他

4.1. Pixiv Cat

Pixiv 圖片轉代理網站

貼上網址後，會生成各種可以直接貼上的圖片連結

【Arknights】Good Night, Ptilopsis

id=2407057

4.2. Minecraft 3D skin

hexo-minecraft-skin-viewer

皮膚 3D模型展示：
引數範圍：

  • 第一個引數：name/url（必填） 選擇使用名字還是網址連結
  • 第二個引數 填入 MINECRAFT 使用者名稱或皮膚地址（必填）
  • 第三個引數 代表是否開啟自動旋轉（選填，預設 true）
  • 第四個引數 代表是否開啟模型動畫（選填，預設 false）
  • 第五個引數 代表模型寬度（選填，預設 300）
  • 第六個引數 代表模型高度（選填，預設 400）
1
2
{% mcskin name BlacKrowtw true true%}
{% mcskin url https://mineskin.eu/skin/BlacKrowtwo true true 100 200 %}

4.3. Buy me a coffee

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
<script
  type="text/javascript"
  src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
  data-name="bmc-button"
  data-slug="blackrow"
  data-color="#FFDD00"
  data-emoji="🍎"
  data-font="Bree"
  data-text="Buy me an Apple"
  data-outline-color="#000000"
  data-font-color="#000000"
  data-coffee-color="#ffffff"
></script>
<style>
  .bmc-btn-container .bmc-btn {
    min-width: 11rem;
    color: #000000;
    background-color: #ffdd00 !important;
    height: 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: Bold;
    border: none;
    padding: 0em 1em 0em 1em;
    line-height: 1.2rem;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    font-family: "Bree Serif", cursive !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  .bmc-btn-text {
    margin-left: -0.5em;
    font-size: 0.9rem;
    display: inline-block;
    line-height: 0;
    width: 100%;
    flex-shrink: 0;
    font-family: [FONT] !important;
  }
</style>

::: Refernce :::

  1. Hexo - tag-plugins
  2. theme-Next - tag-plugins
  3. Font Awesome - Search