toc文章目录调教记录

2025/1/29 前端前端

已经更换主题了~

#没有目录的痛

particlex是个好的hexo主题，但是没有自带的目录（。好吧，试试hexo的插件toc，结果就是目录不跟随还丑，好吧，只能手搓了（

#手搓目录

首先先把toc插件部署好。这类教程倒是很多，比如这个，毕竟也是学的别人，就不多说了。
接着就要把这个目录放到需要的页面了。ParticleX是用ejs来渲染每个页面的，那么我们造个toc.ejs放到layout里。我是这么写的:

<% if (page.toc == true) { %>
    <div id="toc">
        <span class="icon">
            <i class="fas fa-stream" id="ic"></i>
        </span>
        <span class="toc_title">目录</span>
        <%- toc(page.content, {list_number : false}) %>
        <link rel="stylesheet" type="text/css" href="/css/toc.css">
    </div>
<% } %>

上面这段代码不是js,是ejs(下同)。但是写ejs会导致直接渲染成html（

然后定位到post页面中。把<%- partial('toc') %>放到post.ejs。这里我还造了个container_的div块把原本的<div class="article">和<%- partial('toc') %>包括起来，方便这里用flex布局。

<div id="container__"> 
    <div class="article">
        ...
    </div>
    <%- partial('toc') %>
</div>

其实开始试过用grid，总之是一堆问题，浪费了不少时间😪

接下来就开始搓css吧~最喜欢搓css哩🤗

/*toc.css*/
.toc_title{
    color: rgb(121, 121, 121);
    font-weight: bolder;
    font-size: 30px;

    position: relative;
    left: 16px;
}
#ic{
    position: relative;
    left: 20px;
    font-size: 30px;
}
#toc{
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.871);
    box-shadow: 1px 1px 5px rgb(234, 234, 234);

    position: sticky;/*使得目录始终在窗口的固定位置*/
    top: 100px;
    right: 30px;

    overflow: auto;

    max-height: 600px;
    width: 280px;
    min-width: none;

    flex-shrink: 100;/*适配窗口宽度小时目录消失*/
}
.toc-link{
    font-size: 16px;
    display: block;
    min-width: 150px;
    margin-top: 0px;
    transition: 0.6s;
}
.toc-link:hover{
    color: aqua;
    transition: 0.6s;
}
#toc li{
    list-style: none;
    margin-top: 2px;
    position: relative;
    right: 10px;
}
#toc ol{
    list-style: none;
    margin-top: 2px;
    position: relative;
    right: 10px;
}
#container__{
    display: flex;
    justify-content: center;
}

这样终于是搞好了这个目录了，也是又水了一篇博客了🤭

感谢~🥰:

Hexo博客添加文章目录

LOADING

toc文章目录调教记录

#没有目录的痛

#手搓目录