難度：??
最終效果：
為了避免昂貴的服務(wù)器費(fèi)用支付，我們很多人的博客選用了 github pages, 搭配 hexo 這種靜態(tài)博客生成器，通過普通的 git workflow就可以很輕松地搭建自己的博客枢步。不過，我們總覺得有點(diǎn)不那么酷，那就自己打造一個主題吧彤守！
目錄結(jié)構(gòu)
在你的 hexo博客目錄下肯定有一個 theme目錄，這里存放主題的源碼哭靖，本次我的主題起名叫 hexo-theme-eleme,查看一下結(jié)構(gòu)：
.
├── _config.yml
├── languages
│ └── zh-CN.yml
├── layout
│ ├── archive.ejs
│ ├── category.ejs
│ ├── index.ejs
│ ├── layout.ejs
│ ├── page.ejs
│ ├── partials
│ ├── post.ejs
│ └── tag.ejs
└── source
├── css
├── favicon.ico
├── img
└── js
其中必需的是 _config.yml是指主題的配置文件具垫，languages文件夾下存放多國語言的配置（視個人喜好而定），layout文件夾下存放模板用于生成 HTML试幽，source文件夾下存放一些常用的靜態(tài)資源筝蚕。
技術(shù)選型
hexo 支持多種模板，此次我選用的是 EJS模板，CSS預(yù)處理選用了 stylus起宽，語法都比較簡單洲胖。
動手
1.配置靜態(tài)資源
layout.ejs 是整個頁面的入口，所有的頁面都基于 layout.ejs生成坯沪，區(qū)分頁面的方法是使用 hexo 內(nèi)置函數(shù)绿映，相關(guān)文檔可以在 hexo.io找到。我們首先需要引入 css和 js腐晾，在HTML 頭部：
<% if (theme.stylesheets !== undefined && theme.stylesheets.length > 0) { %>
<!-- stylesheets list from config.yml -->
<% theme.stylesheets.forEach(function(url) { %>
<link rel="stylesheet" href="<%=url_for(url)%>">
<% }); %>
<% } %>
CSS的 url我配置在了 _config.yml:
# stylesheets loaded in the <head>
stylesheets:
- /css/eleme-theme.css
這個路徑其實(shí)就是 source/css/eleme-theme.styl, hexo生成的時候會自動幫你預(yù)處理 stylus文件叉弦。 url_for()是 hexo內(nèi)置函數(shù)，幫助你找到站內(nèi)資源的 url藻糖。
需要區(qū)分 theme的 _config.yml 和 hexo 的 _config.yml
javascript同理淹冰，不過我把它放在了 body底部載入。
2.header 和 footer
頭部和腳部在所有頁面都是公用的巨柒，所以直接放在 layout.ejs中樱拴。菜單配置在 _config.yml中，直接遍歷一下：
<% Object.keys(theme.menu).forEach(function(key) { %>
<a href="<%=url_for(theme.menu[key])%>"><%=_p(key)%></a>
<% }); %>
url_for()函數(shù)前面有提及洋满，_p()函數(shù)是另一個內(nèi)置函數(shù)疹鳄，根據(jù) key獲取對應(yīng)的多語言字符串。如果不使用多語言芦岂，這里直接就用<%=key%>就可以了瘪弓。
footer同理，就不再贅述了禽最。所有的博客內(nèi)容都是一個 hexo的 body變量腺怯，直接通過<%-body%>放在頁面中。這個 body是 hexo根據(jù)不同頁面的模板渲染的 html川无。
3.index
index 頁面包括一個文章列表和一個分頁:
<%-partial('partials/recent-posts')%>
<%-partial('partials/pagination')%>
分頁組件在其他頁面也有用到呛占，所以組件需要分開。列表頁面比較容易做懦趋，hexo 的 context中可以通過 site.posts拿到所有文章晾虑，遍歷輸出標(biāo)題等信息就好了。分頁組件相對不那么好做一點(diǎn)仅叫，不過也可以從 context中拿到 page變量帜篇。
<% if (typeof page.current === 'number' && typeof page.total === 'number') { %>
<p class="page-number">
第<%=page.current%>/<%=page.total%>頁
</p>
<% } %>
4.文章和其他頁面
參考上面的代碼可以發(fā)現(xiàn)，其實(shí)大部分的操作都要基于 hexo的內(nèi)置變量诫咱，比如拿到 post后可以輸出 post的標(biāo)題笙隙，作者，內(nèi)容等坎缭，hexo都會幫我們正確地嵌套到最終的 layout.ejs中生成正確的 HTML竟痰。
5.stylus與 CSS
HTML 輸出后我們可以使用 CSS美化頁面签钩，CSS是全局的，只要通過編寫 stylus就可以預(yù)處理輸出了坏快。stylus 可以定義變量铅檩，像編程一樣寫 CSS，比如我定義一些變量在 values.styl中：
// Config
support-for-ie = false
vendor-prefixes = webkit moz ms official
//Font
font-sans = -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif
// Colors
eleme-blue = #3190e8
eleme-orange = #ff6000
eleme-red = #d83f34
然后在 eleme-theme.styl中：
@import values
就可以使用了莽鸿，stylus 語法寫起來也有點(diǎn)意思柠并，縮進(jìn)什么的比較像 python:
body
background: eleme-background-light !important
margin: 0 auto !important
max-width: eleme-max-width
font-family: font-sans
height: 100%
overflow-x: hidden
6.配置評論系統(tǒng)
評論通常放在一篇博文底部，我選用了 Disqus：
<% if(theme.comment) {%>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '<%=theme.disqus_shortname%>';
var disqus_identifier = '<%=page.path%>';
var disqus_title = '<%=page.title%>';
var disqus_url = '<%=page.permalink%>';
function run_disqus_script(disqus_script){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
run_disqus_script('count.js');
<% if(page.comments) {%>
run_disqus_script('embed.js');
<%}%>
</script>
<noscript>Please enable JavaScript to view the comments</noscript>
<% } %>
然后在 _config.yml中添加字段：
comment: true
disqus_shortname: your_short_name
使用主題
把主題文件夾放到 hexo源文件的 theme文件夾下富拗，更改 hexo的主題為 hexo-theme-eleme臼予，運(yùn)行 hexo s就可以看到了。
做出一個漂亮的主題可能需要一點(diǎn)點(diǎn) UED的幫助吧 :)
-EOF-
