博客园博客自动生成三级目录(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.

 1 <script language="javascript" type="text/javascript">
 2 // Generate  three levels content
 3 function GenerateContentList()
 4 {
 5     var jquery_h1_list = $(‘#cnblogs_post_body h1‘);
 6     if (jquery_h1_list.length == 0) { return; }
 7     if ($(‘#cnblogs_post_body‘).length == 0) { return; }
 8
 9     var content = ‘<a name="_labelTop"></a>‘;
10     content    += ‘<div id="navCategory">‘;
11     content    += ‘<p style="font-size:18px"><b>阅读目录(Content)</b></p>‘;
12     // first level content start
13     content += ‘<ul class="first_class_ul">‘;
14
15     for (var i = 0; i < jquery_h1_list.length; i++)
16     {
17         var go_to_top = ‘<div style="text-align: right"><a href="#_labelTop">回到顶部(go to top)</a><a name="_label‘ + i + ‘"></a></div>‘;
18         $(jquery_h1_list[i]).before(go_to_top);
19
20         // one item of first level content.
21         var li_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(jquery_h1_list[i]).text() + ‘</a></li>‘;
22
23         var nextH1Index = i + 1;
24         if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
25         var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
26         // second level content start
27         if (jquery_h2_list.length > 0)
28         {
29             //li_content +=‘<ul style="list-style-type:none; text-align: left; margin:2px 2px;">‘;
30             li_content += ‘<ul class="second_class_ul">‘;
31         }
32         for (var j = 0; j < jquery_h2_list.length; j++)
33         {
34             var go_to_top2 = ‘<div style="text-align: right"><a name="_lab2_‘+ i + ‘_‘ + j + ‘"></a></div>‘;
35             $(jquery_h2_list[j]).before(go_to_top2);
36             // one item of second level content.
37             li_content +=‘<li><a href="#_lab2_‘+ i +‘_‘ + j + ‘">‘ + $(jquery_h2_list[j]).text() + ‘</a></li>‘;
38
39             var nextH2Index = j + 1;
40             if (nextH2Index == jquery_h2_list.length) { nextH2Index = 0; }
41             var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[nextH2Index], "h3");
42             // third level content start
43             if (jquery_h3_list.length > 0)
44             {
45                 li_content += ‘<ul class="third_class_ul">‘;
46             }
47             for (var k = 0; k < jquery_h3_list.length; k++)
48             {
49                 var go_to_third_Content = ‘<div style="text-align: right"><a name="_label3_‘ + i + ‘_‘ + j + ‘_‘ + k + ‘"></a></div>‘;
50                 $(jquery_h3_list[k]).before(go_to_third_Content);
51                 // one item of third level content.
52                 li_content += ‘<li><a href="#_label3_‘ + i + ‘_‘ + j + ‘_‘ + k + ‘">‘ + $(jquery_h3_list[k]).text() + ‘</a></li>‘;
53             }
54             if (jquery_h3_list.length > 0)
55             {
56                 li_content += ‘</ul>‘;
57             }
58             li_content += ‘</li>‘;
59             // third level content end
60         }
61         if (jquery_h2_list.length > 0)
62         {
63             li_content +=‘</ul>‘;
64         }
65         li_content +=‘</li>‘;
66         // second level content end
67
68         content += li_content;
69     }
70     // first level content end
71     content += ‘</ul>‘;
72     content += ‘</div>‘;
73
74     $($(‘#cnblogs_post_body‘)[0]).prepend(content);
75 }
76
77 GenerateContentList();
78 </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）。

Here is an demo (http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html).