Let Blog Park blog automatically generate chapter directory index

Source: Internet
Author: User

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:

      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.

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>&nbsp;</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

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.