随笔- 105 文章- 0 评论- 3 阅读- 28万

博客园自动生成目录

　　本文归纳了网上已经存在的博客园生成目录的方式（首先需要申请JS权限），主要方式如下：

方法一：

样式：

　　目录位置在侧边栏，且与页面位置固定。

脚本：（在博客园 -> 管理 -> 设置 -> 页首Html代码中增加以下内容）

1 <link href="https://files.cnblogs.com/files/你的用户名/cnblog-scroller.css" type="text/css" rel="stylesheet">
2 <script src="https://files.cnblogs.com/files/你的用户名/scrollspy.js" type="text/javascript"></script>
3 <script src="https://files.cnblogs.com/files/你的用户名/stickUp.min.js" type="text/javascript"></script>
4 <script src="https://files.cnblogs.com/files/你的用户名/cnblog-scroller.js" type="text/javascript"></script>

（这里需要修改你的用户名，并添加四个文件）：https://files.cnblogs.com/files/guojun-junguo/%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E5%AF%BC%E8%88%AA%E7%9B%AE%E5%BD%95.rar

引自：https://www.cnblogs.com/ctxsdhy/p/5691589.html

方法二：

样式：

　　目录位于博客最上方。

脚本：（在博客园 -> 管理 -> 设置 -> 页脚Html代码中增加以下内容）

 1 <script language="javascript" type="text/javascript">
 2 function GenerateContentList()
 3 {
 4     var mainContent = $('#cnblogs_post_body');
 5     var h2_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 6     if(mainContent.length < 1)
 7         return;
 8  
 9     if(h2_list.length>0)
10     {
11         var content = '<a name="_labelTop"></a>';
12         content += '<div id="navCategory">';
13         content += '<p style="font-size:18px"><h1>阅读目录</h1></p>';
14         content += '<ul>';
15         for(var i=0; i<h2_list.length; i++)
16         {
17             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
18             $(h2_list[i]).before(go_to_top);
19             
20             var h3_list = $(h2_list[i]).nextAll("h2");
21             var li3_content = '';
22             for(var j=0; j<h3_list.length; j++)
23             {
24                 var tmp = $(h3_list[j]).prevAll('h1').first();
25                 if(!tmp.is(h2_list[i]))
26                     break;
27                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
28                 $(h3_list[j]).before(li3_anchor);
29                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
30             }
31             
32             var li2_content = '';
33             if(li3_content.length > 0)
34                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
35             else
36                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
37             content += li2_content;
38         }
39         content += '</ul>';
40         content += '</div><p>&nbsp;</p>';
41         //content += '<p style="font-size:18px"><b>正文</b></p>';
42     }
43     if($('#cnblogs_post_body').length != 0 )
44     {
45         $($('#cnblogs_post_body')[0]).prepend(content);
46     }  
47 }
48 GenerateContentList();
49 </script>

页脚HTML代码

引自：https://www.cnblogs.com/kimsimple/p/8415450.html#_labelTop

方法三：

　　给标题增加了背景颜色

脚本：

 1 <script language="javascript" type="text/javascript">
 2 // 生成目录索引列表
 3 
 4 function GenerateContentList()
 5 {
 6     var mainContent = $('#cnblogs_post_body');
 7     var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 8 
 9     if(mainContent.length < 1)
10         return;
11  
12     if(h2_list.length>0)
13     {
14         var content = '<a name="_labelTop"></a>';
15         content += '<div id="navCategory" style="color:#152e97;">';
16         content += '<p style="font-size:18px;"><b>阅读目录</b></p>';
17         content += '<ul>';
18         for(var i=0; i<h2_list.length; i++)
19         {
20             var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
21             $(h2_list[i]).before(go_to_top);
22             
23             var h3_list = $(h2_list[i]).nextAll("h3");
24             var li3_content = '';
25             for(var j=0; j<h3_list.length; j++)
26             {
27                 var tmp = $(h3_list[j]).prevAll('h2').first();
28                 if(!tmp.is(h2_list[i]))
29                     break;
30                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
31                 $(h3_list[j]).before(li3_anchor);
32                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
33             }
34             
35             var li2_content = '';
36             if(li3_content.length > 0)
37                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
38             else
39                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
40             content += li2_content;
41         }
42         content += '</ul>';
43         content += '</div><p>&nbsp;</p>';
44         content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
45         if($('#cnblogs_post_body').length != 0 )
46         {
47             $($('#cnblogs_post_body')[0]).prepend(content);
48         }
49     }   
50 }
51 
52 GenerateContentList();
53 </script>
54 
55 目录代码

页脚HTML代码

页面定制CCS代码-标题背景带色1

 1 <!--此处自定义标题背景色-->
 2 #cnblogs_post_body h1 {
 3     background: #265B8A;
 4     border-radius: 6px 6px 6px 6px;
 5     color: #FFFFFF;
 6     font-family: FZShuTi；
 7     font-size: 23px;
 8     font-weight: bold;
 9     height: 25px;
10     line-height: 25px;
11     margin: 18px 0 !important;
12     padding: 12px 0 8px 5px;
13     text-shadow: 2px 2px 3px #222222;
14     text-align:center;
15     margin-bottom: 20px;
16 }
17 #cnblogs_post_body h2 {
18 background-color: #008FC6;
19     border-radius: 3px;
20     text-align:center;
21     color: white;
22     text-shadow: 1px 1px 2px #222222;
23     padding-left: 15px;
24     margin-bottom: 12px;
25 }
26 #cnblogs_post_body h3 {
27 background-color: #51C332;
28     border-radius: 3px;
29     text-align:center;
30     color: white;
31     text-shadow: 1px 1px 2px #222222;
32     padding: 5px 15px;
33     margin-bottom: 10px;
34     width:50%
35 }
36 #cnblogs_post_body h4 {
37     background-color: #5bc0de;
38     border-radius: 3px;
39     text-align:center;
40     color: white;
41     text-shadow: 1px 1px 2px #222222;
42     padding: 5px 15px;
43     margin-bottom: 10px;
44     width:25%
45 }
46 code {
47     padding: 1px 3px;
48     margin: 0 3px;
49     background: #ddd;
50     border: 1px solid #ccc;
51     font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
52     word-wrap: break-word;
53     font-size: 14px;
54 }
55 #cnblogs_post_body table {
56     text-align: center;
57     width: 100%;
58     border: 1px solid #dedede;
59     margin: 15px 0;
60     border-collapse: collapse;
61 }
62 #cnblogs_post_body table thead tr {
63     background: #f8f8f8;
64 }
65 #cnblogs_post_body table tbody tr:hover {
66     background: #efefef;
67 }

页面定制CCS代码-标题背景带色2

取色网址：http://www.114la.com/other/rgb.htm

引自：https://www.cnblogs.com/bigtreei/p/8073281.html

方法四：

　　该方式结合了第一及第三种方式。

　　即在博客上方和侧边栏均有目录链接，且标题带色。

脚本（结合方法一和方法三）：

<!--此处自定义标题背景色-->
#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi；
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:center;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}
#cnblogs_post_body h4 {
    background-color: #5bc0de;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:25%
}
code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}
#cnblogs_post_body table {
    text-align: center;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

标题背景色代码2

页面定制CCS

<link href="https://files.cnblogs.com/files/guojun-junguo/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/guojun-junguo/scrollspy.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/guojun-junguo/stickUp.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/guojun-junguo/cnblog-scroller.js" type="text/javascript"></script>

页首代码

<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>