之前有网友在文章评论咨询了关于帝国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 + '">' + $(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实现页面侧边栏浮动跟随，查找相关代码，套上即可，这里就不多加赘余介绍了。