完成乙個hexo的主題其實很簡單，和寫靜態頁面差不多，只是內容部分通過hexo的變數去獲取，而且hexo還內建了一些輔助函式幫你快速方便地完成繁瑣的處理。
在寫**之前要先把專案結構搭建好，乙個hexo主題的專案名就是主題名字本身，專案內的目錄結構如下: (生成樹形圖是用的tree， mac上直接brew install tree就可以了，以前不寫都不知道囧)
.
├── _config.yml //記錄主題配置資訊
├── layout //存放布局模板檔案
│ └── _partial //布局檔案中可共用的模板
└── source //靜態資源資料夾
├── css
├── fonts
├── js
└── sass
landscape寫的，而且ejs也是我之前看nodejs時就接觸過的，因此就直接用ejs寫模板檔案了，樣式使用了sass (scss。
編寫布局檔案(layout.ejs)
模板檔案在layout資料夾下，檔名對應hexo中的模板名，有index,post,page,archive,category,tag幾種，對於普通的header + content + footer的頁面結構，header和footer往往是可以復用的，因此我們可以使用layout.ejs進行布局，動態的內容使用body變數去動態渲染，所以我的layout.ejs大概長這樣:
<%- partial('_partial/header') %>
<%- body %>
<%- partial('_partial/footer') %>
<%- js('js/index.js') %>
partial,js和css是hexo提供的輔助函式，後面再說。
其他模板檔案
每乙個模板檔案對應的是一種布局，當你使用hexo new的時候，其實忽略了乙個引數，完整的命令是hexo new [layout]，這個layout就決定了文章使用何種方式布局，比如建立乙個自己簡介的about頁面，hexo new page "about"其實就是使用了page布局。每種布局對應到我們的模板檔案上就是index.ejs(首頁),post.ejs(文章),archive.ejs(歸檔),tag.ejs(標籤歸檔),page.ejs(分頁)。
如果更直觀一點，url和模板的對應關係是這樣的:
urldescription
layout/首頁
index.ejs
/yyyy/mm/dd/:title/
文章post.ejs
/archives/
歸檔archive.ejs
/tags/:tagname/
某個標籤的歸檔
tag.ejs
/:else/
其他page.ejs
index.ejs
首頁一般是一些博文的摘要和乙個分頁器，通過hexo的page變數拿到頁面的資料渲染即可，這裡我們不直接在index.ejs中寫html結構，新建乙個_partial/article.ejs，將文章資料傳給子模板渲染，然後再額外傳入乙個引數，對後面的post.ejs和page.ejs加以區分，讓子模板能正確渲染。最後，index.ejs大致是這樣的:
<% page.posts.each(function(post, index)) %>
<% }) %>
<%- paginator() %>
文章模板和首頁差不多，只是對應的是一篇具體的文章，所以就把文章傳入，再額外傳入告訴子模板不要按首頁的方式去渲染就好了。就一行**(因為都在子模板裡 xd
<%- partial('_partial/article', ) %>
我個人對page模板其實是有點懵逼的，在我自己的實踐中是新增about(hexo new page "about")頁面後，訪問/about會走分頁布局，實際上這個頁面對應的內容是/source/about裡的index.md，也相當於對文章的渲染，因此我把page模板也寫成了和文章模板一樣:
<%- partial('_partial/article', ) %>
前面一共有三處共用了article模板，另外page和post的一樣的，所以實際上只有兩種情況:主頁(index: true)和非主頁(index: false)。對應的_partial/article.ejs裡只要判斷這個值就可以正確渲染了，基本結構如下：
//_partial/article.ejs
<% if(index)else %>
標籤歸檔頁內容很少，直接用hexo的輔助函式list_tags生成乙個標籤的列表就ok了:
<%- list_tags() %>
<% var lastyear; %>
<% page.posts.each(function(post) %>
"><%= post.title %>
<%= post.date.format('yyyy-mm-dd') %>
<% }) %>
<%- paginator() %>
category模板就放棄了，感覺比較雞肋。。。
其實在模板檔案中我們已經看到了page.post,site.posts.length,config.per_page等等，頁面的內容就是根據這些變數獲取的，由hexo提供，拿來直接用，hexo提供了很多變數，但不是都很常用，一般就用到以下變數:
製作乙個分頁器，我們需要知道文章的總數和每頁展示的文章數，然後通過迴圈生成每個link標籤，還要根據當前頁面判斷link標籤的active狀態，但是在hexo中這些都不用我們自己來做了!hexo提供了paginator這一輔助函式幫助我們生成分頁器，只需要將文章總數site.posts.length和每頁文章數config.per_page傳入就可以生成了。
其他的helper:知道了hexo的渲染方式，我們就可以使用html標籤+css樣式個性化我們的主題了，推薦大家使用css預處理語言的一種來寫樣式，這樣就可以通過預處理語言自身的特點讓樣式更靈活。
新增對多說和disqus的支援
//_partial/article.ejs
<%- post.content %>
<% if(post.comments)else if(config.disqus_shortname) %>
<% } %>
_partial/duoshuo.ejs和_partial/disqus.ejs下就ok了~
使用highlight.js提供**高亮
highlight.js提供了多種語言的支援和多種**，用法也很簡單，載入檔案後呼叫初始化方法，一切都幫你搞定，對於使用那種**，喜好因人而異，我們乾脆在主題的配置檔案中做成配置項讓使用者自己選擇:
//showonne/_config.yml
...other configs
# highlight.js
highlight_theme: zenburn
layout.ejs中:
樣式檔案通過cdn引入，因為不同**對應不同的檔名，所以十分靈活。
當初是對應著landscape照葫蘆畫瓢寫的，最近回頭來發現一些不合理的地方，所以就又改了改，也對應著寫了這麼一篇總結，接下來準備再把樣式劃分一下，對於顏色這類樣式通過變數的方式提取出來，也變得可配置，能讓主題更靈活一些。
參考資源
了解輔助函式
模板hexo中的變數
hexo主題列表
hexo使用多說教程
how to use highlight.js
hexo 如何更換主題 刪除文章
自己製作主題並且發布供所有人共享的情況稍微複雜一些，這裡不做詳細說明，感興趣的同學看上面傳遞門中的內容即可。這裡主要講解下，如何把主題修改為公共庫中的主題，把自己的部落格改造成自己喜歡的樣子。我們知道hexo官方共享的themes有很多，可以在hexo themes collection中檢視。開啟...
hexo 修改主題
進入你的hexo專案中修改顯示主題 在專案目錄下查詢 config.yml找到theme theme next 將主題名給我next，注意的是在next前面有個空格hexo s debug 重啟服務，用debug的模式啟動設定語言與 名以及語言和時區 title 詩和田野 名稱 subtitle 生...
hexo更改主題
github hexo搭建好個人部落格之後，一般都挑選自己喜歡的主題。在這裡為大家介紹一下比如何挑選主題以及如何修改主題。主題選擇 2 hexo官方 本地目錄中開啟git bash git轉殖完成後，開啟當前目錄下的 config.yml 配置檔案。回到git bash，輸入除錯命令 hexo g ...