前言

hexo_logo.png

現(xiàn)在我們的blog是基于Hexo生成了诀紊，同時(shí)我下載了現(xiàn)在最為流行的主題next和yilia

當(dāng)然Hexo的主題不僅僅是這兩個(gè)芝雪，之所以看它們是因?yàn)槭褂盟鼈兊娜藬?shù)最多，而且主題也在持續(xù)更新中，功能也非常齊全，如果不是特別愛折騰直接挑選他們就ok了捕虽，

但是，恰恰我喜歡折騰坡脐，用著別人開發(fā)好的主題薯鳍，總是覺得少了那么一點(diǎn)意思，雖然我現(xiàn)在寫不出Hexo這樣的靜態(tài)頁面生成框架挨措，但是主題就是頁面顯示總得自己弄一個(gè)了吧。而且用他們的主題感覺很多東西都不能讓我更好的表達(dá)我自己崩溪。

思考

想制作一個(gè)主題浅役，基本知識(shí)就應(yīng)該具備咯，HTML,CSS,JavaScript伶唯，這些是最基本觉既，不然一個(gè)基本頁面都做不出來，然后高級(jí)一些就是使用框架乳幸，使用一些庫(kù)瞪讼。只要基礎(chǔ)扎實(shí)些，剩下的可以慢慢磨粹断，一邊做一邊學(xué)習(xí)符欠。

現(xiàn)在我們來分析一下Hexo的具體工作機(jī)制。

image.png

hexo可以粗略分為三個(gè)子項(xiàng)目瓶埋，分別是:

• hexo-cli

• hexo (下文中用hexo core來指代)

• hexo plugins

其中hexo plugins不是指某一個(gè)單獨(dú)的項(xiàng)目希柿，而是泛指所有的hexo plugin項(xiàng)目。
請(qǐng)看下圖:

image.png

讓我們結(jié)合這張圖來大致看看這三個(gè)項(xiàng)目的作用(下面的鏈接均是指向Github中相關(guān)的源碼):

• hexo-cli: hexo命令行項(xiàng)目养筒，作用是:
  1. 啟動(dòng)hexo命令(進(jìn)程)曾撤，及其參數(shù)解析機(jī)制。每次我們輸入’hexo xxx’命令后晕粪，都會(huì)通過node調(diào)用hexo-cli中的entry函數(shù)(比如挤悉，可以把’hexo init’視為’node hexo-cli/entry.js init’)
  2. 實(shí)現(xiàn)hexo命令的三個(gè)初始參數(shù)(功能): init / version / help
  3. 加載hexo核心模塊，并初始化
• hexo core: hexo核心巫湘，他的主要作用如下:
  1. 實(shí)現(xiàn)了hexo功能擴(kuò)展對(duì)象
  2. 實(shí)現(xiàn)了hexo核心功能, 如new, publish, generate等（其實(shí)是一些hexo插件装悲，下文中會(huì)詳細(xì)分析）
• hexo plugins: 指一些能夠擴(kuò)展hexo的插件。插件可以按功能分成兩類:
  1. 擴(kuò)展hexo命令的參數(shù)尚氛，如hexo-server(安裝這個(gè)插件以后才能使用hexo server命令)
  2. 擴(kuò)展hexo解析文件的”能力”衅斩，如增加jade模版解析功能的hexo-render-jade插件

從markdown到html的旅程

簡(jiǎn)單來說，hexo中怠褐，從markdown到html的generate過程中做了兩件事：

模板渲染
模板渲染
是的畏梆，就是這樣，就是兩次模板渲染。只不過兩次渲染的輸入奠涌、渲染模板的引擎宪巨、輸出不一樣。此處應(yīng)該有一個(gè)表格：

image.png

還得有一張圖:

image.png

對(duì)上面表格和圖的說明:

• hexo core在generate的過程中會(huì)產(chǎn)生一個(gè)對(duì)象溜畅，我們?cè)谶@里把這個(gè)對(duì)象稱為article捏卓。第一次渲染的主要目的就是給這個(gè)對(duì)象添加title,content等屬性。其中:
  1.article.title, article.date, article.tags, article.categories等屬性來自yml front的部分
  2.article.content是markdown文章解析后的html片段

