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 + '" ></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)