帝国CMS 让网站自动生成文章的章节目录索引的js、css代码

一个好的博文除了博文的质量要好以外，好的组织结构也能让读者阅读的更加舒服与方便，我看很多人的博客文章都是分章节的，并且在博文的前面都带有章节的目录索引，点击索引之后会跳转到相应的章节阅读，并且还可以回到目录顶端，当然这种结构如果是在写博文的时候人工设置那是非常麻烦的，无疑是增加了写作人的工作量。如果能自动生成章节索引岂不是节省了一大堆工作量。XVy无知

XVy无知

原理

文章的标题是使用“<h1>”标签，XVy无知

章节目录从“<h2>”标签开始直到“<h7>”标签，当然使用的标签层次越多，目录层级就越深，实现的时候先找到文章到的所有“<h2>”标签，再一级一级的往下找，1是生成目录内容，2是为章节添加锚点，这样点击目录的时候就能自动跳到对应的位置了。XVy无知

一、修改内容模板

模板管理》内容模板》管理内容模板》修改文章使用的内容模板，添加一个“div”标签，用来显示目录内容XVy无知

<div id="contents"></div>

二、添加js代码

可以是添加到内容模板中，也可以添加到相关的js文件中，我是放在了“/js/comm.js”文件中XVy无知

$(document).ready(function(){
  var contents = "<p>目录</p><ul>";
  $("article h2").each(function(idx, ele){ 
    ele.innerHTML = "<a href='javascript:void(0)' name='h2"+idx+"'>" + ele.innerText + "</a>";
     contents += "<li><a href='#h2"+idx+"'>" + ele.innerText + "</a></li>";
   });
   contents += "</ul>";
   $("#contents").html(contents); 
});

注意：代码依赖 JQuery
XVy无知

三、添加css样式

修改文章页面的css样式文件添加目录相关样式XVy无知

#contents {
   border: 1px solid #CCCCCC;
   padding: 0 10px 10px 10px;
   margin: 10px 0;
   display: inline-block; 
}

#contents p {
	font-size: 20px;
    font-weight: bold;
}
#contents ul {
  margin: 0 10px;
  padding: 0 10px;
}

#contents ul li {
  list-style: disc;
  line-height: 26px;
}

#contents ul li a {
  color: rgb(51, 122, 183);
}

XVy无知

参考：让网站自动生成章节目录索引的多个js代码XVy无知

2021-08-14更新，支持多级目录

上面的代码只是实现了一级目录功能，下面给出多级目录的代码：XVy无知

递归函数

function generateContents(parentSelector, pIdx, cIdx, next){
    var contents = "";
    if (!pIdx){
        pIdx = "";
    }
    if (!cIdx){
        cIdx = 2;
    }
    var sltor = "";
    if (!parentSelector){
        parentSelector = "article";
        sltor = $(parentSelector + " h" + cIdx);
        contents = "<p>目录</p>";
    }else{
        if (!next){
            sltor = $(parentSelector).nextAll("h" + cIdx);
        }else{
            sltor = $(parentSelector).nextUntil(next, "h" + cIdx);
        }
    }
    var sctts = "";
    if (sltor.length > 0){
        sctts = "<ul class='nav'>";
        for(var i = 0; i < sltor.length; i++){
          sltor[i].id = "csH" + pIdx + cIdx + i;
          sltor[i].innerHTML = "<a name='"+sltor[i].id+"'></a>" + sltor[i].innerText;
          sctts += "<li><a href='#"+sltor[i].id+"'>" + sltor[i].innerText + "</a></li>";
          var next2 = next;
          if (i < sltor.length - 1){
            next2 = $(sltor[i+1]);
          }
          sctts += generateContents("#"+sltor[i].id, pIdx + cIdx + i, cIdx+1, next2);
        }
        sctts += "</ul>";
        contents += sctts;
    }else{
        contents = "";
    }
    return contents;
}

调用方法

$(document).ready(function(){
    var contents = generateContents();
    if (contents.length > 0){
     	$("#contents").html(contents); 
    }else{
     	$("#contents").hide();
    }
});

说明

<article>标签为文章内容的容器，递归函数“generateContents”调用时不需要传递任何参数，默认会遍历<article>标签中的<h2~7>标签。XVy无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/EmpireCMS/2021-08-04/712.html

很赞哦！ () 赏 有话说 ()