Blog Park Auto-cycle CREATE index directory JS

Source: Internet
Author: User
Tags create index

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:

        1. 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 ....
        2. 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.
        3. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.