摘要：为博文添加目录功能。

在查阅文章时，遇到较长的文章，翻动比较麻烦，添加一个目录索引是必要的

源码详见_layouts\post.html，_includes\gen_toc.html，_includes\toc-toggle.html，_sass\_posttoc.scss，assets\main.scss。

仓库地址：n1uf/n1uf.github.io: Jekyll Github Page搭建

目录

目录引用

查看POST时会需要使用目录功能，于是在_layouts\post.html中添加目录相关的内容。

相关内容修改如下：

<div class="post-layout">

    <!-- 目录展开/收起按钮 -->
    <button class="toc-toggle" id="tocToggleButton">展开目录</button>

    <!-- 目录 -->
    <aside class="post-toc">
      <h3>目录</h3>
      <ul id="toc">
        <!-- 动态或静态生成目录的代码放在这里 -->
      </ul>
    </aside>
    
    <div class="post-content e-content" itemprop="articleBody">
      {{ content }}
    </div>
    
  </div>

创建post-toc以及toc-toggle类来分别实现目录和目录的展开收起按钮。

紧接着在下面添加：

<!-- 生成目录 -->
{%include gen_toc.html%}

来引用生成目录的js。

目录生成的JS

在post.html中引用的gen_toc.html内容为生成目录的js脚本，用于动态识别POST并生成目录。

_includes\gen_toc.html内容见仓库。

目录样式

使用CSS为目录创建样式。

_sass\_posttoc.scss内容见仓库，其中包含了基础样式，目录展开（收起）按钮样式，以及夜间模式样式。

在main.scss中引用该样式。

目录展开收起按钮

按钮引用与样式

详见目录项的目录引用和目录样式。

目录展开与收起的JS

在_layouts\post.html中添加

<!-- 目录展开按钮的点击事件 -->
{% include toc-toggle.html %}

用于引用_includes\toc-toggle.html中的按钮点击事件，其内容见仓库。

一些优化

目录浮于页面文字之上；目录的展开和收起有所过渡动画；

修了目录夜间模式不适用的bug；修了目录的级数显示问题。

修了移动端时， header 处的 nav 栏会被目录挡住的问题（在_layout.scss 文件中添加了 .site-nav 的 z-index 使其至于顶层）。