hexo 添加 toc 目录 不安装插件

目录

1. 1. 浮动目录
2. 2. 固定目录

1. 浮动目录

参考这篇 https://www.hojun.cn/2018/07/03/ck4wa26f700j0dcvahrcgtqsw/
做了一点修改

我用的主题是 bootstrap-blog

我修改的文件是 post.ejs，而且目录放到左边了，但是位置似乎不太好，屏幕宽度不够会导致显示到屏幕以外，移动端没有目录。

添加的代码是：

<aside id='article-toc' role="navigation" class='fixed'>
<div id='article-toc-inner'>
    <strong class="sidebar-title">目录</strong>
    <%- toc(post.content, {list_number: false}) %>
</div>

</aside>
<style>
#article-toc-inner:after,#article-toc-inner:before,.inner:after,.inner:before {
    content: "";
    display: table
}

#article-toc-inner:after,.inner:after {
    clear: both
}

@media screen {
    #article-toc-inner,.inner {
        padding: 0 20px
    }
}
#article-toc {
    display: none;
    float: left;
    width: 25%;
    margin-left: -220px;
    opacity: .8
}
@media screen and (min-width:769px) {
    #article-toc {
        display: block
    }
}
#article-toc.fixed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10 px;
    padding-top: 55px;
}
.fixed #article-toc-inner {
    position: fixed;
    width: 220px;
    top: 0;
    bottom: 0;
    padding-top: 55px;
}
#article-toc-inner ol {
    margin-left: -16px;
}
</style>

2. 固定目录

由于移动端显示不出来浮动目录，而且现在这个会遮挡内容，效果不好，所以考虑在每篇文章头部添加固定目录

这次修改的是 layout/_partial/article.ejs

在 div class="article-entry" itemprop="articleBody">

后面添加

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