好長時間不寫東西了批狐，都在忙工作滨彻，去年三月份的時候我搞了一個hexo的博客，主題換過兩三個吧本刽，感覺都大部分的hexo主題都是東西比較多鲸湃，有那么兩三個比較簡單的，但是自己并不是很喜歡子寓，所以去年的時候就想著自己抽時間寫一個自己的主題暗挑，但是當(dāng)初看了幾個hexo主題的源碼，完全看不懂是什么斜友，所以放棄了炸裆，今年又定了一個目標(biāo)，寫一個自己的hexo主題鲜屏，終于終于在文章寫一個自己的Hexo主題和該文中提到的作者自己寫的主題hexo-showonne的啟發(fā)下烹看，開始了自己的hexo主題之旅，之后更參考自己用了很長時間的hexo主題——hexo-theme-icarus進(jìn)行了修正洛史。

我的博客就是用的我寫的主題惯殊，博客地址：https://mrzhang123.github.io/

項目地址：https://github.com/MrZhang123/hexo-theme-SpecLumn

搭建項目

參考大多數(shù)的hexo主題的目錄結(jié)構(gòu)不難發(fā)現(xiàn)，大部分都會有l(wèi)ayout也殖、source以及配置文件_config.yml土思，所以具體目錄如下：

├── _config.yml      #主題的配置文件
├── layout          #布局模版文件夾 
│   ├── comment     #評論相關(guān)模版
│   ├── common      #公共的模版
│   │   └── post    #post頁相關(guān)模版
│   └── plugin      #插件
├── source          #主題的css和js
│   └── css
│       └── images  #主題中用到的圖片
└── source_src      #scss所在的文件夾
    └── scss
        ├── code-style
        └── markdown-style

項目基于gulp搭建，hexo默認(rèn)使用stylus忆嗜，但是我使用的scss己儒，然后生成css，但是在項目過程中發(fā)現(xiàn)一個問題（同時明白為什么hexo默認(rèn)使用stylus,可以直接識別styl文件）捆毫，hexo提供了hexo-config方法闪湾，可以讀取_config.yml中的配置。所以如果想要在_config.yml中動態(tài)設(shè)置代碼的高亮主題绩卤，可以在stylus中寫如下代碼：

/*
一個三元表達(dá)式設(shè)置默認(rèn)主題
然后在index.styl中設(shè)置引入的表達(dá)式
*/
highlight = hexo-config("customize.highlight") || "tomorrow"

@import "highlight/" + highlight

但是我在項目中使用的是gulp-sass編譯成的css文件响谓，無法實現(xiàn)根據(jù)_config.yml動態(tài)的引入文件损合，所以準(zhǔn)備下次改的時候直接換stylus（雖然hexo可以通過裝插件識別scss，但是自己測試并未成功）娘纷。

布局

布局文件layout.ejs

在layout文件夾下嫁审，布局被寫在layout.ejs中，由于hexo支持模塊兒化布局赖晶，使用hexo提供的局部函數(shù)partial載入其他模版文件律适，配合ejs的語法，布局文件layout.ejs：

<%- partial('common/head') %>
<div class="content">
    <%- partial('common/header') %>
    <div class="main">
        <%- body %>
    </div>
</div>
<%- partial('common/footer') %>
<%- partial('common/foot') %>
</body>
</html>

hexo默認(rèn)使用ejs語法遏插，但是可以通過安裝插件使用Haml和Jade（Jade以前看過捂贿，并不喜歡縮進(jìn)的寫法，所以在開發(fā)工程中也沒用使用同樣使用縮進(jìn)語法的stylus）胳嘲。

項目中直接使用了ejs厂僧，所以這里簡要列一下ejs中tag的使用：

• <%' 腳本標(biāo)簽，用于控制流程了牛，不會輸出
• <%= 將轉(zhuǎn)義的值輸出到模版
• <%- 將未轉(zhuǎn)義的值輸出到模版
• <%# 注釋標(biāo)簽
• <%% 輸出 '<%'
• %> 閉合標(biāo)簽
• -%> Trim-mode ('newline slurp') 標(biāo)簽, 移除隨后的換行符

其他模版

在我的主題中只有主頁index.ejs颜屠，文章頁post.ejs。

變量

模版中獲取文章鹰祸，調(diào)用配置項等會使用到變量甫窟，hexo提供了很多變量供我們使用（hexo提供的變量），其中比較重要的有：

• page：針對該頁面的內(nèi)容以及 front-matter 所設(shè)定的變量
• config：網(wǎng)站配置（hexo的_config.yml）
• theme：主題配置（theme的_config.yml）
• url：當(dāng)前頁面的完整網(wǎng)址
• path：當(dāng)前頁面的路徑（不含根路徑）

另外在參看主題hexo-theme-icarus的源碼發(fā)現(xiàn)一些變量的使用蛙婴，但是我在官方文檔中并沒有找到粗井。

• post.title：文章的題目
• post.excerpt：文章的摘要，即寫文章的時候``之上的那段兒街图，首頁顯示
• post.comments：評論模塊
• post.photots：文章中插入的圖片
• post.content：文章內(nèi)容
• post.date：文章的時間

以上均獲取的是hexo生成的markdown文件中的配置浇衬。

輔助函數(shù)

在hexo中同樣提供了很多輔助函數(shù)方便在博客主題中使用，但是同樣很多都用不著餐济，常用的有：

• url_for：輸出路徑
• partial：載入其他模版文件
• css：載入css文件
• js：載入js文件
• data_xml：插入 XML 格式的日期
• paginator：生成分頁耘擂，其中可以插入配置，partial一樣颤介，例如改變上一頁下一頁的文字，可以配置{ prev_text: '? 上一頁', next_text: '下一頁 ?'}

關(guān)于partical需要注意幾點

1. 它可以添變量赞赖，在被引用文件直接可以飲用滚朵，例如：

/*引用*/
<%- partial('plugin/scripts', { isHead: true }) %>
/*被引用文件判斷*/
<% if (typeof(isHead) !== 'undefined' && isHead) { %>

<% } %>

2. 可以添加class名字

<%- partial('post/date', { class_name: 'article-date', date_format: null }) %>

其他

評論

hexo中添加評論只需要在ejs中添加相應(yīng)的script標(biāo)簽插入代碼即可，以前的時候用多說前域，現(xiàn)在多說要關(guān)閉了辕近，準(zhǔn)備換個，但是找來找去沒找到一個比較適合的匿垄，同事介紹有一個叫來必力的還不錯移宅，試用確實覺得可以归粉，可以替代多說，所以推薦一下漏峰。官方網(wǎng)站糠悼。

代碼高亮

代碼高亮其實就是引入一段css的代碼，為了實現(xiàn)可以通過配置文件動態(tài)引入浅乔，就需要配合hexo-config倔喂，前面已經(jīng)提到過，這里不再重復(fù)靖苇。

最后

最后寫一點自己的想法席噩，說實話，hexo的官方文檔贤壁，實在是爛的沒話可說悼枢，跟webpack1的文檔不相上下，估計連作者自己都不一定看得懂脾拆，所以要想自己寫一個主題的同學(xué)們還是在github參考一下寫的比較好的主題的源碼吧馒索。

另外，當(dāng)前這個版本功能相對簡單一點兒而且在后期的修改過程中發(fā)現(xiàn)用scss確實不如直接用stylus方便一些假丧，所以準(zhǔn)備在以后改用stylus双揪。

參考

hexo-theme-icarus
寫一個自己的Hexo主題
hexo-showonne