出發(fā)點(diǎn)
其實(shí)本來(lái)是想找一個(gè)好看的逼格高的hexo主題的。
可是印蔬。勋桶。
尼瑪hexo.io打開要好久有木有，根本就打不開有木有侥猬。
就算運(yùn)氣好例驹，翻著墻打開了，點(diǎn)到theme的列表退唠，又打不開了阿西吧啊鹃锈。
點(diǎn)開了theme列表，結(jié)果選擇主題的時(shí)候又是各種的慢打不開啊有木有瞧预。屎债。。
干脆自己寫一個(gè)
花了一天半寫了一個(gè)hexo的主題松蒜∪用總體來(lái)說(shuō)反正目前在我的chrome的環(huán)境下還是沒(méi)啥bug的，因?yàn)楸緛?lái)也不大秸苗，這也說(shuō)明了一個(gè)道理，其實(shí)很多看別人寫的很牛逼的東西运褪，別人各種寫出好用好看的組件啊或者庫(kù)啊之類的惊楼，其實(shí)也是一磚一瓦壘起來(lái)的。只要你用心去弄秸讹，也可以弄個(gè)大概模樣的東西檀咙。
正文
第一步搭架子
第一步肯定是要?jiǎng)?chuàng)建一個(gè)骨架子，每一個(gè)主題其實(shí)可以理解成就是ejs+js+css璃诀。
讓我們從頭開始把：先安裝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
好了秋柄，第一步我們的骨架子就弄好了。
第二步開發(fā)
這個(gè)其實(shí)就是自我發(fā)揮釋放天性的時(shí)候了蠢正。
主要提下layout文件夾里面的ejs文件华匾，有一個(gè)layout.ejs這個(gè)是所有頁(yè)面的主頁(yè)面，如果之前用過(guò)ejs的一定知道ejs能夠嵌套其他的ejs文件机隙，所有的ejs都是嵌套在layout.ejs里面的蜘拉。打開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)了油宜，瀏覽器打開默認(rèn)的地址是：localhost:4000能夠看到掂碱。。慎冤。疼燥。。
恩蚁堤，就是這么原始醉者，就是這么樸素。
好了披诗，趕緊開始我們自己的主題開發(fā)吧撬即。
默認(rèn)會(huì)css文件夾里面會(huì)有一個(gè)跟你的主題名字一樣的.css文件，js也一樣藤巢。這兩個(gè)就是主戰(zhàn)場(chǎng)了搞莺，具體的開發(fā)看自己了。
- reset.css咯
- 從index.ejs一個(gè)一個(gè)的對(duì)照著頁(yè)面寫樣式
哥們自己這里因?yàn)樘貏e喜歡clip-path這個(gè)屬性掂咒，所以寫了一個(gè)loading的組件才沧。
文章的排版
首頁(yè)啊亂七八糟的頁(yè)面的樣式都是老的東西迈喉，不過(guò)這里想特別的提下文章的樣式。這個(gè)其實(shí)挺頭疼的温圆，因?yàn)椴┛筒┛妥詈诵牡漠?dāng)然就是文章了挨摸，可是感覺如果每種樣式去調(diào)教去寫的話又可以出個(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打開。要不然首頁(yè)之類的效果會(huì)看的很惡心哈哈哈肺素。
