Automatically generate article catalogs in csdn based on articles

Overview

CSDN in the file content according to the H tag in the article automatically generated article directory, looks more professional, want to move it to their own blog park. Similar

Extract JS script

Search through the browser developer tool (Ie/chrome) to find the generated article directory JavaScript script ( I use the IE development tool to search the relevant string "system according to the article H1 to H6 tag automatically generated article directory" ),

and change the article content ID into the ID of the blog park (#cnblogs_post_body)

The script is generated as follows:

$ (document). Ready (function() {buildctable (); });functionbuildctable () {varHS = $ (' #cnblogs_post_body '). Find (' H1,h2,h3,h4,h5,h6 ')); if(Hs.length < 2)        return; vars = '; S+ = ' <div style= ' Clear:both ></div> '; S+ = ' <div class= ' Cnblogs_toc > '; S+ = ' <p style= "text-align:right;margin:0;" ><span style= "Float:left;" > Catalog <a href= "#" title= "system automatically generates article directory based on H1 to H6 tags in the article" > (?) </a></span><a href= "#" onclick= "Javascript:return openct (this); title=" Expand >[+]</a></p > '; S+ = ' <ol style= "display:none;margin-left:14px;padding-left:14px;line-height:160%;" > '; varOld_h = 0, ol_cnt = 0;  for(vari = 0; i < hs.length; i++) {        varh = parseint (Hs[i].tagname.substr (1), 10); if(!old_h) Old_h=h; if(H >Old_h) {s+ = ' <ol> '; Ol_cnt++; }        Else if(H < old_h && ol_cnt > 0) {s+ = ' </ol> '; Ol_cnt--; }        if(H = = 1) {             while(ol_cnt > 0) {s+ = ' </ol> '; Ol_cnt--; }} Old_h=h; varTit = Hs.eq (i). Text (). replace (/^\d+[., \s]+/g, "); Tit= Tit.replace (/[^a-za-z0-9_\-\s\u4e00-\u9fa5]+/g, "); if(Tit.length < 100) {s+ = ' <li><a href= ' #t ' + i + ' "> ' + tit + ' </a></li> '; Hs.eq (i). HTML (' <a name= ' t ' + i + ' "></a> ' +Hs.eq (i). html ()); }    }     while(ol_cnt > 0) {s+ = ' </ol> '; Ol_cnt--; } s+ = ' </ol></div> '; S+ = ' <div style= ' Clear:both ><br></div> '; $ (s). InsertBefore ($ (' #cnblogs_post_body '));}functionopenct (e) {if(e.innerhtml = = ' [+] ') {$ (E). attr (' title ', ' Closed '). HTML (' [-] '). Parent (). Next (). Show (); } Else{$ (E). attr (' title ', ' unfold '). HTML (' [+] ')). Parent (). Next (). Hide ();    } e.blur (); return false;}

Writing CSS Styles

The resulting article directory style in the script is defined by CNBLOGS_TOC and can be defined according to different requirements. I write my definition here;

I also follow the style of csdn constantly adjusted, and eventually still with csdn a little different.

. Cnblogs_toc{float: Left;Min-width:200px;padding:4px 10px;font-size:12px;Background-color:#eee;Border:1px solid #ccc;}. Cnblogs_toc a{Color:#369;Border-bottom:0px;}. Cnblogs_toc ol{margin:5px 14px 5px;Line-height:160%;}. Cnblogs_toc Li{List-style:decimal;}

Blog Park Settings

In the blog park to enable the automatic generation of the article directory script, you need to add new scripts and CSS in the management settings.

• Upload the JavaScript file to the server in the blog Park file page and get the file connection address.
• Add a custom script file to the blog Park Settings page and add <script src= "in the top HTML code "http://files.cnblogs.com/files/Quincy/ Buildctable.js " type=" Text/javascript "></script>

• Add your own CSS code to the page custom CSS code by adding a custom CSS to the blog Park Settings page

• After the changes are saved, you can create a table of contents by determining the H tag in the article.

other TOC methods

Generate article directory based on file content now there are a lot of scripts to implement, I have used a tableofcontents Plugin for jquery script, can also produce a file directory, specific reference

Script File Http://files.cnblogs.com/files/Quincy/jquery.tableofcontents.js

Reference Reference

Refer to this article: http://www.5ycode.com/283

Automatically generate article catalogs in csdn based on articles