帝国CMS您现在的位置是:首页 > 博客日志 > 帝国CMS

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

<a href='mailto:'>微wx笑</a>的头像微wx笑 2021-08-04帝国CMS 1 0关键字: 帝国CMS  章节  目录  js  

这篇文章主要介绍了让帝国CMS搭建的博客能自动生成文章的章节目录索引的js、css代码实现,需要的朋友可以参考下

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


McH无知人生

原理

文章的标题是使用“<h1>”标签,McH无知人生

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

一、修改内容模板

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

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

二、添加js代码

可以是添加到内容模板中,也可以添加到相关的js文件中McH无知人生

$(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
McH无知人生

三、添加css样式

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

#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);
}


McH无知人生

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

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

上面的代码只是实现了一级目录功能,下面给出多级目录的代码:McH无知人生

递归函数

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>标签。McH无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()