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

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → 帝国cms文章内容页H2H3实现目录功能

【本版专题贴子】

海河一苇
用户头衔：书生

精华贴   ：0
发贴数   ：23
经验值   ：164
注册时间：2010-07-01

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

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

看到一个教程，写的应当很详细了，可作为一个小白照葫芦画瓢，一步一步操作，还是没有实现，
问题是
1、CSS代码添加到最后结束前可以吗？还是需要特定的位置？
2、怎么调用？如文中说的设置在文章内容内或者网页侧面的区别。

因为只是一个帝国CMS的使用者，所以，问题比较低级，还请谅解

2楼转发作者给出的教程。

2021-10-20 15:34:20

已设置保密

顶部

引用

报告

编辑

删除

海河一苇
用户头衔：书生

精华贴   ：0
发贴数   ：23
经验值   ：164
注册时间：2010-07-01

信息

搜索

好友

发送悄悄话

【免费开源－EBMA系统：更安全的MYSQL管理和备份系统】 [第 2 楼]

帝国cms文章内容页H2H3实现目录功能
原文地址：http://qinshining.com/cms/147.html

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

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

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

帝国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 + '">' + $(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 + '">' + $(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">

/*.catalogu 文章目录*/

.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实现页面侧边栏浮动跟随，查找相关代码，套上即可，这里就不多加赘余介绍了。

2021-10-20 15:37:10

已设置保密

顶部

引用

报告

编辑

删除