hexo優化目錄

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

文章目錄肯定是新增到post布局上，這個毋庸置疑，因為只有看文章詳情頁的時候才需要目錄。那麼我們在目錄layout/_partial/post/下建立toc.ejs檔案，**如下：

id="toc"

class="toc-article">

class="toc-title">目錄div>

div>

這裡使用了hexo提供的toc()幫助函式，它的使用方法如下：

str就是文章內容，options有兩個引數，乙個是class，也就是html標籤的class值，預設為toc；乙個是list_number，是否顯示列表編號，預設值是true。

接下考慮把這個區域性模組放到哪呢，既然屬於post布局，那麼就看看layout/post.ejs**如下:

很明顯，我們要到_partial/article.ejs檔案裡新增toc.ejs，新增後article.ejs**如下：

class="article-entry"
itemprop="articlebody">
div>判斷是否有摘要以及index
值，顯然post.ejs傳過來的index值為false； 
接下來判斷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
.toc-article
.toc-title
#toc
#toc
.toc
#toc
li , .toc
li#toc
ol#toc
.toc-child

效果如圖

hexo優化目錄

hexo新增 hexo 如何給文章新增目錄

hexo部落格壓縮優化

Hexo部落格SEO優化

hexo優化目錄

hexo新增 hexo 如何給文章新增目錄

hexo部落格壓縮優化

Hexo部落格SEO優化

相關推薦