博客園博客自動生成目錄/目錄索引

 

閱讀目錄

 

• 實現效果
• 添加功能的具體步驟
• 生成腳本

 

近來寫了一些比較長的博客，閱讀起來很不方便，看園子里其他園友的博客有些有目錄，就想給自己的博客增加目錄結構，增加文章可讀性；

回到頂部

實現效果

通過點擊目錄索引，跳轉到對應的章節，並可回到目錄頂端；

回到頂部

添加功能的具體步驟

    確保自己的博客園后台支持js
          這個默認是不支持，需要向官方申請，在博客設置中點擊申請JS權限進行申請；

 

 

 

2、到后台加入腳本
打開博客園后台，進入“設置”標簽頁，在最下面的“頁腳Html代碼”對應的編輯框粘貼你的js代碼，然后點“保存”按鈕保存。

3、按格式寫文章
在寫新博文的時候，注意按照你js腳本里設定的格式來划分章節，我這里設置的是h1。以前發布的文章如果有h1，也會自動生成目錄索引。

生成腳本

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h1');//如果你的章節標題不是h2,只需要將這里的h2換掉即可
    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><h1>閱讀目錄</h1></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h2");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h1').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        //content += '<p style="font-size:18px"><b>正文</b></p>';
    }
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }  
}
GenerateContentList();
</script>

 

Reference:

http://www.cnblogs.com/yx007/p/7171495.html#_label1