hexo優化目錄

這次主要介紹一下如何使用Hexo自帶的幫助函數在站點中添加文章目錄。功能使用了Hexo提供的幫助函數，創建對應局部模塊之前，首先要想想這塊內容應該屬於哪個布局？要添加到哪個局部模塊下？考慮這些是為了整潔性，當你添加的東西越來越多的時候才不至於令自己混亂。

文章目錄

文章目錄肯定是添加到post布局上，這個毋庸置疑，因為只有看文章詳情頁的時候才需要目錄。那么我們在目錄layout/_partial/post/下創建toc.ejs文件，代碼如下：

<div id="toc" class="toc-article">
    <div class="toc-title">目錄</div>
    <%- toc(item.content, {list_number: false}) %>
</div>

這里使用了Hexo提供的toc()幫助函數，它的使用方法如下：

<%- toc(str, [options]) %>

str就是文章內容，options有兩個參數，一個是class，也就是html標簽的class值，默認為toc；一個是list_number，是否顯示列表編號，默認值是true。

接下考慮把這個局部模塊放到哪呢，既然屬於post布局，那么就看看layout/post.ejs代碼如下:

<%- partial('_partial/article', {item: page, index: false}) %>

很明顯，我們要到_partial/article.ejs文件里添加toc.ejs，添加后article.ejs代碼如下：

<div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
      <% } else { %>
            <!-- Table of Contents -->
            <% if (!index && post.toc){ %>
              <div id="toc" class="toc-article">
                <strong class="toc-title">文章目錄</strong>
                <%- toc(post.content) %>
              </div>
            <% } %>
        <%- post.content %>
      <% } %>
    </div>

1. 判斷是否有摘要以及index值，顯然post.ejs傳過來的index值為false；

2. 接下來判斷page.toc是不是不等於false，這一塊的主要作用是可以在文章的前置聲明里設置toc: false來關閉目錄功能。當沒有設置false時，插入上面寫的toc.ejs局部模塊。

OK！完美嵌入進去，接下來就是設置樣式了，進入source/css/_partial/目錄下，創建toc.styl.最后別忘了在source/css/style.styl文件里加入這句了@import '_partial/toc'。顯示如下圖，樣式可以自行調整。

toc.styl

.toc-article { background: #eee; padding: 1em; position: relative; left:2em; }

.toc-article .toc-title{ padding-bottom: 0.8em; font-weight: bold; }

#toc { line-height: 1.1em; font-size: 0.8em; float: right }

#toc .toc { padding: 0 }

#toc li , .toc li { list-style-type: none }

#toc ol { margin: 0; }

#toc .toc-child { padding-left: 1.5em }

效果如圖