帝国cms文章内容页H2H3实现目录功能

2023-09-12 0 889

帝国cms文章内容页H2H3实现目录功能

之前有网友在文章评论咨询了关于帝国cms文章内容页H2/H3如何生成目录的问题,其实文章生成目录,无非就是JS判断h2、h3的问题。无关是wordpress博客程序还是帝国cms程序。

这里简单照搬网上《博客园博客自动生成章节目录索引》的方法实现,先看效果图,再看代码

帝国cms文章生成目录JS代码:

<script>

   $(document).ready(function() {

               //生成目录索引列表

               function GenerateContentList() {

                   var jquery_h2_list = $('.article-content h2'); //如果你的章节标题不是h2,只需要将这里的h2换掉即可

                   if (jquery_h2_list.length > 0) {

                       var content = '<div class="catalogue-box"><a name="_labelTop"></a>';

                       content += '<div class="catalogue"><div class="catalogue-title"><i class="iconfont icon-mulu"></i>文章目录</div><div class="catalogue-content"> ';

                       content += '<ul class="tr1">';

                       for (var i = 0; i < jquery_h2_list.length; i++) {

                           var go_to_top = '<div><a name="_lab' + i + '"></a></div>';

                           $(jquery_h2_list[i]).before(go_to_top);

                           var li_content = '<li><a href="#_lab' + i + '" rel="external nofollow" >' + $(jquery_h2_list[i]).text() + '</a>';

                           var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i + 1], "h3");

                           if (jquery_h3_list.length > 0) {

                               li_content += '<ul>';

                           }

                           for (var j = 0; j < jquery_h3_list.length; j++) {

                               var go_to_top2 = '<div><a name="_lab2' + i + j + '"></a></div>';

                               $(jquery_h3_list[j]).before(go_to_top2);

                               li_content += '<li><a href="#_lab2' + i + j + '" rel="external nofollow" >' + $(jquery_h3_list[j]).text() + '</a></li>';

                           }

                           if (jquery_h3_list.length > 0) {

                               li_content += '</ul>';

                           }

                           li_content += '</li>';

                           content += li_content;

                       }

                       content += '</ul>';

                       content += '</div></div>';

                       if ($('.article-content').length != 0) {

                           $($('.article-content')[0]).prepend(content);

                       }

                   }

               }

               GenerateContentList();

   

   });

</script>
 


帝国cms文章生成目录css样式:

<style type="text/css">

.catalogue-box {

    float: right;

    border: 1px solid #DEDFE1;

    max-width: 350px;

    min-width: 300px;

    -moz-border-radius: 6px;

    margin: 0 0 20px 15px;

    padding: 10px 6px;

    font-size: 14px;

}

.catalogue-title {

    border-bottom: 1px dashed #DDD;

    display: block;

    line-height: 30px;

    padding: 0 4px;

    color: #333;

}

.catalogue-box ul li {

    white-space: nowrap;

    

    text-overflow: ellipsis;

    

    overflow: hidden;

    list-style-type: disc;

    padding: 0;

    margin: 0 0 0 25px;

}

.catalogue-box ul li a {

    outline: none;

    color: #888;

    text-decoration: none;

    background: transparent;

}

</style>

注意,这里只是H2、H3生成了文章目录,其他标题标签不起作用

注意要点一:.article-content h2,是文章内容div.article-content容器内h2

<div class="article-content">
    <!-- 这里是文章内容 -->
    <h2></h2>
    <h3></h3>
</div> 

注意要点二:以下这段代码中.article-content,是指目录生成的位置,如果想要在内容页则改成内容页对应的div.article-content这类容器,如果想在侧边栏实现则在容器div.sidebar或者div.aside容器内的加入一个div.catalogu容器也行

if ($('.article-content').length != 0) {
   $($('.article-content')[0]).prepend(content);
}

如果想要目录随侧边栏滚动,也很简单直接百度搜索,JS实现页面侧边栏浮动跟随,查找相关代码,套上即可,这里就不多加赘余介绍了。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!
6、本站所有资源、教程、源码,不得用于非法站点及用途,后果自负!本站不为非法站点提供任何服务。

我爱模板网 帝国cms教程 帝国cms文章内容页H2H3实现目录功能 https://www.52muban.com/128628.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务