HEXO Tag Plugins || HEXO 外掛


Posted by george16886 on 2020-04-11


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.

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

{% link george16886's blog [https://george16886.nctu.me] nothing but everything %}

</br>


Image

Inserts an image with specified size.

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

{% img [class names] https://bit.ly/3aVcEJV 320 240 '"pika cute" "alt text"' %}
{% img [class names] /uploads/images/friend_404.gif 320 240 '404 ghost "alt text"' %}

</br>


YouTube

Inserts a YouTube video.

{% youtube video_id %}

{% youtube xRZAHBs8OQI %}

</br>


Gist

Inserts a Gist snippet.

{% gist gist_id [filename] %}

{% gist 835cbb4185f8672ea936705038a9fc95 01_Two_Sum.cpp %}

</br>


Block Quote

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

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

Quote from a book

{% blockquote Mark Levy, Accidental Genius %}
Reading provokes thoughts while writing captures it.
閱讀激發思考,寫作捕捉思路。
{% endblockquote %}

Quote from Twitter

{% blockquote @realDonaldTrump
 https://twitter.com/realDonaldTrump/status/1247540701291638787 %}
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?
{% endblockquote %}

Quote from an article on the web

{% blockquote Charlene Cheng (鬼鬼)
 https://medium.com/%E5%BE%B7%E5%9C%8B%E9%AC%BC%E7%9A%84180%E5%A4%A9%E9%A4%8A%E6%88%90%E8%A8%88%E7%95%AB/%E5%BE%B7%E5%9C%8B%E4%BA%A4%E6%8F%9B-revolut-%E5%A4%9A%E5%B9%A3%E9%8A%80%E8%A1%8C%E9%96%8B%E6%88%B6-2019-223155b517f0 || 德國交換 || Revolut 多幣銀行開戶 -2019 %}
咦?不是已經有N26了嗎? 為何又開了一個銀行呢?

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

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

</br>


Post Excerpt

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

</br>


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

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

</br>

Example

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

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

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

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

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

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

</br>


Gallery

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

</br>

Example

{% gallery %}
pika cute
pika ball
OOOOOPS!!
Whoops!

{% endgallery %}

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

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

</br>


Album

Settings

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

Usage

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

</br>

Example

</br>


Tag Hide

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

Usage

Inline

  • 在文本里面添加按鈕隱藏內容,只限文字。
    • content 不能包含 ',可用 &apos; 替代。
{% hideInline content,display,bg,color %}

Block

  • 獨立的 block 隱藏內容,可以隱藏很多內容,包括圖片,代碼塊等等。
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

Toggle

  • 如果你需要展示的內容太多,可以把它隱藏在收縮框裏,需要時再把它展開。
    • display 不能包含 ,,可用 &sbquo; 替代。
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
  • content: 文本內容
  • display: 按鈕顯示的文字 (可選)
  • bg: 按鈕的背景顏色 (可選)
  • color: 按鈕文字的顏色 (可選)

</br>

Example

Inline

{% hideInline Text,Click me %}
{% hideInline only,Click me,#00FFCC,#FF7242 %}

Block

{% hideBlock Gallery,,#00FFCC %}


{% endhideBlock %}

Toggle

{% hideToggle Gallery,#d7f5f3,#ff7242 %}


{% endhideToggle %}

</br>


Mermaid

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

Example

Pie Chart

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

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

</br>



#Markdown #HEXO #Plugins #notes #Cheatsheet








Related Posts

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

Eason
GraphQL Summit 2019 與會分享

GraphQL Summit 2019 與會分享

ArvinH
在 Yourator 的兩個月零九天與社會新鮮人生活雜談

在 Yourator 的兩個月零九天與社會新鮮人生活雜談

林子暘


Comment