博客園博客自動生成三級目錄(generate three levels content using JS in cnblogs)

博客園博客自動生成三級目錄(generate three levels content using JS in cnblogs)

JS代碼（JS code)

最近參考了（http://www.cnblogs.com/wangqiguo/p/4355032.html）自動生成目錄的方法，我增加了能夠自動生成三級目錄的JS代碼。

I learned from (http://www.cnblogs.com/wangqiguo/p/4355032.html) about generating content using JS in cnblogs. I updated the code to generate three levels content.

<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h1_list = $('#cnblogs_post_body h1');
    if (jquery_h1_list.length == 0) { return; }
    if ($('#cnblogs_post_body').length == 0) { return; }

    var content = '<a name="_labelTop"></a>';
    content    += '<div id="navCategory">';
    content    += '<p style="font-size:18px"><b>閱讀目錄(Content)</b></p>';
    // 一級目錄 start
    content += '<ul class="first_class_ul">';

    for (var i = 0; i < jquery_h1_list.length; i++)
    {
        var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部(go to top)</a><a name="_label' + i + '"></a></div>';
        $(jquery_h1_list[i]).before(go_to_top);

        // 一級目錄的一條
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';

        var nextH1Index = i + 1;
        if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
        var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
        // 二級目錄 start
        if (jquery_h2_list.length > 0)
        {
            //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
            li_content += '<ul class="second_class_ul">';
        }
        for (var j = 0; j < jquery_h2_list.length; j++)
        {
            var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
            $(jquery_h2_list[j]).before(go_to_top2);
            // 二級目錄的一條
            li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';

            var nextH2Index = j + 1;
            var next;
            if (nextH2Index == jquery_h2_list.length) 
            {
                if (i + 1 == jquery_h1_list.length)
                {
                    next = jquery_h1_list[0];
                }
                else
                {
                    next = jquery_h1_list[i + 1];
                }
            }
            else
            {
                next = jquery_h2_list[nextH2Index];
            }
            var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
            // 三級目錄 start
            if (jquery_h3_list.length > 0)
            {
                li_content += '<ul class="third_class_ul">';
            }
            
            for (var k = 0; k < jquery_h3_list.length; k++)
            {
                var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
                $(jquery_h3_list[k]).before(go_to_third_Content);
                // 三級目錄的一條
                li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
            }
            
            if (jquery_h3_list.length > 0)
            {
                li_content += '</ul>';
            }
            li_content += '</li>';
            // 三級目錄 end
        }
        if (jquery_h2_list.length > 0)
        {
            li_content +='</ul>';
        }
        li_content +='</li>';
        // 二級目錄 end

        content += li_content;
    }
    // 一級目錄 end
    content += '</ul>';
    content += '</div>';

    $($('#cnblogs_post_body')[0]).prepend(content);
}

GenerateContentList();
</script>

 

如何使用(How to Use)

把上述JS代碼復制到“頁腳Html代碼”里。

Copy the JS code above into the "頁腳Html代碼" text box.

在寫博客的時候，給每個章節的標題設置“標題1”或“標題2”或“標題3”格式。

set the format to “標題1” or “標題2” or “標題3”.

然后一切就緒，欣賞效果吧。

All is done. Let's test it.

示例(Demo)

這里有兩個例子（http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html）（http://www.cnblogs.com/bitzhuwei/p/SharpFileDB-a-NoSQL-single-file-database-library-in-CSharp.html）。

Here are two demos (http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html) (http://www.cnblogs.com/bitzhuwei/p/SharpFileDB-a-NoSQL-single-file-database-library-in-CSharp.html).