通過(guò)前面的介紹究西，Hexo站點(diǎn)的布局應(yīng)該了解得差不多了识啦，這次主要介紹一下如何使用Hexo自帶的幫助函數(shù)在站點(diǎn)中添加歸檔以及文章目錄捏浊。添加這兩塊功能都是使用了Hexo提供的幫助函數(shù)福扬，創(chuàng)建對(duì)應(yīng)局部模塊之前毅贮，首先要想想這兩塊內(nèi)容應(yīng)該屬于哪個(gè)布局昆咽？要添加到哪個(gè)局部模塊下驾凶？考慮這些是為了整潔性，當(dāng)你添加的東西越來(lái)越多的時(shí)候才不至于令自己混亂掷酗。
一调违、文章目錄
文章目錄肯定是添加到post布局上，這個(gè)毋庸置疑泻轰，因?yàn)橹挥锌次恼略斍轫?yè)的時(shí)候才需要目錄技肩。那么我們?cè)谀夸?code>layout/_partial/post/下創(chuàng)建toc.ejs文件，代碼如下：
<div id="toc" class="toc-article">
<div class="toc-title">目錄</div>
<%- toc(item.content, {list_number: false}) %>
</div>
這里使用了Hexo提供的toc()幫助函數(shù)浮声，它的使用方法如下：
<%- toc(str, [options]) %>
str就是文章內(nèi)容虚婿，options有兩個(gè)參數(shù)，一個(gè)是class泳挥，也就是html標(biāo)簽的class值然痊，默認(rèn)為toc；一個(gè)是list_number屉符，是否顯示列表編號(hào)剧浸，默認(rèn)值是true。
接下考慮把這個(gè)局部模塊放到哪呢矗钟，既然屬于post布局辛蚊，那么就看看layout/post.ejs代碼如下:
<%- partial('_partial/article', {item: page, index: false}) %>
很明顯，我們要到_partial/article.ejs文件里添加toc.ejs真仲，添加后article.ejs代碼如下：
......
<div class="entry">
<% if (item.excerpt && index){ %> <!--01-->
<%- item.excerpt %>
<% } else { if (item.toc !== false) {%> <!--02-->
<%- partial('post/toc') %>
<% } %>
<%- item.content %>
<% } %>
</div>
......
01袋马、判斷是否有摘要以及index值，顯然post.ejs傳過(guò)來(lái)的index值為false秸应；
02虑凛、接下來(lái)判斷page.toc是不是不等于false碑宴，這一塊的主要作用是可以在文章的前置聲明里設(shè)置toc: false來(lái)關(guān)閉目錄功能。當(dāng)沒(méi)有設(shè)置false時(shí)桑谍，插入上面寫的toc.ejs局部模塊延柠。
OK！完美嵌入進(jìn)去锣披，接下來(lái)就是設(shè)置樣式了贞间，進(jìn)入source/css/_partial/目錄下，創(chuàng)建toc.styl雹仿，代碼這里就不貼出了增热，具體查看github。最后別忘了在source/css/style.styl文件里加入這句了@import '_partial/toc'胧辽。顯示如下圖峻仇，樣式可以自行調(diào)整。
二邑商、歸檔sidebar
默認(rèn)的hexo-theme-light主題沒(méi)有添加歸檔的sidebar掛件摄咆，于是我將該widget添加到了主題light-ch中。先看一下效果如下圖：
sidebar中的局部模塊都在layout/_widget中人断，于是在該文件夾下創(chuàng)建archive.ejs吭从，代碼如下：
<% if (site.posts.length){ %>
<div class="widget tag">
<h3 class="title">歸檔</h3>
<%- list_archives({format: "YYYY年MM月"}) %>
</div>
<% } %>
然后在主題的配置文件中_config.yml中加入該widget，如下所示：
widgets:
- category
- archive
- tagcloud
- weibo
最后就是設(shè)置樣式了恶迈，在source/css/_partial/sidebar.styl文件中加入了這么一段就能如上顯示了影锈。
.archive-list
font-size 0.9em
padding 15px 20px
.archive-list-count
margin-left 8px
font-size 0.8em
color color-meta
&:before
content '('
&:after
content ')'
這段樣式是為了和分類列表保持一致。詳細(xì)代碼參照github來(lái)自定義樣式蝉绷。
總結(jié)
這里通過(guò)添加文章目錄以及歸檔側(cè)邊欄的實(shí)戰(zhàn)練習(xí)鸭廷，大致了解了如何在Hexo站點(diǎn)中添加局部模塊和widget，基本上也就這兩種類型熔吗。
諸如添加百度統(tǒng)計(jì)辆床、多說(shuō)評(píng)論以及微博小插件等等，都可以歸屬為上述兩類桅狠，這里就不再贅述讼载，詳情可以參照github上代碼，有什么問(wèn)題可以隨時(shí)向我提issue中跌。
