CSDN中根據文章自動生成文章目錄

概述

CSDN中有根據文件內容中H標簽在文章中自動生成文章目錄，看起來比較專業，就想把它搬到自己的博客園中。類似下圖

 

提取JS腳本

通過瀏覽器開發者工具(IE/Chrome)找到產生文章目錄javascript腳本(我直接用IE開發工具中搜索相關字符串”系統根據文章中H1到H6標簽自動生成文章目錄”搜索到的)，

並把其中文章內容ID修改成博客園的ID(#cnblogs_post_body)

產生腳本如下腳本如下：

$(document).ready(function() {
    buildCTable();
    });

function buildCTable() {
    var hs = $('#cnblogs_post_body').find('h1,h2,h3,h4,h5,h6');
    if (hs.length < 2)
        return;
    var s = '';
    s += '<div style="clear:both"></div>';
    s += '<div class="cnblogs_toc">';
    s += '<p style="text-align:right;margin:0;"><span style="float:left;">目錄<a href="#" title="系統根據文章中H1到H6標簽自動生成文章目錄">(?)</a></span><a href="#" onclick="javascript:return openct(this);" title="展開">[+]</a></p>';
    s += '<ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;">';
    var old_h = 0, ol_cnt = 0;
    for (var i = 0; i < hs.length; i++) {
        var h = 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;
        var tit = 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'));
}

function openct(e) {
    if (e.innerHTML == '[+]') {
        $(e).attr('title', '收起').html('[-]').parent().next().show();
    } else {
        $(e).attr('title', '展開').html('[+]').parent().next().hide();
    }
    e.blur();
    return false;
}

 

編寫CSS樣式

腳本中產生文章目錄樣式通過cnblogs_toc來自定義，可以按照不同需求來定義。我這里把我的定義寫出來；

我也是按照CSDN的樣式不斷調整的，最終還是和CSDN有點不一樣。

.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;
}

 

博客園設置

在博客園中啟用自動產生文章目錄的腳本，需要在管理設置中添加新增的腳本和CSS。

• 在博客園文件頁中把javascript文件上傳到服務器，並獲取到文件連接地址。
• 在博客園設置頁中添加自定義腳本文件，在”頁首Html代碼”中添加<script src="http://files.cnblogs.com/files/Quincy/buildCTable.js" type="text/javascript"></script>

       

• 在博客園設置頁中添加自定義CSS，在”頁面定制CSS代碼”中添加自己的CSS代碼

       

• 修改完畢保存后，確定文章中的帶有H標簽的就可以生成目錄

 

其他TOC方法

根據文件內容產生文章目錄現在已經有好多腳本可以實現，我之前使用過一個TableOfContents Plugin for jQuery的腳本，也可以產生文件目錄，具體參考

腳本文件http://files.cnblogs.com/files/Quincy/jquery.tableofcontents.js

 

參考引用

參考本文：http://www.5ycode.com/283