首页 » 建站手册 » Initial主题添加目录完整教程

Initial主题添加目录完整教程

谷歌已收录,更新于2019年07月04日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

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

typecho预览

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,并去掉这部分代码。

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 28 条评论

  1. Eltrac Eltrac说道:

    话说有没有办法后端实现鸭

    1. 枂下 枂下说道:

      前端更好玩,后端就太死板了。

  2. Quanyin Quanyin说道:

    大佬考虑啥时候出个完整的 Initial 的魔改教程么

    1. 枂下 枂下说道:

      这出啥教程,当然不出了 :razz:

  3. 芭比 芭比说道:

    倒要试试看所说的BUG是什么

    1. 枂下 枂下说道:

      活捉一只大佬

  4. 十三姨爱我 十三姨爱我说道:

    大佬真是厉害!😄

    1. 枂下 枂下说道:

      不敢当不敢当😂

      1. 十三姨爱我 十三姨爱我说道:

        大佬继续加油!回复评论这里的广告超出右边的框框了~或许大佬可以调一调~

        1. 枂下 枂下说道:

          改好啦🤣

          1. 十三姨爱我 十三姨爱我说道:

            厉害厉害!!!顺眼多了😂

        2. 枂下 枂下说道:

          嗯,改完了。只把宽度调了下,一会改好看点

        3. 枂下 枂下说道:

          嗯,一会改下

          1. 十三姨爱我 十三姨爱我说道:

            大佬真是牛逼,说改就改,我这种代码渣渣怎么调都搞不定!😂

  5. cwz cwz说道:

    老哥,新年快乐!不好意思打扰;sidebar.php代码在关闭pjax的情况下并不能生成目录,请问哪里还需要修改?

    1. 枂下 枂下说道:

      只看本教程的JS代码部分跟sidebar.php代码部分,后续部分不要看。后续是适配pjax的

      1. cwz cwz说道:

        老哥,就是按教程弄的,开启pjax情况下,可以显示了,就是强迫症...,关闭pjax,去掉第三段的情况下,侧边不会出现目录了...所以只好在来骚扰请教了

        1. 枂下 枂下说道:

          第三段保留试试吧,只关闭pjax

        2. 枂下 枂下说道:

          那可能你第一段代码加错了,我现在就是去掉了pjax,一切正常

          1. cwz cwz说道:

            应该不会啊,我开启pjax能出现目录了,就去掉了第三段,关闭了pjax,目录不会产生

  6. 菜鸟日记 菜鸟日记说道:

    改的挺好的呀~

    1. 枂下 枂下说道:

      还有很多要改的地方呢

  7. 黑桃三 黑桃三说道:

    新年好!

    1. 枂下 枂下说道:

      同好同好!

  8. cwz cwz说道:

    谢谢老哥,稳,牛逼

    1. 枂下 枂下说道:

      pjax那块没处理好,不过够用了

      1. cwz cwz说道:

        这是个问题,但我看很多主题都有这个问题

        1. 枂下 枂下说道:

          还有一个半小时了,该写一篇年终了,2019快乐

最近动态查看

    利用短代码实现了文章正文任意位置插入[googleads],前端自动变为谷歌广告。这样,文章过长时,可以随意插入广告了。
返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