7B2主题新增文章阅读目录导航（已废弃原主题自带此功能）

在我们阅读文章的过程中有一个目录导航可以更好的提升用户体验。今天，就尝试在我们的侧边栏-widgets-作者模块上加上这个功能。

所需工具

首先是安装一个目录插件，作者选择的是easy table of contens。直接再插件市场搜索，第一个就是。后台进行设置，可以对各类想添加目录的HTML标签进行选择，就像作者的基本上只选用了h3标签，简单高效。并且，在插件后台设置默认显示不显示。

短代码插入

首先要找到我们的widgets文件。目录为Modules/Templates/Widgets/Auchor.php文件。默认此模块只在文章页面显示，所以不用再写if函数。直接在233行插入短代码即可。其他的便是对样式做优化。这里直接放源码

#ez-toc-container{
    border:none;
    width: 100%;
    padding: 24px 16px;
    background: #fff;
}

#ez-toc-container nav{
    margin-top:8px;
}

.ez-toc-counter nav ul li a::before{
        content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #dadada;
    margin-top: -2px;
}

#ez-toc-container a{
    color:#9f9f9f;
}

#ez-toc-container a:hover,
#ez-toc-container a:visited{
    color: var(--b2color);
}

div#ez-toc-container ul li a{
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    height: 20px;
    line-height:20px; 
    overflow: hidden;
    padding-left: 14px;
    text-overflow: ellipsis;
    position: relative;
}

#ez-toc-container ul ul, .ez-toc div.ez-toc-widget-container ul ul{
    margin-left:8px;
}

修改默认图标

默认的的图标不是很好看，可以选择在差价源码处直接修改为b2的字体图标,图标参考。https://7b2.com/fonts/

结尾

更好的用户体验应该是网站滚动时候，能给默认的目录高亮，可惜这只有在付费版本中才有。暂时不考虑做其他的升级了，够用就行。