博客园文章目录结构

1

1-1

1-1-1

1-1-2

1-1-3

2

2-1

2-1-1 

2-1-2

2-1-3 

看到博客园有的博主博文有目录结构，感觉特别的清晰。但是看他们大都只有二级目录结构，于是自己改了一下，弄了自己的三级目录结构。文章前面就是显示的效果。

代码如下

<script language = "javascript" type = "text/javascript" >

    function GenerateContentList() {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body 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>';

            var li2_content = '';
            for (var i = 0; i < h2_list.length; i++) {    //循环标签2
                var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">反回顶部</a><a name="_label2-' + i + '"></a></div>';
                $(h2_list[i]).before(go_to_top);
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = ''
                if (h3_list.length > 0) {

                    for (var j = 0; j < h3_list.length; j++) {
                         var tmp = $(h3_list[j]).prevAll('h2').first();   // h3前面的所有h2，会从靠近该h3往前，假如当前是h2[1]下面的h3[0] 那么preAll: [h2[1],h2[0]]
                         if (!tmp.is(h2_list[i])) {    // 判断当前h3的父级h2是不是本次循环的父级h2，不是则说明，该h3不属于本次循环的h2
                             break;        //不属于该h2的，h3则退出
                         }
                        var li3_anchor = '<a name="_label2-' + i + '_label3-' + j + '"></a>'; // 建立锚点
                        $(h3_list[j]).before(li3_anchor);  // 该标签行添加锚点
                        var h4_list = $(h3_list[j]).nextAll("h4");
                        if (h4_list.length > 0) {
                            var li4_content = '';
                            for (var k = 0; k < h4_list.length; k++) {
                                var tmp1 = $(h4_list[k]).prevAll('h3').first();
                                if (!tmp1.is(h3_list[j])) {
                                     break;
                                }
                                var li4_anchor = '<a name="_label2-' + i + '_label3-' + j + '_label4-' + k + '"></a>'; // 建立锚点
                                $(h4_list[j]).before(li4_anchor);  // 该标签行添加锚点

                                li4_content += '<li><a href="#_label2-' + i + '_label3-' + j + '_label4-' + k + '">' + $(h4_list[k]).text() + '</a></li>';   // 目录4内容
                            }
                            li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' + $(h3_list[j]).text() + '</a><ul>' + li4_content + '</ul></li>';   // 目录3内容+目录4
                        } else {
                            li3_content += '<li><a href="#_label2-' + i + '_label3-' + j + '">' +  $(h3_list[j]).text() + '</a></li>';   // 目录3内容
                        }
                    }
                    li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';  // 目录2内容+ 目录3
                } else {
                    li2_content += '<li><a href="#_label2-' + i + '">' +$(h2_list[i]).text() + '</a></li>';// 目录2内容
                }
            }


            content += li2_content;

            content += '</ul>';
            content += '</div><p>&nbsp;</p>';

            if ($('#cnblogs_post_body').length != 0) {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }
    };

GenerateContentList();


</script>

开通JS权限后，粘贴到页脚代码就OK了

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
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 += '<ol>';
        for (var i=0; i<h2_list.length; i++)   // 循环每个h2章节标题下面的低级
        {
            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); // 在每个h2章节的前面添加回到顶部的标签


            var h3_list = $(h2_list[i]).nextAll("h3");      //找到所有的h3
            var li3_content = '';                         // h3的内容
            for (var j=0; j<h3_list.length; j++)           //循环h3
            {
                var tmp = $(h3_list[j]).prevAll('h3').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 + '"style="font-size:12px;color:#2b6695;">' + $(h3_list[j]).text() + '</a></li>';
            }


            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '"style="font-size:12px;color:#2b6695;">' + $(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 += '</ol>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr />';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
}


GenerateContentList();
</script>