搭建Hexo博客進階篇--Hexo文檔講解(二)

Hexo 還沒有結束,而是剛剛開始!

之前寫過一篇Hexo入門篇,但是我發現Hexo并沒有我想象的那么簡單,我用的Hexo主題是yelee,是MOxFIVE大神從yilia主題改版的,原創度較高,那么這篇文章就是我經過幾天研究Hexo后的一些心得和技巧,由于本人技術水平有限,若有錯誤之處,請指出,非常感謝。
本文涉及的內容有:

  • Hexo 文檔詳細說明
  • Hexo 主題自定義
  • Hexo 小部件
  • Hexo 模板解析

生命在于運動 , 技術在于折騰

Hexo不常用的命令

render

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

渲染

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

error

后來我想了一下,輸出到一個文件,肯定是要寫輸出之后的文件名的
所以改成

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

看現在就好了呢,在Desktop/postData文件夾下面看到了a.html

success

由這兩張圖,我們就知道了,hexo-render命令其實就是把我們的文章通過模板渲染成html代碼,當然渲染完成后是可以輸出到另一個文件的

list

列出網站資料:hexo list <type>
不多說,看圖就知道啦

hexo list

安全模式

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

這張圖可以看出,以上的全部都是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

經過不斷地嘗試匹配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/question/21343711/answer/32023379
來源:知乎
      Github作為代碼分享平臺在開發者中非常流行。此平臺托管了包括游戲、書籍以至于字體在內的一千
兩百多萬個項目(現在更多),這使其成為互聯網上最大的代碼庫。  Github還提供另一個非常有用的功能,
這就是Gist。  開發人員常常使用Gist記錄他們的代碼片段,但是Gist不僅僅是為極客和碼農開發的,每個
人都可以用到它。如果您聽說過類似Pastebin或者Pastie這樣的web應用的話,那您就可以看到它們和Gist
很像,但是Gist比它們要更優雅。因為這些免費應用一般含有廣告,而且帶有很多其他雜七雜八的功能。  

A、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。
7. 把Gist作為一個網頁收藏夾在Chrome瀏覽器您可以找到一個叫GistBox的插件,通過這個插件您可以在瀏
覽網頁時選擇保存網頁內容為Gist。您甚至可以添加標注或者話題標簽以易于以后更容易找到它們。  
8. 把Gist嵌入網頁中您用一行js代碼就可以把任何一條Gist嵌入到網頁中。嵌入的Gist格式不發生任何變
化,而且訪問者可以非常方便的把它們fork到他們的Github中。要嵌入wordpress的話有這個插件和這個短
代碼可以使用。
9. 測量訪問量您可以使用Google Analytics查看您的Gist的訪問量。因為Gist純文本中不允許運行js代碼,
所以我們可以用GA Beacon來記錄實時訪問Gist的情況。把如下代碼添加到Gist中,用markdown格式保存,
這樣就在這個Gist中添加了一個透明追蹤圖像了。
![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)   
10. 在桌面端管理GistGisto是一個能讓您在瀏覽器之外管理Gist的桌面應用。您可以對Gist進行搜索、編
輯、查看歷史和分享。 此應用可運行于蘋果、微軟和linux系統。 當然您也可以用GistBox這個web應用替
代它。 您是不是對Gist有了一個全新的認識呢?

iframe

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

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

{% iframe http://v.youku.com/v_show/id_XOTIxNDYzODU2.html 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/</b></span>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,125評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,506評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,402評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,934評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,168評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,690評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,027評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2 370

推薦閱讀更多精彩內容