讓博客園博客自動生成章節目錄索引

一個好的博文除了博文的質量要好之外，好的組織結構也能讓讀者閱讀的更加舒服與方便，我看園子裏面有一些園友的博文都是分章節的，而且在博文的前面都帶有章節的目錄索引，點擊索引以後會跳轉到相應的章節閱讀，而且還能夠回到目錄頂端，其中 Fish Li 的博文就是這種組織，固然這種結構若是是在寫博文的時候人工設置那是很是麻煩的，無疑是增長了寫做人的工做量。若是能自動生成章節索引豈不是節省了一大堆工做量。原本想經過FireBug看看Fish Li源碼是怎麼實現的，可是好像js是加密過的。那我就本身動手了，其實也沒多少代碼，很簡單。

<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//若是你的章節標題不是h3,只須要將這裏的h3換掉便可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

使用方法：登陸到博客園以後，打開博客園的後臺管理，切換到「設置」選項卡，將上面的代碼，粘貼到 「頁腳HTML代碼」 區保存便可。

注意：上述js代碼中提取的h3做爲章節的標題，若是你的標題不是h3請在代碼註釋的地方自行修改。該代碼除了在文章的最開始生成目錄索引以外，還會在每個章節最後右下角(也就是下一個章節標題的右上角)會生成一個「回到頂部」的連接，以方便讀者回到目錄。本篇文章的目錄結構就是自動生成的效果，若是你以爲有用，就趕快試用一下吧。

章節1

這裏是章節1的內容

章節2

這裏是章節2的內容

章節3

這裏是章節3的內容

章節4

小小代碼，不值一提，若是您以爲對您還有一點用，就點個贊支持一下吧。