Blog Park blog automatically generate a three-level directory (generate three levels content using JS in cnblogs)

Blog Park blog automatically generate a three-level directory (generate three levels content using JS in cnblogs)

JS codes (JS code)

Recently, referring to the method of automatic generation of directories (http://www.cnblogs.com/wangqiguo/p/4355032.html), I added JS code that can automatically generate three levels of directories.

I learned from (http://www.cnblogs.com/wangqiguo/p/4355032.html) about generating content using the JS in Cnblogs. I updated the code to generate three levels content.

1<script language= "javascript" type= "Text/javascript" >2 // Generate three levels content3 functiongeneratecontentlist ()4 {5     varJquery_h1_list = $ (' #cnblogs_post_body H1 ');6     if(Jquery_h1_list.length = = 0) {return; }7     if($ (' #cnblogs_post_body '). Length = = 0) {return; }8 9     varContent = ' <a name= ' _labeltop ></a> ';TenContent + = ' <div id= ' navcategory > '; OneContent + = ' <p style= "font-size:18px" ><b> reading directory (content) </b></p> '; A     //First level content start -Content + = ' <ul class= ' First_class_ul > '; -  the      for(vari = 0; i < jquery_h1_list.length; i++) -     { -         varGo_to_top = ' <div style= "text-align:right" ><a href= "#_labelTop" > Back Top (Go to top) </a><a Name= "_ Label ' + i + ' "></a></div> '; - $ (jquery_h1_list[i]). before (go_to_top); +  -         //One item of first level content. +         varli_content = ' <li><a href= ' #_label ' + i + ' "> ' + $ (jquery_h1_list[i]). Text () + ' </a></li> '; A  at         varNexth1index = i + 1; -         if(Nexth1index = = jquery_h1_list.length) {nexth1index = 0; } -         varJquery_h2_list = $ (Jquery_h1_list[i]). Nextuntil (Jquery_h1_list[nexth1index], "H2"); -         //Second level content start -         if(Jquery_h2_list.length > 0) -         { in             //li_content + = ' <ul style= "list-style-type:none; text-align:left; margin:2px 2px;" > '; -Li_content + = ' <ul class= ' second_class_ul ' > '; to         } +          for(varj = 0; J < Jquery_h2_list.length; J + +) -         { the             varGO_TO_TOP2 = ' <div style= "text-align:right" ><a name= "_lab2_ ' + i + ' _ ' + j + '" ></a></div> '; * $ (jquery_h2_list[j]). before (GO_TO_TOP2); $             //One item of second level content.Panax NotoginsengLi_content + = ' <li><a href= ' #_lab2_ ' + i + ' _ ' + j + ' "> ' + $ (jquery_h2_list[j]). Text () + ' </a></li> '; -  the             varNexth2index = j + 1; +             if(Nexth2index = = jquery_h2_list.length) {nexth2index = 0; } A             varJquery_h3_list = $ (Jquery_h2_list[i]). Nextuntil (Jquery_h2_list[nexth2index], "H3"); the             //Third level content start +             if(Jquery_h3_list.length > 0) -             { $Li_content + = ' <ul class= ' third_class_ul ' > '; $             } -              for(vark = 0; K < Jquery_h3_list.length; k++) -             { the                 vargo_to_third_content = ' <div style= "text-align:right" ><a name= "_label3_ ' + i + ' _ ' + j + ' _ ' + K + '" &GT;&LT;/A&G T;</div> '; - $ (jquery_h3_list[k]). before (go_to_third_content);Wuyi                 //One item of third level content. theLi_content + = ' <li><a href= ' #_label3_ ' + i + ' _ ' + j + ' _ ' + K + ' "> ' + $ (jquery_h3_list[k]). Text () + ' </a& Gt;</li> '; -             } Wu             if(Jquery_h3_list.length > 0) -             { AboutLi_content + = ' </ul> '; $             } -Li_content + = ' </li> '; -             //Third level content End -         } A         if(Jquery_h2_list.length > 0) +         { theLi_content + = ' </ul> '; -         } $Li_content + = ' </li> '; the         //Second level content end the  theContent + =li_content; the     } -     //First level content end inContent + = ' </ul> '; theContent + = ' </div> '; the  About$ ($ (' #cnblogs_post_body ') [0]). prepend (content); the } the  the generatecontentlist (); +</script>

How do I use it

Copy the above JS code into the "footer HTML code".

Copy the JS code above into the "footer HTML code" text box.

When writing a blog, set the title 1 or Heading 2 or Heading 3 format for each chapter.

Set the format to "Heading 1" or "Heading 2" or "Heading 3".

Then everything is ready and enjoy the effect.

All are done. Let ' s test it.

Example (Demo)

Here's an example (http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html).

Here's an demo (http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html).

Blog Park blog automatically generate a three-level directory (generate three levels content using JS in cnblogs)