你真的瞭解博客園的目錄麼。。

前言

事情是這樣的，最近忙着軟件測試沒注意博客園的消息，今天無心間點開看到這個：

很是感謝這位盆友能發現這個問題，獎勵雞腿，這是那篇博文：要嫁就嫁程序員，由於。。。

恩？，博客園的目錄設置在手機端竟然有問題，一直都用電腦沒注意，我趕忙用手機點開一看

好端端的文章所有被目錄給遮住了，影響閱讀，很影響心情啊；我趕快找找解決辦法；

目前我學會了目錄的四種形式：

1.目錄在側邊欄：

示例：http://www.javashuo.com/article/p-xzhegbtu-dd.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.目錄在文章內容前：

 示例：http://www.javashuo.com/article/p-uvfeqoks-cu.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>&nbsp;</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>

 

 

趕快看看你的博客在手機端能很好的工做麼 

相關文章：

博客園博客排版（js樣式實例）

 

歡迎你們關注公衆號，不定時乾貨，只作有價值的輸出

做者：Dawnzhang 
出處：http://www.javashuo.com/article/p-qaqgcitp-gd.html版權：本文版權歸做者轉載：歡迎轉載，但未經做者贊成，必須保留此段聲明；必須在文章中給出原文鏈接；不然必究法律責任