前言
事情是這樣的，最近忙着軟件測試沒注意博客園的消息，今天無意間點開看到這個：
非常感謝這位盆友能發現這個問題，獎勵雞腿，這是那篇博文：要嫁就嫁程序員，因爲。。。
恩？，博客園的目錄設置在手機端居然有問題，一直都用電腦沒注意，我趕緊用手機點開一看
好端端的文章全部被目錄給遮住了，影響閱讀，很影響心情啊；我趕快找找解決辦法；
目前我學會了目錄的四種形式：
1.目錄在側邊欄：
示例：https://www.cnblogs.com/clwydjgs/p/9290075.html
也就是我現在用的這個目錄，我讓目錄在側邊欄顯示，這樣手機端不受任何影響，只是網頁端的美化效果沒有之前的好；
方法：
在頁首HTML中加入：
1 <link href="http://files.cnblogs.com/files/clwydjgs/cnblog-scroller.css" type="text/css" rel="stylesheet"> 2 <script src="http://files.cnblogs.com/files/clwydjgs/scrollspy.js" type="text/javascript"></script> 3 <script src="http://files.cnblogs.com/files/clwydjgs/stickUp.min.js" type="text/javascript"></script> 4 <script src="http://files.cnblogs.com/files/clwydjgs/cnblog-scroller.js" type="text/javascript"></script>
值得注意的是，這是我保存在我博客文件中的文件，我博客文件出問題你們的也會受到影響，最好還是下載，上傳到自己的博客下，然後引用；
2.目錄在文章內容前：
示例：https://www.cnblogs.com/chinas/p/8954076.html
方法：
在頁腳HTML代碼中添加如下代碼，保存即可
1 <script language="javascript" type="text/javascript">
2 // 生成目錄索引列表
3 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
4 // modified by: zzq
5 function GenerateContentList()
6 {
7 var mainContent = $('#cnblogs_post_body');
8 var h2_list = $('#cnblogs_post_body h2');//如果你的章節標題不是h2,只需要將這裏的h2換掉即可
9
10 if(mainContent.length < 1)
11 return;
12
13 if(h2_list.length>0)
14 {
15 var content = '<a name="_labelTop"></a>';
16 content += '<div id="navCategory" style="color:#152e97;">';
17 content += '<p style="font-size:18px;"><b>目錄</b></p>';
18 content += '<ul>';
19 for(var i=0; i<h2_list.length; i++)
20 {
21 var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到頂部</a><a name="_label' + i + '"></a></div>';
22 $(h2_list[i]).before(go_to_top);
23
24 var h3_list = $(h2_list[i]).nextAll("h3");
25 var li3_content = '';
26 for(var j=0; j<h3_list.length; j++)
27 {
28 var tmp = $(h3_list[j]).prevAll('h2').first();
29 if(!tmp.is(h2_list[i]))
30 break;
31 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
32 $(h3_list[j]).before(li3_anchor);
33 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
34 }
35
36 var li2_content = '';
37 if(li3_content.length > 0)
38 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
39 else
40 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
41 content += li2_content;
42 }
43 content += '</ul>';
44 content += '</div><p> </p>';
45 content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
46 if($('#cnblogs_post_body').length != 0 )
47 {
48 $($('#cnblogs_post_body')[0]).prepend(content);
49 }
50 }
51 }
52
53 GenerateContentList();
54 </script>效果如下：
3.右下角增加目錄
也就是手機端目錄會攔住內容的那種；網頁端倒是挺漂亮的；
方法：
3.1. 在頁面定製CSS代碼區中添加如下CSS代碼：
1 /*目錄樣式*/
2 #sideCatalog a{
3 font-size:12px;
4 font-weight:normal !important;
5 }3.2. 在博客側邊欄公告區中添加如下js代碼：
View Code
3.3.在頁首Html代碼中加入如下CSS引用：
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">
3.4. 在頁腳Html代碼中添加如下JS引用：
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
效果如下
23333，電腦端這麼漂亮，手機端居然掛了，我目前把目錄換了文中的第一種方法，作爲解決辦法；
4.在博客園的左側再開一個側欄作爲目錄
這得感謝評論區的以爲大佬，這是blackheart提供的方法；
示例: https://www.cnblogs.com/linianhui/p/rest_web-and-rest.html
方法：
頁首代碼
1 <script type="text/javascript">$("#mobile-style").remove();</script>
2 <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
3 <link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>頁腳代碼
1 <script type="text/javascript" src="//files.cnblogs.com/files/linianhui/lnh.cnblogs.js"></script>