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

時間 2020-07-06

原文原文鏈接

　　最近，想給各位小夥伴們捋一捋，有些同窗很好奇，爲何有的時候，我點開其餘人的博客時，看他們寫的文章、隨筆及帖子，很舒服，javascript

層次感很強，並且都有目錄，這個是怎麼設置的呢？天然而然產生我也要把本身的博客設置成這種樣子，接下來，別慌，給你們慢慢道來。html

先放一張圖：java

是否是想設置成這個樣子，而後當其餘網友看你帖子時，會以爲頗有條理性，很清晰的感受，因此接下來，我就分享給大家，絕對能行！！！post

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

第一步：申請開通js權限

怎麼實現？管理----》設置----》申請js權限，下圖是我申請以前的截圖，以及申請經過後的截圖：學習

緊接着，下圖是我申請經過後的截圖：url

注意：可能有的小夥伴會有疑問，爲何我申請了，博客園後臺還在審覈，怎麼辦？別急，小編我會告訴大家處理方法的，spa

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

本身寫內容，給你們看看我當時寫的標題和內容，通常來講，只要你催過一次，他通常半小時內會幫你處理好且給你回覆excel

第二步：複製代碼粘貼到「頁腳HTML代碼」中

只有當js權限審覈經過後，纔可進行下一步，由於若是沒有審覈經過，就算把下面的代碼複製並粘貼到本身的下面，也是不生效的，因此第一步很重要code

把我下面的這段代碼，複製粘貼，放在頁腳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>