您现在的位置是：首页 > 学无止境 > Web网站首页 Web 如何让文章自动生成文章目录索引

如何让文章自动生成文章目录索引

莫愁
Web
2019-06-13

简介这篇文章主要介绍博客文章自动生成目录索引的js代码,需要的朋友可以参考下。
字数 4030.5

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

第一种：只支持一级目录

通过<h2>实现

HTML代码:

JavaScript代码:

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
 var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
 if(jquery_h3_list.length>0)
 {
 var content = '<a name="_labelTop"></a>';
 content += '<div id="navCategory">';
 content += '<p style="font-size:18px"><b>阅读目录</b></p>';
 content += '<ul>';
 for(var i =0;i<jquery_h3_list.length;i++)
 {
  var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></div>';
  $(jquery_h3_list[i]).before(go_to_top);
  var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h3_list[i]).text() + '</a></li>';
  content += li_content;
 }
 content += '</ul>';
 content += '</div>';
 if($('#cnblogs_post_body').length != 0 )
 {
  $($('#cnblogs_post_body')[0]).prepend(content);
 }
 } 
}
GenerateContentList();
</script>

第二种：支持二级分类

通过<h2><h3>实现

HTML:

JavaScript:

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
 var mainContent = $('#cnblogs_post_body');
 var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 
 if(mainContent.length < 1)
 return;
  
 if(h2_list.length>0)
 {
 var content = '<a name="_labelTop"></a>';
 content += '<div id="navCategory">';
 content += '<p style="font-size:18px"><b>目录</b></p>';
 content += '<ul>';
 for(var i=0; i<h2_list.length; i++)
 {
  var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></div>';
  $(h2_list[i]).before(go_to_top);
   
  var h3_list = $(h2_list[i]).nextAll("h3");
  var li3_content = '';
  for(var j=0; j<h3_list.length; j++)
  {
  var tmp = $(h3_list[j]).prevAll('h2').first();
  if(!tmp.is(h2_list[i]))
   break;
  var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
  $(h3_list[j]).before(li3_anchor);
  li3_content += '<li><a href="#_label' + i + '_' + j + '" rel="external nofollow" >' + $(h3_list[j]).text() + '</a></li>';
  }
   
  var li2_content = '';
  if(li3_content.length > 0)
  li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
  else
  li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a></li>';
  content += li2_content;
 }
 content += '</ul>';
 content += '</div><p> </p>';
 content += '<p style="font-size:18px"><b>正文</b></p>';
 if($('#cnblogs_post_body').length != 0 )
 {
  $($('#cnblogs_post_body')[0]).prepend(content);
 }
 } 
}
GenerateContentList();
</script>

第三种：支持三级目录

通过<h2><h3><h4>实现

HTML:

JavaScript:

<script language="javascript" type="text/javascript">
 //生成目录索引列表
 function GenerateContentList() {
  var jquery_h1_list = $('#cnblogs_post_body h2');
  if (jquery_h1_list.length == 0) { return; }
  if ($('#cnblogs_post_body').length == 0) { return; }
 
  var content = '<a name="_labelTop"></a>';
  content += '<div id="navCategory">';
  content += '<p style="font-size:18px"><b>目录</b></p>';
  // 一级目录 start
  content += '<ul class="first_class_ul">';
 
  for (var i = 0; i < jquery_h1_list.length; i++) {
  var go_to_top = '<div style="text-align: right"><a name="_label' + i + '"></a></div>';
  $(jquery_h1_list[i]).before(go_to_top);
 
  // 一级目录的一条
  var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h1_list[i]).text() + '</a></li>';
 
  var nextH1Index = i + 1;
  if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
  var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h3");
  // 二级目录 start
  if (jquery_h2_list.length > 0) {
   //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
   li_content += '<ul class="second_class_ul">';
  }
  for (var j = 0; j < jquery_h2_list.length; j++) {
   var go_to_top2 = '<div style="text-align: right"><a name="_lab2_' + i + '_' + j + '"></a></div>';
   $(jquery_h2_list[j]).before(go_to_top2);
   // 二级目录的一条
   li_content += '<li><a href="#_lab2_' + i + '_' + j + '" rel="external nofollow" >' + $(jquery_h2_list[j]).text() + '</a></li>';
 
   var nextH2Index = j + 1;
   var next;
   if (nextH2Index == jquery_h2_list.length) {
   if (i + 1 == jquery_h1_list.length) {
    next = jquery_h1_list[0];
   }
   else {
    next = jquery_h1_list[i + 1];
   }
   }
   else {
   next = jquery_h2_list[nextH2Index];
   }
   var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h4");
   // 三级目录 start
   if (jquery_h3_list.length > 0) {
   li_content += '<ul class="third_class_ul">';
   }
 
   for (var k = 0; k < jquery_h3_list.length; k++) {
   var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
   $(jquery_h3_list[k]).before(go_to_third_Content);
   // 三级目录的一条
   li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" rel="external nofollow" >' + $(jquery_h3_list[k]).text() + '</a></li>';
   }
 
   if (jquery_h3_list.length > 0) {
   li_content += '</ul>';
   }
   li_content += '</li>';
   // 三级目录 end
  }
  if (jquery_h2_list.length > 0) {
   li_content += '</ul>';
  }
  li_content += '</li>';
  // 二级目录 end
 
  content += li_content;
  }
  // 一级目录 end
  content += '</ul>';
  content += '</div>';
 
  $($('#cnblogs_post_body')[0]).prepend(content);
 }
 
 GenerateContentList();
 </script>

注:文章中建议使用的是<h2><h3><h4>...,根据SEO的说法，页面中大量出现H1标签会对权重有影响。

分享：

转载： 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/255.html”。

上一篇：命令执行漏洞-DVWA

下一篇：CSS3响应式布局的计算函数calc()

相关文章

1如何让文章自动生成文章目录索引

文章评论

评论

人参与,条评论

技术在线

QQ咨询

微信扫码

技术在线

服务时间

周一至周日 12:00-22:00