Hexo主题优化——TOC目录展开收缩的小箭头

效果展示

代码

$(function(){
    // 切换TOC目录展开收缩的相关操作.
  const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        let $itemHasChild = $(".toc-list-item:has(> .toc-list)");
        $itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i><span>&nbsp;</span>");
        let $iconToFold = $(".toc-list-item > .fa-caret-down");
        let $iconToExpand = $(".toc-list-item > .fa-caret-right");
        $iconToFold.addClass("hide");

        const targetNodes = document.getElementsByClassName("toc-list-item");
        const config = { attributes: true, childList: false, subtree: false };
        const callback = function(mutationsList, observer) {
          for(let mutation of mutationsList) {
            if (mutation.type === "attributes") {
              let target = $(mutation.target)
              if (target.hasClass("is-active-li")) {
                let $toFold = $(".toc-list-item > .fa-caret-down");
                let $toExpand = $(".toc-list-item > .fa-caret-right");
                $toFold.addClass("hide");
                $toExpand.removeClass("hide");
                target.children(".fa-caret-right").first().addClass("hide")
                target.children(".fa-caret-down").first().removeClass("hide")
                let parents = target.parents(".toc-list-item")
                for (p of parents) {
                  $(p).children(".fa-caret-right").first().addClass("hide")
                  $(p).children(".fa-caret-down").first().removeClass("hide")
                }
              }
            }
          }
        };
        const observer = new MutationObserver(callback);
        for (node of targetNodes) {
          observer.observe(node, config)
        }
  });

如何使用

我先简单介绍一下上面的代码。代码使用了 Jquery，以及font awesome，不过hexo的主题应该都有这些

代码的逻辑是，在网页加载完毕后，给TOC目录的分级菜单加入小箭头，并创建MutationObserver来监听属性变化，因为属性变化不是事件，所以并不能以事件监听的形式处理

那么这段代码该放到哪里呢？

代码是在网页加载完毕后执行的，那么和网页本身的代码无关，只和网页展示内容有关。你想要加在文章的TOC目录，总不能把这段代码放到分类页面去吧。

而hexo主题用的都是模板引擎，例如 ejs、swig。通常一个页面都会被拆分为 header，footer 等

所以只要加在任意一个，文章包含的模板即可，但是最好还是加在文章独属的模板

模板位于\layout\_partial 目录，下面讲解的是 ejs 怎么放，swig 可能也差不多

如果你不知道怎么找文章独属的模板

那就在目录下面一个一个添加呗，哪个有效了就行

方法很简单，直接把文件拉到底下，写一个新的 script 标签，把代码复制进去即可

<script>
	复制代码过来
</script>

如果你能找到TOC或者文章独属的模板

操作方法和上面一样，区别是你的网站性能会提高。因为这段代码仅在需要加载的地方加载

更加推荐的是，加上模板引擎的判断逻辑

<% if (theme.toc.enable && theme.toc.showToggleBtn) { %>
代码
<% } %>

theme 对象是主题的配置文件_config.yml，toc 是其中的属性，enable 控制 toc 是否显示