搭建Hexo博客進階篇--Hexo文檔講解（二）

Hexo 尚未結束，而是剛剛開始！

      以前寫過一篇Hexo入門篇，可是我發現Hexo並無我想象的那麼簡單，我用的Hexo主題是yelee,是MOxFIVE大神從yilia主題改版的，原創度較高，那麼這篇文章就是我通過幾天研究Hexo後的一些心得和技巧，因爲本人技術水平有限，如有錯誤之處，請指出，很是感謝。
本文涉及的內容有：

• Hexo 文檔詳細說明

• Hexo 主題自定義

• Hexo 小部件

• Hexo 模板解析

生命在於運動 ， 技術在於折騰

Hexo不經常使用的命令

render

渲染文件： hexo render <file1> [file2] ...
參數 -o(--output) 設置輸出路徑，看下圖就知道咋用了

剛開始當設置輸出路徑是，報這個錯誤

後來我想了一下，輸出到一個文件，確定是要寫輸出以後的文件名的
因此改爲

hexo render path1/xxx.md -o path2/xxx.yyy

看如今就行了呢，在Desktop/postData文件夾下面看到了a.html

由這兩張圖，咱們就知道了，hexo-render命令其實就是把咱們的文章經過模板渲染成html代碼，固然渲染完成後是能夠輸出到另外一個文件的

list

列出網站資料：hexo list <type>
很少說，看圖就知道啦

安全模式

hexo --safe

在安全模式下，不會載入插件和腳本。當您在安裝新插件遭遇問題時，能夠嘗試以安全模式從新執行。

調試模式

hexo --debug

在終端中顯示調試信息並記錄到 debug.log。當您碰到問題時，能夠嘗試用調試模式從新執行一次，並 提交調試信息到 GitHub。

簡介模式

hexo --silent

隱藏終端信息，簡言之就是隱藏了，cmd hexo命令框的輸出內容

自定義配置文件的路徑

hexo --config custom.yml

自定義配置文件的路徑，執行後將再也不使用 _config.yml。

顯示草稿

hexo --draft

顯示 source/_drafts 文件夾中的草稿文章。

自定義CWD

hexo --cwd /path/to/cwd

自定義當前工做目錄（Current working directory）的路徑。

這張圖能夠看出，以上的所有都是Global Options,也就是全局配置選項

標籤插件

Hexo 的標籤插件是獨立於 Markdown 的渲染引擎的，標籤插件採用獨有的方式渲染，雖然有的時候可能和 Markdown 渲染效果同樣，在這裏我就不說 Markdown 的渲染方式了，若是想要了解 Markdown 的請參考這篇文章 MarkDown學習筆記

引用塊

在文章中插入引言，可包含做者、來源和標題。
別號：quote
格式以下：

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

例子1:沒有提供參數，則只輸出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

例子2：引用書上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

例子3：引用Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

例子4：引用網絡上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

代碼塊

別名 ：code
格式以下：

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

例子1：普通的代碼塊

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

例子2：指定語言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

例子3：附加說明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

例子4：附加說明和網址

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

其餘

Pull Code

這個插件能夠幫助您在文章中插入重要引述。

{% pullquote [class] %}
content
{% endpullquote %}

這個效果，我也不懂是幾個意思，感受和前面的差很少

jsFiddle

在文中嵌入jsFiddle，jsFiddle是一款HTML,CSS,JAVASCRIPT在線調試工具

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

參數全在URL裏面找

通過不斷地嘗試匹配URL，最終成功搞定
設置以下：

{% jsfiddle AntBody/138zf8kk  js,html,css,result  dark %}

能夠查看渲染後的URL來推測插件運行原理,將上面的路徑一個加一個匹配，沒有寫，則採用默認路徑，會獲得404

{% jsfiddle AntBody/138zf8kk js,html,css,result dark %}

Gist

gist是什麼呢？ 請看這篇文章 如何看待Github Gist這個服務，怎麼樣更好的利用
在文章中嵌入 Gist。

{% gist gist_id [filename] %}

例子：

{% gist 199bc1a29687f7ae6da0180836b5354b find %}

