code implementation

Js code

 function GenerateContentList() { var mainContent = $('#mulu'); var h1_list = $('#haha h1'); //If your chapter title is not h1, just replace the h1 here var h2_list = $('#haha h2'); if(mainContent.length < 1) return; if(h1_list.length>0) { var content = ''; content += ''; Content+='<a class="title_menue">[Article directory]</a>'; content += '<ol class="toc">'; for(var i=0;  i<h1_list.length; i++) { var go_to_top = '<a name="_label' + i + '"></a>'; $(h1_list[i]).before(go_to_top); var h2_list = $(h1_list[i]).nextAll("h2"); var li2_content = ''; for(var j=0;  j<h2_list.length; j++) { var tmp = $(h2_list[j]).prevAll('h1').first(); if(! tmp.is(h1_list[i])) break; var li2_anchor = '<a pjax="no" name="_label' + i + '_' + j + '"></a>'; $(h2_list[j]).before(li2_anchor); li2_content += '<li class="toc-item toc-level-' + i + '_' + j + '"><a pjax="no" class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h2_list[j]).text() + '</span></a></li>'; } var li1_content = ''; if(li2_content.length > 0) li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + '</ol>'; else li1_content = '<li class="toc-item toc-level-' + i + '"><a  pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li>'; content += li1_content; } if($('#mulu').length !=  0 ) { $($('#mulu')[0]).prepend(content); } } else{ if(h1_list.length==0&&h2_list.length>0) { var content = ''; content += ''; Content+='<a class="title_menue">[Article directory]</a>'; content += '<ol class="toc">'; for(var i=0;  i<h2_list.length; i++) { var go_to_top = '<a  pjax="no" name="_label' + i + '"></a>'; $(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  pjax="no" name="_label' + i + '_' + j + '"></a>'; $(h3_list[j]).before(li3_anchor); li3_content += '<li class="toc-item toc-level-' + i + '_' + j + '"><a pjax="no" class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h3_list[j]).text() + '</span></a></li>'; } var li2_content = ''; if(li3_content.length > 0) li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + '</ol>'; else li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li>'; content += li2_content; } if($('#mulu').length !=  0 ) { $($('#mulu')[0]).prepend(content); } }  } } GenerateContentList();

Html code

 <tree id="mulu"></tree>

CSS code

On the mobile phone, I also floated the div on the right, beautifying it a little

 #mulu{float:right; margin-left:10px;background:#f8f8f8;position:relative;z-index:998} span.toc-text{color:#707070} span.toc-text:hover{opacity:.8} ol.toc{padding-left:15px; margin-left:6px;margin-top:0} a.title_menue{padding-left:10px} .toc-item{margin-left:10px;margin-right:10px}

Edible method

• Add JS code to foot.php, or save it to a file, and then reference it
• Add html code to post.php
  be careful ：

 var h1_list = $('#haha h1'); //If your chapter title is not h1, just replace the h1 here var h2_list = $('#haha h2');

It means to extract the title in the div of "haha", so you need to add another div with the ID of "haha" in the div of the article content

• CSS can be added to style.css!

Record of solving a problem

A. Label failure:

 position: relative; z-index: 998

Use position and Z-index to make the div layer at the top!

Code Source

• Source of core js code: Js automatically generates directories for blog posts
• Css beautification code reference: Catalog Index