文章出處

博客園博客自動生成三級目錄(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 //生成目錄索引列表
 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     // 一級目錄 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         // 一級目錄的一條
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         // 二級目錄 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             // 二級目錄的一條
37             li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
38 
39             var nextH2Index = j + 1;
40             var next;
41             if (nextH2Index == jquery_h2_list.length) 
42             {
43                 if (i + 1 == jquery_h1_list.length)
44                 {
45                     next = jquery_h1_list[0];
46                 }
47                 else
48                 {
49                     next = jquery_h1_list[i + 1];
50                 }
51             }
52             else
53             {
54                 next = jquery_h2_list[nextH2Index];
55             }
56             var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
57             // 三級目錄 start
58             if (jquery_h3_list.length > 0)
59             {
60                 li_content += '<ul class="third_class_ul">';
61             }
62             
63             for (var k = 0; k < jquery_h3_list.length; k++)
64             {
65                 var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
66                 $(jquery_h3_list[k]).before(go_to_third_Content);
67                 // 三級目錄的一條
68                 li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
69             }
70             
71             if (jquery_h3_list.length > 0)
72             {
73                 li_content += '</ul>';
74             }
75             li_content += '</li>';
76             // 三級目錄 end
77         }
78         if (jquery_h2_list.length > 0)
79         {
80             li_content +='</ul>';
81         }
82         li_content +='</li>';
83         // 二級目錄 end
84 
85         content += li_content;
86     }
87     // 一級目錄 end
88     content += '</ul>';
89     content += '</div>';
90 
91     $($('#cnblogs_post_body')[0]).prepend(content);
92 }
93 
94 GenerateContentList();
95 </script>
3 levels of contents

 

如何使用(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).


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()