gist_id在URL中找尋

{% gist 199bc1a29687f7ae6da0180836b5354b find %}

下面的是我原文引用，防止連接失效
做者：知乎用戶
連接：https://www.zhihu.com/questio...
來源：知乎
Github做爲代碼分享平臺在開發者中很是流行。此平臺託管了包括遊戲、書籍以致於字體在內的一千兩百多萬個項目（如今更多），這使其成爲互聯網上最大的代碼庫。 Github還提供另外一個很是有用的功能，這就是Gist。 開發人員經常使用Gist記錄他們的代碼片斷，可是Gist不只僅是爲極客和碼農開發的，每一個人均可以用到它。若是您據說過相似Pastebin或者Pastie這樣的web應用的話，那您就能夠看到它們和Gist很像，可是Gist比它們要更優雅。由於這些免費應用通常含有廣告，並且帶有不少其餘雜
七雜八的功能。
Gist - 任何人都能用得着
若是您不是極客您能夠按照以下方式使用Gist：

1. 匿名張貼您不須要擁有Github帳號就可使用Gist。用瀏覽器打開http://gist.github.com，在窗口中寫下你想說的就能夠建立一個Gist。您能夠發佈一個私密的Gist，也就是說這個Gist將不能被他人搜索到而只對直接在瀏覽器中輸入其URL的人可見。

2. 能像wiki同樣記錄歷史若是您修改了已經發布了的Gist的話，以前的全部版本都將被保存。您能夠點擊Revisions按鈕按時間瀏覽，並且您能夠經過內置的diff引擎查看任意兩個版本間的差別。 這也能夠用於比較文本文件。

3. 發佈富文本內容雖然Gist只能用純文原本寫，可是您能夠用markdown來發布html格式的Gist。您能夠添加列表、圖片（已有圖牀上的）和表格。當您用markdown的時候不要忘了文件名要以.md爲後綴。

4. 把Gist看成一個寫做平臺雖然如今有不少寫做引擎，好比Blogger、Medium、Tumblr，但您還能夠用Gist來快速發佈您的做品。您能夠用純文本或者markdown等文檔標記語言些一個Gist而後用http://roughdraft.io來把它做爲一個獨立的網頁發佈。

5. 託管gist上的單個頁面Bl.ocks 是一個很是有趣的專爲Gist開發的應用。 您能夠用純文本把HTML、CSS、JavaScript代碼寫下來以index.html爲文件名保存爲Gist，而後用http://bl.ocks.org把渲染好的結果在瀏覽器中展現出來。好比，這個gist展現出來就是這樣。 顯然寬帶限制是一個問題，可是http://bl.ock.org做爲一個經過Gist託管HTML的工具仍然是至關不錯的。 固然您也能夠用Google Drive。

6. 製做任務列表您能夠用Gist跟蹤待處理任務（舉個栗子）。這是用純文本的特殊語法寫的可是你能夠任意勾選。

• [x] Pick the flowers

• [ ] Call John 9303032332

• [x] Cancel cable subscription

• [ ] Book the flight tickets

您能夠勾選或者勾去任意選項，源文本將會自動變動。若是您的Gist是公有的的話，任何人均可以看到您的列表，可是隻有您（擁有者）能夠改變其勾選狀態。 備註：其實任務列表也能夠在issue中創建，全部擁有寫權限的人均可以uncheck/check。

1. 把Gist做爲一個網頁收藏夾在Chrome瀏覽器您能夠找到一個叫GistBox的插件，經過這個插件您能夠在瀏覽網頁時選擇保存網頁內容爲Gist。您甚至能夠添加標註或者話題標籤以易於之後更容易找到它們。

2. 把Gist嵌入網頁中您用一行js代碼就能夠把任何一條Gist嵌入到網頁中。嵌入的Gist格式不發生任何變化，並且訪問者能夠很是方便的把它們fork到他們的Github中。要嵌入wordpress的話有這個插件和這個短代碼可使用。

