For long articles, it is necessary to have a good directory index, which allows the reader to understand the content and level of the article more clearly. However, currently (2015.7) the blog Park does not automatically generate a catalog index for published articles, as is the case with CSDN blogs. However, some users through the blog park backstage provide some of the custom features, their own script to achieve this function. I use the main script is to refer to the melody of lavender, the article address is: http://www.cnblogs.com/wangqiguo/p/4355032.html.
The original author's script only supports the Level 1 directory, I changed two levels: 1th level is H2, 2nd level is H3. Also added a few gadgets, such as discussion QQ group number. The effect is as follows:
The specific steps to add features are:
- Make sure your blog Park backstage support JS
This default is not supported, need to send an email to the official application open (mailbox is [email protected]), I simply wrote an email, 1 hours to reply, the message content I only wrote two words: Title ....
- Add script to Background
Open the blog Park backstage, go to the "Settings" tab, the bottom of the "Footer HTML code" corresponding to the edit box paste your JS code, and then click the "Save" button to save.
- Write articles by format
When writing post, be careful to divide the chapters according to the format you set in your JS script, such as H2,H3. Of course, previously published articles, such as H2,h3, will also automatically generate a catalog index.
The script is as follows:
1<script language= "javascript" type= "Text/javascript" >2 3 //Generate directory Index list4 //ref:http://www.cnblogs.com/wangqiguo/p/4355032.html5 //Modified BY:ZZQ6 functiongeneratecontentlist ()7 {8 varMainContent = $ (' #cnblogs_post_body ');9 varH2_list = $ (' #cnblogs_post_body H2 ');//If your chapter title is not H2, just replace the H2 hereTen One if(Maincontent.length < 1) A return; - - if(h2_list.length>0) the { - varContent = ' <a name= ' _labeltop ></a> '; -Content + = ' <div id= ' navcategory > '; -Content + = ' <p style= ' font-size:18px ' ><b> directory </b></p> '; +Content + = ' <ul> '; - for(vari=0; i) + { A varGo_to_top = ' <div style= "text-align:right" ><a href= "#_labelTop" > Back to Top </a><a name= "_label ' + i + '" & Gt;</a></div> '; at $ (h2_list[i]). before (go_to_top); - - varH3_list = $ (H2_list[i]). Nextall ("H3"); - varLi3_content = ' '; - for(varj=0; j) - { in varTMP = $ (h3_list[j]). Prevall (' H2 ')). First (); - if(!tmp.is (H2_list[i])) to Break; + varLi3_anchor = ' <a name= ' _label ' + i + ' _ ' + j + ' "></a> '; - $ (h3_list[j]). before (Li3_anchor); theLi3_content + = ' <li><a href= ' #_label ' + i + ' _ ' + j + ' "> ' + $ (h3_list[j]). Text () + ' </a></li> '; * } $ Panax Notoginseng varLi2_content = ' '; - if(Li3_content.length > 0) theli2_content = ' <li><a href= ' #_label ' + i + ' "> ' + $ (h2_list[i]). Text () + ' </a><ul> ' + li3_content + ' </ul></li> '; + Else Ali2_content = ' <li><a href= ' #_label ' + i + ' "> ' + $ (h2_list[i]). Text () + ' </a></li> '; theContent + =li2_content; + } -Content + = ' </ul> '; $Content + = ' </div><p> </p> '; $Content + = ' <p style= ' font-size:18px ' ><b> body </b></p> '; - if($ (' #cnblogs_post_body '). Length! = 0 ) - { the$ ($ (' #cnblogs_post_body ') [0]). prepend (content); - }Wuyi } the - varQqinfo = ' <p style= ' color:navy;font-size:12px ' > discussion QQ Group:135202158</p> '; Wu$ (maincontent[0]). prepend (qqinfo); - } About $ generatecontentlist (); -</script>
"Reference" @ Lavender Melody: http://www.cnblogs.com/wangqiguo/p/4355032.html
Let Blog Park blog automatically generate chapter directory index