好長時間不寫東西了，都在忙工作，去年三月份的時候我搞了一個hexo的博客，主題換過兩三個吧，感覺都大部分的hexo主題都是東西比較多，有那么兩三個比較簡單的，但是自己并不是很喜歡，所以去年的時候就想著自己抽時間寫一個自己的主題，但是當初看了幾個hexo主題的源碼，完全看不懂是什么，所以放棄了，今年又定了一個目標，寫一個自己的hexo主題，終于終于在文章寫一個自己的Hexo主題和該文中提到的作者自己寫的主題hexo-showonne的啟發下，開始了自己的hexo主題之旅，之后更參考自己用了很長時間的hexo主題——hexo-theme-icarus進行了修正。

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

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

搭建項目

參考大多數的hexo主題的目錄結構不難發現，大部分都會有layout、source以及配置文件_config.yml，所以具體目錄如下：

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

項目基于gulp搭建，hexo默認使用stylus，但是我使用的scss，然后生成css，但是在項目過程中發現一個問題（同時明白為什么hexo默認使用stylus,可以直接識別styl文件），hexo提供了hexo-config方法，可以讀取_config.yml中的配置。所以如果想要在_config.yml中動態設置代碼的高亮主題，可以在stylus中寫如下代碼：

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

@import "highlight/" + highlight

但是我在項目中使用的是gulp-sass編譯成的css文件，無法實現根據_config.yml動態的引入文件，所以準備下次改的時候直接換stylus（雖然hexo可以通過裝插件識別scss，但是自己測試并未成功）。

布局

布局文件layout.ejs

在layout文件夾下，布局被寫在layout.ejs中，由于hexo支持模塊兒化布局，使用hexo提供的局部函數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默認使用ejs語法，但是可以通過安裝插件使用Haml和Jade（Jade以前看過，并不喜歡縮進的寫法，所以在開發工程中也沒用使用同樣使用縮進語法的stylus）。

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

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

其他模版

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

變量

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

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

另外在參看主題hexo-theme-icarus的源碼發現一些變量的使用，但是我在官方文檔中并沒有找到。

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

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

輔助函數

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

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

關于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中添加相應的script標簽插入代碼即可，以前的時候用多說，現在多說要關閉了，準備換個，但是找來找去沒找到一個比較適合的，同事介紹有一個叫來必力的還不錯，試用確實覺得可以，可以替代多說，所以推薦一下。官方網站。

代碼高亮

代碼高亮其實就是引入一段css的代碼，為了實現可以通過配置文件動態引入，就需要配合hexo-config，前面已經提到過，這里不再重復。

最后

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

另外，當前這個版本功能相對簡單一點兒而且在后期的修改過程中發現用scss確實不如直接用stylus方便一些，所以準備在以后改用stylus。

參考

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