Hexo 擴充標籤快速導覽

Hexo 擴充標籤整理

Hexo 除了支援 Markdown 標籤外，還另外擴充了一些標籤，以彌補 Markdown 的不足，如引用書中或 Twitter 的句子、插入 Youtube 影片…等，這些都是原本 Markdown 所沒有的。本文特別整理出 Hexo 3 目前所支援的擴充標籤。

由於這些屬 Hexo 擴充，無法在一般 Markdown preview 顯示，必須經過 Hexo 編譯後才能在瀏覽器顯示。

Version

Hexo 3.1.1

Images

Markdown 的 ![]() 無法指定圖片的大小，只能依照 RWD 自動改變。Hexo 所擴充的 img 可以指定寬度，這對指定 svg格式的圖片非常有用。1 1svg 格式不用特別考慮圖片寬度，只要使用 Google Doc 預設的 Arial 14 字型即可。因為 svg 格式為向量可縮放，再依實際需求指定 img 的 width，height 不用指定。

語法

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

使用svg

1
{% img /images/php/php-generator/yield000.svg 180 %}

Block Quote

類似 Markdown 的 >，但提供更進階的功能，如在文章中插入引言，可包含作者與超連結。

語法

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

基本用法

與 Markdown 的 > 結果相同。

1
2
3
{% blockquote %}
念念不忘，必有迴響。有一口氣，點一盞燈，有燈就有人。
{% endblockquote %}

念念不忘，必有迴響。有一口氣，點一盞燈，有燈就有人。

引用書上的句子

作者與書名以逗號隔開。2 2逗號之後加上 隔開，可能因為受到Freemind主題的CSS所影響。

1
2
3
{% blockquote 孔子,  - 論語 %}
學而時習之，不亦悅乎。
{% endblockquote %}

學而時習之，不亦悅乎。

孔子 - 論語

引用Twitter

第 1 個參數為 Twitter 帳號，第 2 個參數為Twitter留言網址。3 3第 1 個參數與第 2 個參數原本只需留一個空格，可能因為受到 Freemind主題的 CSS 所影響，需多留一個空格，否則字會連在一起。

1
2
3
{% blockquote @oomusou  https://twitter.com/oomusou/status/636320431549497344 %}
我一本書會讀 3 次，第一次先略讀，重點在先大概知道這本書的架構；第二次會精讀，重點在理解；第三次會實際實作，驗證書中內容，並整理至 Blog，算是消化成自己的東西，以後就只需查自己的 Blog 即可。
{% endblockquote %}

我一本書會讀 3 次，第一次先略讀，重點在先大概知道這本書的架構；第二次會精讀，重點在理解；第三次會實際實作，驗證書中內容，並整理至 Blog，算是消化成自己的東西，以後就只需查自己的 Blog 即可。

引用網路上文章

第 1 個參數為人名，第 2 個參數為網址，第 3 個參數為網址所顯的標題。4 4第 1 個參數與第 2 個參數原本只需留一個空格，可能因為受到 Freemind主題的 CSS 所影響，需多留一個空格，否則字會連在一起。

1
2
3
{% blockquote 一代宗師  https://zh.wikipedia.org/wiki/%E4%B8%80%E4%BB%A3%E5%AE%97%E5%B8%AB 維基百科%}
念念不忘，必有迴響。有一口氣，點一盞燈，有燈就有人。
{% endblockquote %}

念念不忘，必有迴響。有一口氣，點一盞燈，有燈就有人。

Code Block

在文章中插入程式碼。

語法

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

基本用法

與Markdown的三個 (~)或(`)結果相同。

1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
1
alert('Hello World!');

指定程式語言

與Markdown的三個 (~)或(`) + 程式語言結果相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% codeblock lang:php %}
class ContactUsFormRequest extends Request
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }
}
{% endcodeblock %}
1
2
3
4
5
6
7
8
9
10
11
12
class ContactUsFormRequest extends Request
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }
}

加上說明

可加上檔案名稱或註解。

1
2
3
4
5
6
7
8
{% codeblock lang:php ISendStrategy.php %}
namespace App\ObjectModel\ContactUs;

interface ISendStrategy
{
    public function execute(array $request);
}
{% endcodeblock %}
ISendStrategy.php
1
2
3
4
5
6
namespace App\ObjectModel\ContactUs;

interface ISendStrategy
{
    public function execute(array $request);
}

加上說明與程式網址

除了加上檔案名稱，還可以加上網址。
第1個參數為檔案名稱或註解，第2個參數為網址，第3個參數為實際檔案名稱。

1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Youtube

語法

1
{% youtube video_id %}

基本用法

Conclusion

  • 本文是根據 Hexo 官方文件：Hexo 標籤外掛實際測試所得知的結果，事實上 Hexo 官方支援的擴充標籤遠比本文所列的多，不過有可能因為受到 Freemind主題的 CSS 所影響，有些擴充結果不正常，因此沒有列出
2015-08-25
▲