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格式為向量可縮放,再依實際需求指定 imgwidthheight不用指定。

語法

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