出發(fā)點(diǎn)
其實(shí)本來(lái)是想找一個(gè)好看的逼格高的hexo主題的。
可是。。
尼瑪hexo.io打開(kāi)要好久有木有，根本就打不開(kāi)有木有。
就算運(yùn)氣好，翻著墻打開(kāi)了，點(diǎn)到theme的列表，又打不開(kāi)了阿西吧啊。
點(diǎn)開(kāi)了theme列表，結(jié)果選擇主題的時(shí)候又是各種的慢打不開(kāi)啊有木有。。。
干脆自己寫(xiě)一個(gè)
花了一天半寫(xiě)了一個(gè)hexo的主題。總體來(lái)說(shuō)反正目前在我的chrome的環(huán)境下還是沒(méi)啥bug的，因?yàn)楸緛?lái)也不大，這也說(shuō)明了一個(gè)道理，其實(shí)很多看別人寫(xiě)的很牛逼的東西，別人各種寫(xiě)出好用好看的組件啊或者庫(kù)啊之類的，其實(shí)也是一磚一瓦壘起來(lái)的。只要你用心去弄，也可以弄個(gè)大概模樣的東西。
正文
第一步搭架子
第一步肯定是要?jiǎng)?chuàng)建一個(gè)骨架子，每一個(gè)主題其實(shí)可以理解成就是ejs+js+css。
讓我們從頭開(kāi)始把：先安裝hexo-cli生成器
```npm install hexo-cli -g```
安裝好了hexo之后，用hexo init創(chuàng)建你的blog項(xiàng)目。
創(chuàng)建了之后cd到themes主題文件夾里面。
這里我是在網(wǎng)上找到了一個(gè)hexo 的theme結(jié)構(gòu)生成器;是github上面隨便找的一個(gè)
https://github.com/tcrowe/generator-hexo-theme
可能有更好的吧。不過(guò)這些不是重點(diǎn)，重點(diǎn)是我們創(chuàng)建好了一個(gè)主題骨架。
這個(gè)是我的主題的目錄結(jié)構(gòu)；
里面的東西不多，可以看到layout里面放的是ejs文件，source是靜態(tài)資源文件，我習(xí)慣用的stylus+js?？梢詥为?dú)在這個(gè)主題文件夾下創(chuàng)建git庫(kù)然后放到github上。
我做完之后的github地址：https://github.com/Yidada/z-index
好了，第一步我們的骨架子就弄好了。
第二步開(kāi)發(fā)
這個(gè)其實(shí)就是自我發(fā)揮釋放天性的時(shí)候了。
主要提下layout文件夾里面的ejs文件，有一個(gè)layout.ejs這個(gè)是所有頁(yè)面的主頁(yè)面，如果之前用過(guò)ejs的一定知道ejs能夠嵌套其他的ejs文件，所有的ejs都是嵌套在layout.ejs里面的。打開(kāi)layout.ejs可以看到。
我截了一塊body里面的，整個(gè)內(nèi)容頁(yè)面呢就在這里分成了header、body、footer然后具體里面的內(nèi)容就在layout文件夾下面的partials文件夾里面的各個(gè)ejs文件。不同的路由hexo會(huì)去填充不同的ejs。
我們可以先運(yùn)行下，看下最原始的主題是啥樣子。cd到整個(gè)blog項(xiàng)目的目錄下，修_config.yml文件，修改里面的theme字段為你的主題的名字（一定要記得修改，:號(hào)后面一定要空格），我這里就是z-index，然后運(yùn)行hexo s 等跑起來(lái)了，瀏覽器打開(kāi)默認(rèn)的地址是：localhost:4000能夠看到。。。。。
恩，就是這么原始，就是這么樸素。
好了，趕緊開(kāi)始我們自己的主題開(kāi)發(fā)吧。
默認(rèn)會(huì)css文件夾里面會(huì)有一個(gè)跟你的主題名字一樣的.css文件，js也一樣。這兩個(gè)就是主戰(zhàn)場(chǎng)了，具體的開(kāi)發(fā)看自己了。
- reset.css咯
- 從index.ejs一個(gè)一個(gè)的對(duì)照著頁(yè)面寫(xiě)樣式
哥們自己這里因?yàn)樘貏e喜歡clip-path這個(gè)屬性，所以寫(xiě)了一個(gè)loading的組件。
文章的排版
首頁(yè)啊亂七八糟的頁(yè)面的樣式都是老的東西，不過(guò)這里想特別的提下文章的樣式。這個(gè)其實(shí)挺頭疼的，因?yàn)椴┛筒┛妥詈诵牡漠?dāng)然就是文章了，可是感覺(jué)如果每種樣式去調(diào)教去寫(xiě)的話又可以出個(gè)文章了。
所以在這里。。。大大的安利一個(gè)sofish大大的http://typo.sofi.sh/中文網(wǎng)頁(yè)的重設(shè)與排版。很好看，用的也很爽。因?yàn)橐彩窃?typo下的，也不會(huì)污染其他的元素。
后續(xù)
好像沒(méi)有太多的后續(xù)了，hexo配置好之后，先generate再deploy就行了。
原文鏈接：
PS:一定要chrome或者safari打開(kāi)。要不然首頁(yè)之類的效果會(huì)看的很惡心哈哈哈。
