Tag plugins are different from post tags. They are ported from Octopress and provide a useful way for you to quickly add specific content to your posts.
標籤外掛是 Hexo 獨有的功能，並不是標準的 Markdown 格式。

這篇節錄一些我個人認為比較實用的HEXO標籤外掛。

Link

Inserts a link with target=”_blank” attribute.

1	{% link text url [external] [title] %}

george16886's blog

Image

Inserts an image with specified size.

1	{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

YouTube

Inserts a YouTube video.

1	{% youtube video_id %}

Gist

Inserts a Gist snippet.

1	{% gist gist_id [filename] %}

Block Quote

Perfect for adding quotes to your post, with optional author, source and title information.

1
2
3

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

Quote from a book

Reading provokes thoughts while writing captures it.
閱讀激發思考，寫作捕捉思路。

Mark LevyAccidental Genius

Quote from Twitter

The W.H.O. really blew it. For some reason, funded largely by the United States, yet very China centric. We will be giving that a good look. Fortunately I rejected their advice on keeping our borders open to China early on. Why did they give us such a faulty recommendation?

@realDonaldTrumptwitter.com/realDonaldTrump/status/1247540701291638787

Quote from an article on the web

咦？不是已經有N26了嗎？為何又開了一個銀行呢？

Revolut是朋友推薦給我的，起初因為我一直沒辦法使用好友推薦連結，所以放棄申辦，但之後因為還是覺得他太方便了，所以就只好自己從官網申辦Orz

推薦連結：https://revolut.com/referral/shangywih!a13221
歡迎在德國的各位從此組推薦連結開始走開戶流程，完成所有開戶並使用revolut的卡完成消費後，會獲得10歐喲！
啊啊小額協助此部落格之運作吧哈哈哈，一百個感謝！

Charlene Cheng (鬼鬼)|| 德國交換 || Revolut 多幣銀行開戶 -2019

Post Excerpt

Use text placed before the  tag as an excerpt for the post. excerpt: value in the front-matter, if specified, will take precedent.

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

Note

Bootstrap Callout

Settings

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

Usage

1
2
3

{% note [class] [no-icon] %}
Any content (support inline tags too).
{% endnote %}

[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.
All parameters are optional.

Example

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

Gallery

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

Example

pika cute
pika ball
OOOOOPS!!
Whoops!

{% gallery %}
![pika cute](https://bit.ly/3aVcEJV "pikachu")
![pika ball][logo]
![OOOOOPS!!](/uploads/images/friend_404.gif "404 ghost animated")
![Whoops!](/uploads/images/404.jpg "404 ghost")

[logo]: https://bit.ly/2xceXtv "pika pika"
{% endgallery %}

Album

Settings

先在 source 下建立一個 Gallery 的資料夾。
在 Gallery 下建立相簿，並在相簿中建立一個 index.md。
利用 Gallery 的方式編輯 index.md。

Usage

1
2
3

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
</div>

name：圖庫名字
description：圖庫描述
link：連接到對應相冊的地址
img-url：圖庫封面的地址

Example

Tag Hide

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

Usage

Inline

在文本里面添加按鈕隱藏內容，只限文字。
- content 不能包含 '，可用 ' 替代。

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

Block

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

1
2
3

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

Toggle

如果你需要展示的內容太多，可以把它隱藏在收縮框裏，需要時再把它展開。
- display 不能包含 ,，可用 &sbquo; 替代。

1
2
3

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

content: 文本內容
display: 按鈕顯示的文字 (可選)
bg: 按鈕的背景顏色 (可選)
color: 按鈕文字的顏色 (可選)

Example

Inline

Text only

Block

Toggle

Gallery

Mermaid

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

Example

Pie Chart

pie title 2020 Taiwanese Presidential Election "Tsai Ing-wen" : 8170231 "Han Kuo-yu" : 5522119 "Soong Chu-yu" : 608590

{% mermaid %}
pie
    title 2020 Taiwanese Presidential Election 
    "Tsai Ing-wen" : 8170231
    "Han Kuo-yu" : 5522119
    "Soong Chu-yu" : 608590 
{% endmermaid %}

Tabs

分頁。

Usage

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

Example

Tab caption ONLY

@icon ONLY

Tab caption with @icon

Button

按鈕。

Usage

1	{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 連結。
[text] : 按鈕文字。
[icon] : [可選] 使用 Font Awesome 5 圖標。
[color] : [可選] 按鈕背景的顔色或 style 為 outline 時按鈕字體和邊框的顔色。
```
default/blue/pink/red/purple/orange/green
```
[style] : [可選] 按鈕樣式，默認實心。
```
outline/留空
```
[layout] : [可選] 按鈕佈局，默認 line。
```
block/留空
```
[position] : [可選] layout 為 block 時的按鈕位置，默認左邊。
```
center/right/留空
```
[size] : [可選] 按鈕大小
```
larger/留空
```

Example

Inline

Go to my blog, click the button george16886's blog
Go to my GitHub, click the button george16886

Category: Notes 技術隨筆

Original post @george16886’s blog

Link

Image

YouTube

Gist

Block Quote

Quote from a book

Quote from Twitter

Quote from an article on the web

Post Excerpt

Note

Settings

Usage

Example

Gallery

Example

Album

Settings

Usage

Example

Tag Hide

Usage

Inline

Block

Toggle

Example

Inline

Block

Toggle

Mermaid

Example

Pie Chart

Tabs

Usage

Example

Button

Usage

Example

Inline

Different Alignment

Multiple Buttons

Multiple Buttons (aligned canter)