3. 測量訪問量您可使用Google Analytics查看您的Gist的訪問量。由於Gist純文本中不容許運行js代碼，因此咱們能夠用GA Beacon來記錄實時訪問Gist的狀況。把以下代碼添加到Gist中，用markdown格式保存，這樣就在這個Gist中添加了一個透明追蹤圖像了。

![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)

1. 在桌面端管理GistGisto是一個能讓您在瀏覽器以外管理Gist的桌面應用。您能夠對Gist進行搜索、編輯、查看歷史和分享。 此應用可運行於蘋果、微軟和linux系統。 固然您也能夠用GistBox這個web應用替代它。 您是否是對Gist有了一個全新的認識呢？

iframe

在文章中插入 iframe,利用這個能夠嵌入音樂和視頻

{% iframe url [width] [height] %}

{% iframe http://v.youku.com/v_show/id_... 930 542 %}

Image

在文章中插入指定大小的圖片。

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

{% img [class names] /yn.jpeg [300] [height] [雲南風景 [風景圖片]] %}

Link

在文章中插入連接，並自動給外部連接添加 target="_blank" 屬性。

{% link 百度一下 http://www.baidu.com [external] [超連接] %}

{% link 百度一下 http://www.baidu.com [這是什麼] [超連接] %}

這個external是作什麼用的，我也不清楚吶!

include Code

插入 source 文件夾內的代碼文件。

{% include_code [title] [lang:language] path/to/file %}

例子：

include_code app.js lang:javascript /app.js

效果：

{% include_code appjs lang:javascript /app.js %}

Youtube

在文章中插入 Youtube 視頻。

{% youtube video_id %}

{% youtube ICkxRE_GdgI %}

id在Url中

Vimeo

在文章中插入 Vimeo 視頻。

{% vimeo video_id %}

{% vimeo 180916725 %}

id在Url中

Raw

若是您想在文章中插入 Swig 標籤，能夠嘗試使用 Raw 標籤，以避免發生解析異常。

{% raw %}
content
{% endraw %}

{% raw %}
content
{% endraw %}

相對路徑引用的標籤插件

好比說：當你打開文章資源文件夾功能後，你把一個 example.jpg 圖片放在了你的資源文件夾中，若是經過使用相對路徑的常規 markdown 語法,

![](/example.jpg)

它將 不會 出如今首頁上。（可是它會在文章中按你期待的方式工做）

正確的引用圖片方式是使用下列的標籤插件而不是 markdown ：

{% asset_img example.jpg This is an example image %}

引用文章

引用其餘文章的連接。

{% post_path slug %}
{% post_link slug [title] %}

引用資源

引用文章的資源

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

上面兩個具體怎麼用，還不是很明白，之後明白了再更新

資源

資源文件夾

對於那些想要更有規律地提供圖片和其餘資源以及想要將他們的資源分佈在各個文章上的人來講，Hexo也提供了更組織化的方式來管理資源。這個稍微有些複雜可是管理資源很是方便的功能能夠經過將 config.yml 文件中的 post_asset_folder 選項設爲 true 來打開。

當資源文件管理功能打開後，Hexo將會在你每一次經過 hexo new [layout] <title> 命令建立新文章時自動建立一個文件夾。這個資源文件夾將會有與這個 markdown 文件同樣的名字。將全部與你的文章有關的資源放在這個關聯文件夾中以後，你能夠經過相對路徑來引用它們，這樣你就獲得了一個更簡單並且方便得多的工做流。

數據文件

有時您可能須要在主題中使用某些資料，而這些資料並不在文章內，而且是須要重複使用的，那麼您能夠考慮使用 Hexo 3.0 新增的「數據文件」功能。此功能會載入 source/_data 內的 YAML 或 JSON 文件，如此一來您便能在網站中複用這些文件了。

舉例來講，在 source/_data 文件夾中新建 menu.yml 文件：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用這些資料

{% for link in site.data.menu %}
  <a href="{{ link }}">{{ loop.key }}</a>
{% endfor %}

到此Hexo的文檔講解結束，請看下一篇 搭建Hexo博客進階篇---主題自定義

參考資料

1. Hexo官方網站 : https://hexo.io/</span>