Hexo主题更换与魔改·叁·目录按钮的制作

Hexo主题系列之三：关于如何在主题里做一个目录按钮。

由于感觉在电脑端这个网页的两边有点空，所以我觉得增加一个目录是个不错的主意，这样也方便读者查看文章结构。但在制作的过程中又考虑到目录一直开着有碍观瞻，显得不够简洁，而且手机端和电脑端的适配做起来又很麻烦——毕竟手机端又没两边的空地方，因此后面又增加了一个目录的按钮，用于改变目录的显示情况。

这个工作大致可以分为三个部分：目录逻辑的写入，目录按钮的插入，目录页面的美化。

---

目录逻辑的写入

目录本身是有Hexo官方的辅助函数的，所以我们并不需要做太多工作。

首先将目录函数包装为一个toc.ejs，放在post文件夹下，再加上class和id方便后续的更改：

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

然后显然我们需要在文章界面插入目录的代码，也就是在article.ejs中：

<%if(!index && theme.toc){%>
      <%- partial('post/toc',{post: post}) %>
      <div id="settings-container-toc">
        <div id="toc-mode">TOC</div>
      </div>
<%}%>

当然，为了后续的维护，我增加了theme.toc变量，只有在主题配置里的toc为true的时候，目录系统才会打开。

---

目录按钮的插入

上面的代码中同时也插入了一个标着TOC的方块，这被我用来当作目录开启和隐藏的按钮。

和寻常逻辑不同的是，我不通过这个按钮来直接控制HTML上是否加载目录——而是通过它来修改目录的CSS属性display，通过切换属性为'none'或者' '，目录可以被渲染为空气或者实体。当然，一点小小的javascript代码是必要的，大致如下：

<script type="text/javascript">
        tm = document.getElementById("toc-mode");
        let hide = localStorage.getItem("hide");
        let rr=document.documentElement.style,ff=rr.setProperty.bind(rr);
        hide = 2;
        ff('--toc-show-end','none');
        tm.onclick=()=>{
            if(hide == 1){
              ff('--toc-show-end','none');
              tm.innerHTML="TOC";
              hide = 2;
              localStorage.setItem("hide",2);
            }else{
              ff('--toc-show-end','');
              hide = 1;
              tm.innerHTML="Toc";
              localStorage.setItem("hide",1);
            }
        }
</script>

而其中的class属性与CSS关联，id与代码和CSS都相关联，后者最好不要乱改。

---

目录页面的美化

首先幸运的是，原主题本身就在右下角有「字体」和「亮暗」模式的选择，所以对目录的按钮不需要从头设计CSS代码，只需要复制粘贴，再作少许更改即可：

#settings-container-toc {
  background: var(--tertiary-color);
  bottom: 0;
  position: fixed;
  left: 0;
}

#toc-mode{
  cursor: pointer;
  float: left;
  padding: 0.5em;
}

而目录的其他部分就需要自己写CSS代码了，这一块基本没啥好说的，只有一个小点需要注意：

对重复出现的部分设置动画时，若在名字后面加上空格和a，则代表这个动画对各个重复的部分分别生效，这对hover的设计很有帮助。