本文最后更新于2019年01月04日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,一起讨论各种问题!

说明

最近,换了款主题Initial,这主题相当简洁,而且功能也算强大吧,指的是后台的设置方面。今天,就来分享下这款主题如何在侧边栏添加目录功能。当然了,过程也是很复杂的。本来是想引用保罗Single主题的single.js中的目录,最后也成功了。可是思来想去觉得不好,最后写成下面的代码了。这段代码,跟RAW主题的一言及建站时间,思路类似吧。

JS代码

首先,新建一个js文件,然后将以下代码放置于footer.php文件下</body>前。此外,你可以将这段代码的第一行跟最后一行去掉,放在一个js文件里,然后主题引用该js文件。

<script type="text/javascript">
$(".post-content").find("h2,h3,h4,h5,h6").each(function(i,item){
    var tag = $(item).get(0).localName;
    $(item).attr("id","wow"+i);
    $("#AnchorContent").append('<li><a class="new'+tag+' anchor-link" onclick="return false;" href="#" link="#wow'+i+'">'+(i+1)+" · "+$(this).text()+'</a></li>');
    $(".newh2").css("margin-left",0);
    $(".newh3").css("margin-left",20);
    $(".newh4").css("margin-left",40);
    $(".newh5").css("margin-left",60);
    $(".newh6").css("margin-left",80);
});
$(".anchor-link").click(function(){
    $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top-50}, 300);
});
</script>

sidebar.php代码

然后,编辑主题sidebar.php,在适当位置插入如下代码,即可完成目录的添加。

<section class="widget">
<h3 class="widget-title">文章目录</h3>
    <ul class="widget-list" id="AnchorContent"> </ul>
</section>

后续

如果你发现跟pjax冲突,即开启pjax后,二次访问页面目录消失,可以在footer.php中插入如下代码。注意,前两部分代码必须添加,这段代码只是为了适配pjax。虽然,还是有bug

<script type="text/javascript">
$(document).on('pjax:complete', function() {
$(".post-content").find("h2,h3,h4,h5,h6").each(function(i,item){
    var tag = $(item).get(0).localName;
    $(item).attr("id","wow"+i);
    $("#AnchorContent").append('<li><a class="new'+tag+' anchor-link" onclick="return false;" href="#" link="#wow'+i+'">'+(i+1)+" · "+$(this).text()+'</a></li>');
    $(".newh2").css("margin-left",0);
    $(".newh3").css("margin-left",20);
    $(".newh4").css("margin-left",40);
    $(".newh5").css("margin-left",60);
    $(".newh6").css("margin-left",80);
});
$(".anchor-link").click(function(){
    $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top-50}, 300);
});
});
</script>

上述代码,保证了,二次访问文章页面,会再次生成目录。不过,会保留第一次访问文章所产生的目录,这部分无法解决。如果有强迫症,请关闭pjax,并去掉这部分代码。