• hexo項(xiàng)目目錄下包含三個(gè)子目錄慈格，
  source目錄怠晴，寫博客的主要工作目錄。這個(gè)目錄下存放的是我們的markdown文章以及js, images, css
  themes目錄浴捆，主題目錄蒜田，定義了即將生成的html的layout, 和html中需要加載的css, js, images
  public目錄, hexo generate的最終輸出目錄。里面包含了整個(gè)博客網(wǎng)站的html, css, js, images

• 第二次渲染选泻，需要引入對(duì)應(yīng)模板文件格式的插件冲粤，如.ejs文件就需要使用hexo-render-ejs插件，.jade文件需要使用hexo-render-jade插件页眯，而.sass文件則需要hexo-render-sass插件來轉(zhuǎn)換成css文件梯捕。hexo的這一設(shè)計(jì)有點(diǎn)類似webpack中的loader。

hexo插件是如何工作的

hexo和webpack還有一點(diǎn)類似的地方就是插件驅(qū)動(dòng)理念窝撵。即hexo(和webpack)是先實(shí)現(xiàn)一套(插件)擴(kuò)展系統(tǒng)傀顾，然后再往擴(kuò)展系統(tǒng)中添加插件來實(shí)現(xiàn)自身的功能。即我們?nèi)粘Ｊ褂玫膆exo init, hexo new碌奉，hexo generate等等功能都是通過一個(gè)個(gè)插件(其實(shí)就是一個(gè)個(gè)function)實(shí)現(xiàn)的锣笨。

具體來講就是:

1. hexo.extend這個(gè)對(duì)象的每個(gè)屬性都是一個(gè)用來綁定(特定)插件的對(duì)象。（所謂”綁定”道批，其實(shí)就是對(duì)象的register方法）
2. hexo初始化過程中先加載內(nèi)部插件错英，再加載外部插件

而這些插件的功能分為兩大類: 命令行插件和generate過程相關(guān)功能，例如：

• 命令行插件, hexo

  new, 是在hexo.extend.console對(duì)象上綁定的一個(gè)插件

• generate過程相關(guān)的插件隆豹，如上文提到的往article對(duì)象添加title,content等屬性的功能椭岩，是通過往hexo.extend.processer對(duì)象上綁定post插件來實(shí)現(xiàn)的

所以，當(dāng)我們想自己動(dòng)手寫插件時(shí)璃赡，就是像hexo官網(wǎng)給出的這樣,調(diào)用某個(gè)對(duì)象的register方法判哥，如hexo.extend.console.register。

image.png

如上圖碉考，(用戶通過瀏覽器訪問到的)git page上的博客網(wǎng)站其實(shí)是hexo generate之后生成的public目錄下的內(nèi)容塌计。

所以，一個(gè)hexo博客項(xiàng)目應(yīng)該有兩個(gè)倉(cāng)庫(kù):

• 1. (基于hexo init結(jié)果的)博客編寫倉(cāng)庫(kù)侯谁⌒拷觯可以把這個(gè)項(xiàng)目看成一個(gè)代碼庫(kù)章钾，用來”開發(fā)”博客網(wǎng)站(包含寫博客，生成博客等任務(wù))
• 2. 存放(hexo generate結(jié)果的)public目錄倉(cāng)庫(kù)热芹。這個(gè)項(xiàng)目是”只讀”的贱傀，我們不會(huì)直接修改這個(gè)倉(cāng)庫(kù)的內(nèi)容，我們也不會(huì)對(duì)這個(gè)倉(cāng)庫(kù)直接進(jìn)行g(shù)it pull伊脓、git commit府寒、git push等常規(guī)操作。這個(gè)倉(cāng)庫(kù)的內(nèi)容就是public目下的內(nèi)容报腔，即是通過hexo generate產(chǎn)生株搔、hexo deploy提交的。

先介紹一下Hexo的工作原理纯蛾，待續(xù)纤房。。茅撞。。巨朦。米丘。。糊啡。拄查。。棚蓄。堕扶。。梭依。稍算。。役拴。糊探。。河闰。科平。。姜性。瞪慧。