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 script is mainly reference Zhaozi, the article address is: http://www.cnblogs.com/zzqcn/p/4657124.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.
1<script language= "javascript" type= "Text/javascript" >2 //Looping CREATE INDEX3 functiongethxlist (jquery_h_list, level, offset)4 {5 varContent = "";6Level + = 1;7 if(Jquery_h_list.length>0 && level <= 4)8 {9 //content= "Alan";TenContent + = ' <a name= ' _labeltop ></a> '; OneContent + = ' <div id= ' navcategory > '; AContent + = ' <ul> '; - for(vari=0; i<jquery_h_list.length; i++) - { the varGo_to_top = ' <div style= "text-align:right" ><a href= "#_labelTop" > Back to Top </a><a name= "_label" + Offset + i + ' ></a></div> '; - $ (jquery_h_list[i]). before (go_to_top); - varli_content = ' <li><a href= ' #_label ' + offset + i + ' "> ' + $ (jquery_h_list[i]). Text () + ' </a></li> '; -Content + =li_content; + - varJquery_h2_list = $ (Jquery_h_list[i]). Nextuntil (Jquery_h_list[i+1], "H" +Level ); +Content + = Gethxlist (Jquery_h2_list, level, offset+i); A } atContent + = ' </ul> '; -Content + = ' </div> '; - } - returncontent; - } - in //Generate directory Index list - functiongeneratecontentlist () to { + varJquery_h2_list = $ (' #cnblogs_post_body H2 ');//If your chapter title is not H2, just replace the H2 here - varContent = ' <p style= ' font-size:18px ' ><b> reading directory </b></p> '; theContent + = Gethxlist (jquery_h2_list, 2, 0); * if($ (' #cnblogs_post_body '). Length! = 0 ) $ {Panax Notoginseng$ ($ (' #cnblogs_post_body ') [0]). prepend (content); - } the return; + } A generatecontentlist (); the</script>
Blog Park Auto-cycle CREATE index directory JS