為博客園添加目錄的方法總結

　　最近，想給各位小伙伴們捋一捋，有些同學很好奇，為什么有的時候，我點開其他人的博客時，看他們寫的文章、隨筆及帖子，很舒服，

層次感很強，而且都有目錄，這個是怎么設置的呢？自然而然產生我也要把自己的博客設置成這種樣子，接下來，別慌，給大家慢慢道來。

先放一張圖：

 

 是不是想設置成這個樣子，然后當其他網友看你帖子時，會覺得很有條理性，很清晰的感覺，所以接下來，我就分享給你們，絕對能行！！！

方法：在正文上方直接添加目錄

第一步：申請開通js權限

怎么實現？管理----》設置----》申請js權限，下圖是我申請之前的截圖，以及申請通過后的截圖：

 

緊接着，下圖是我申請通過后的截圖：

 

 

 注意：可能有的小伙伴會有疑問，為什么我申請了，博客園后台還在審核，怎么辦？別急，小編我會告訴你們處理方法的，

關注【博客園團隊】https://www.cnblogs.com/cmt/，然后發短消息給他，

 

 自己寫內容，給大家看看我當時寫的標題和內容，一般來說，只要你催過一次，他一般半小時內會幫你處理好且給你回復

第二步：復制代碼粘貼到“頁腳HTML代碼”中

只有當js權限審核通過后，才可進行下一步，因為如果沒有審核通過，就算把下面的代碼復制並粘貼到自己的下面，也是不生效的，所以第一步很重要

把我下面的這段代碼，復制粘貼，放在頁腳HTML代碼框里  (管理----》設置----》頁腳HTML代碼)，然后點“保存”按鈕保存。

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章節標題不是h2,只需要將這里的h2換掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#152e97;">';
        content += '<p style="font-size:18px;"><b>目錄</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').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 += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

對，就是這么簡單，你只需要動動手指，點點鼠標就能完成

第三步：按照格式寫文章或隨筆

這里有的同學會有不同意見了，說，你教的這個方法不起作用啊，我還是沒變化，你是不是坑人騙流量啊，非也，接下來，就是重點要說的格式問題

既然保存了，那就自己嘗試，這個道理跟敲代碼是一樣的，既然裝了IDEA，那就寫個helloworld運行跑一下就知道裝沒裝好，對不對？所以，

咱們也可以自己嘗試一番，我拿出自己之前寫文章的截圖：

 

 這個方法，在寫文章的時候注意，不要選擇標題一，這里只支持標題2，標題3.。  標題2是大的分級目錄，標題3是子級目錄，給出圖更具有說服力，

所以這個自己動手稍微寫個例子就可以

 

 各位園友，看明白了嗎？當然，以前發布的文章如果有h2,h3，也會自動生成目錄索引。對以前發布的文章和隨筆同樣生效的

 

 

各位網友，如果你自己還不能動手實現，可以留言我幫你處理好，一起交流一起進步一起學習

本文注重原創，但本着資源共享的原則，如若有需要轉載，請注明出處 https://www.cnblogs.com/xj-excellent/p/13252719.html ，謝謝！！！