为Hexo模板添加目录

我使用的模板是Hacker，添加目录用了很久，因为网上的参考地址里表示文章用的都是post，但是该模板用的是item，所以要统一改过来。

以下操作主要参考该地址：http://www.cnblogs.com/peihao/p/5269131.html

文章页面添加toc

文件目录是themes/Hacker/layout/components/article.ejs
找到<div class="article-content">，将这段话修改为：

  <div class="article-content">
    <div class="entry">
      <% if (item.excerpt && index){ %>
        <%- item.excerpt %>
      <% } else { %>
            <!-- Table of Contents -->
            <% if (!index && item.toc){ %>
              <div id="toc" class="toc-article">
                <strong class="toc-title">Menu</strong>
                <%- toc(item.content) %>
              </div>
            <% } %>
        <%- item.content %>
      <% } %>
    </div>

这样的话，就在文章内容前添加了目录，还给目录添加了标题Menu。如果toc:true，则显示目录界面。

添加目录样式

添加好目录之后，对目录样式进行自定义：
在themes/Hacker/source/css/components下新建目录的样式文件toc.ejs，文件内容如下：

/*toc*/
.toc-article {
    background: #ffffff;  /*目录背景*/
    border 1px solid #f15b6c;  /*目录边框*/
    border-radius 10px;  /*目录圆角*/
    padding: 1em;
    max-width 50%;
    position: fixed;  /*固定目录位置，不随页面滚动而滚动*/
    margin:-10em 1em 50em 90em; /*目录在页面的绝对位置*/
    left:2em;
    z-index:2;  /*目录在页面的放置次序（是否置顶）*/
}

.toc-article .toc-title{
    font-size 120%;   /*Menu的字号*/
    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  /*二级目录缩进量*/
}