博客園文章自動生成導航目錄

文章如果比較長的話，子標題很難找，文章結構沒法一目了然，如果有一個導航目錄靠在邊欄就好了

看了很多園子里其他的文章，js和css挺長的，怕用不好，干脆自己嘗試寫一個

 

一、要實現的功能

1、自動生成

不限定某幾個h標簽，最好h1-h6都可以支持

2、靠在側邊欄

我的邊欄內容比較少，我就把導航目錄直接加在邊欄下面了，這樣會和原先的風格結構比較搭，如果邊欄內容比較多的，可能要改成絕對定位在右下角了

這里需要引入stickUp.js插件，在滾動條下滑的時候將導航欄固定在頁面頂端

3、簡單的風格

不同皮膚顯示可以融入的比較好，這里會借用catListPostArchive隨筆檔案的css類，導航目錄的樣式會和隨筆檔案的樣式一樣，自己就不用加樣式了

4、目錄滾動監聽

當頁面滑動到某個h標簽時，導航目錄中需要高亮顯示那一條，需要引用bootstrap的scrollspy.js插件來實現

5、優化

最好能平滑的滾動

 

二、實現代碼

1、cnblog-scroller.js

jQuery( function ($) {

     $( function () {

         //延遲1秒加載, 等博客園的側欄加載完畢, 不然導航目錄距離頂部的高度會不對

         setTimeout( function  () {loadScroller();}, 1000);

     });

     

     //加載導航目錄

     function  loadScroller() {

         //先獲取第一個h標簽, 之后循環時作為上一個h標簽

         var  $ph = $( '#cnblogs_post_body :header:eq(0)' );

         if ($ph.length > 0) {

             //設置層級為1

             $ph.attr( 'offset' , '1' );

             //添加導航目錄的內容

             $( '#blog-sidecolumn' ).append( '<div id="sidebar_scroller" class="catListPostArchive sidebar-block"><h3 class="catListTitle">導航目錄</h3><ul class="nav"></ul></div>' );

             //取當前邊欄的寬度

             $( '#sidebar_scroller' ).css( 'width' , $( '#blog-sidecolumn' ).width());

             //讓導航目錄停留在頁面頂端

             $( '#sidebar_scroller' ).stickUp();

             //遍歷文章里每個h標簽

             $( '#cnblogs_post_body :header' ).each( function (i) {

                 var  $h = $( this );

                 //設置h標簽的id, 編號從0開始

                 $h.attr( 'id' , 'scroller-'  + i);

                 //比上一個h標簽層級小, 級數加1

                 if ($h[0].tagName > $ph[0].tagName) {

                     $h.attr( 'offset' , parseInt($ph.attr( 'offset' )) + 1);

                 } //比上一個h標簽層級大, 級數減1

                 else  if ($h[0].tagName < $ph[0].tagName) {

                     

                     var  h = parseInt($h[0].tagName.substring(1));

                     var  ph = parseInt($ph[0].tagName.substring(1));

                     

                     var  offset = parseInt($ph.attr( 'offset' )) - (ph-h);

                     if (offset < 1) {

                         offset = 1

                     };

                     $h.attr( 'offset' , offset);

                 } //和上一個h標簽層級相等時, 級數不變

                 else  {

                     $h.attr( 'offset' , $ph.attr( 'offset' ));

                 }

                 //添加h標簽的目錄內容

                 $( '#sidebar_scroller ul' ).append( '<li class="scroller-offset'  + $h.attr( 'offset' ) + '"><a href="#scroller-'  + i + '">'  + $h.text() + '</a></li>' );

                 //最后設置自己為上一個h標簽

                 $ph = $h;

             });

             

             //開啟滾動監聽, 監聽所有在.nav類下的li

             $( 'body' ).scrollspy();

             

             //讓頁面的滾動更平滑

             $( '#sidebar_scroller a' ).on( 'click' , function () {

                 var  targetOffset = $( this .hash).offset().top;

                 $( 'html, body' ).animate({scrollTop: targetOffset}, 400);

                 return  false ;

             });

         }

     }

});

stickUp.js插件的使用只有"$('#sidebar_scroller').stickUp();"一句，不過需要這個元素距離頁頂部的高度已經確定（代碼中延遲了1秒，等日歷和側欄控件加載好再加載，如果是絕對定位就不用等1秒了），github里最新的stickUp.js有一點小問題，這里附件中的已經修復了

scrollspy.js插件有兩種初始化方式，一種是直接在body中增加"data-spy='scroll'"，是馬上加載的，因為我們要延遲，所以用第二種js手動初始化"$('body').scrollspy();"，需要注意的是被監測的ul要附加"nav"的css類，scrollspy.js的代碼中是通過".nav li > a"的結構去查找的

我習慣自己給h標簽里添加序號的，所以代碼中沒有增加自動編號的功能，需要的話請在代碼中增加

 

2、cnblog-scroller.css

1 2 3 4 5 6 7

.scroller-offset 1  { text-indent :  0  /* !important */ ;} .scroller-offset 2  { text-indent :  1.5em ;} .scroller-offset 3  { text-indent :  3em ;} .scroller-offset 4  { text-indent :  4.5em ;} .scroller-offset 5  { text-indent :  6em ;} .scroller-offset 6  { text-indent :  7.5em ;} .nav .active { background-color : #f5f5f5 ;}

如果皮膚有自己設定text-indent縮進的話，需要用自己!important來強制設定，具體距離根據皮膚調整一下

 

三、使用方法

1、申請開通博客園js權限

在博客園 -> 管理 -> 設置 -> 博客側邊欄公告（支持HTML代碼）

右邊有申請js權限的按鈕，理由寫希望使用js來自動生成文章的導航目錄就可以了

 

2、在頁首Html代碼中增加

將附件中的的4個文件上傳到自己的博客園里，在博客園 -> 管理 -> 文件 -> 選擇文件 上傳

在博客園 -> 管理 -> 設置 -> 頁首Html代碼 中增加以下內容（如果沒有開通js權限，js文件會被過濾掉）

1 2 3 4

< link  href="http://files.cnblogs.com/files/你的用戶名/cnblog-scroller.css" type="text/css" rel="stylesheet"> < script  src="http://files.cnblogs.com/files/你的用戶名/scrollspy.js" type="text/javascript"></ script > < script  src="http://files.cnblogs.com/files/你的用戶名/stickUp.min.js" type="text/javascript"></ script > < script  src="http://files.cnblogs.com/files/你的用戶名/cnblog-scroller.js" type="text/javascript"></ script >

（直接用我的用戶名也可以~不用下載了）

 

3、效果

請看這里博客左側的導航目錄

 

四、附件下載

4個文件下載

最新的代碼地址：https://github.com/ctxsdhy/cnblogs-example

好久沒去看了，可以直接下載這4個地址的文件

http://files.cnblogs.com/files/ctxsdhy/cnblog-scroller.css

http://files.cnblogs.com/files/ctxsdhy/scrollspy.js

http://files.cnblogs.com/files/ctxsdhy/stickUp.min.js

http://files.cnblogs.com/files/ctxsdhy/cnblog-scroller.js

 因為沒有增加滾動條，為了防止太長我后來把二級以后的行高減小了

 

五、我的主題分享

1、設置——頁面定制 CSS 代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

body {background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABjBAMAAACfybjfAAAAKlBMVEXr6+vt7e3u7u7v7+/w8PDy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vrbLiygAAAC9UlEQVRYw6VWy3HbMBDVOQ0oHShpwLr6ZGfcQgrBzkj31YzVADFpYNlBcnIDnmEBUi8BSIDcBRYEKO9BFi08vt23P+x6b7YPRv9+dtKG5PnP665fzAPbIdR3E1UdcnQQshMB+T9tEGuZbzqESrGsOmYj5JeA2CKEMhZ3tquwZI51k2zOtuUlYbEMYhWI3cTiThJVFSs4RgWIZaqlEFIdY4nsKEK6CGh3zNZSuXjma8z2VM++Hr71yjkINffLBpGt0Nj+bekX23Miz0LVFpvCeDD7HEKrLLalKyWENkEWkUNjfiWWSl5oUTmDfGgslqWFmns/ywuVRQ6NHAuZmnp/q3173t3v98+7t9u9ZLf4MR582yVjqj8YMMHQfwzmEr7i+Hx93SWuOggz8JAInuxcglzmIwOn1CF7I20IbBF2rjjGWFYc2+P01vBiGFhg6P55qrA4kRIWzFnsHoRAEYIGcF2xcizvWyAAkcWm4cPkB4NwR0/HFpZFPzUWOgCTpzEv/iDMJRYgqDhmZ8dAvvXDyDot1BjMb4XEsRFCalkCg/DcolYwe94sWfhgTk+ayMg1G/gz5l1pnchC4okFGPGpoWCgmpcDj37sFxSg80uRJQSAwjH3vOrYWLkw94sp9wsKjYXI/qdr0bHLMvqawo8zCGGBQPDtnKfyuyoyYIUF1UbGmsj6uIAVFuQQkOE/tpK0DVS23+VYwlwKis2uxliWWUY/pp9mVQcZSqH4MRWZY67Z6KNsJYnah9oWG+eYK2gh8tqA5eNinoV5v5C+K9mOWl3iqO/Ko74r2SIfUA7lPPzukPT6wGe6mhdSKhnZW+b1SpWrQq2RcTMEDXJUClFjAZOMcfG8sl5D7UPMPrTclFBZfHoqWYXhvPjwkdsFBOS5lErcdB97JJVy1A08SU44ZSbvjbosELY5hmn2qeGmhKL4KYkFYKkxnMZFW/iojgvTercUt4uV8KF0VVArGfiNPeuXlwLE8OsoEwO+uJJuciV9FlfS23+wcVT7sEin5AAAAABJRU5ErkJggg==')} .postTitle a:hover, .entrylistPosttitle a:hover {margin-left:0 !important;} .postBody h6, .postBody h5, .postBody h4, .postBody h3, .postBody h2, .postBody h1 {color:#444;} .syntaxhighlighter .line.alt1 { padding: 0px 1em !important; border-radius: 0px !important; background: none rgb(248, 248, 248) !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: nowrap !important;">.syntaxhighlighter .line.alt2 { padding: 0px 1em !important; border-radius: 0px !important; background: none rgb(244, 244, 244) !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: nowrap !important;">.CalTodayDay a {color:white !important;} .CalDayHeader {padding:2px 0 5px 0;} .CalNextPrev {text-align:center;} .postTitle {font-size:16px; font-weight:bold; line-height:1.5;} #cnblogs_post_body a {color:#21759b; text-decoration: none;} #cnblogs_post_body a:visited {color:#21759b;} #cnblogs_post_body a:hover {color:#21759b; text-decoration:underline;} .day .postTitle a{padding-left:0px} .postTitle{border-left:0px} #homepage_top_pager {display:none} .pager a {box-shadow:none} .pager a {background:#5997CE} .pager a:hover {background:#21759b} #cnblogs_post_body li {margin-bottom:0px;} #navList #blog_nav_newpost, #navList #blog_nav_contact, #navList #blog_nav_rss, #navList #blog_nav_admin{display:none;} #navList a:hover {color:#21759b !important} #home {margin-top:0px; padding:1px 30px 30px 30px; min-width: 1200px; margin-bottom: 0px;} #blogTitle h1 {margin-top:16px;} #footer {padding-top:34px;} #mainContent {float: right;} #sideBar {float: left; position: relative;} .mySearch {margin-bottom: -5px;} .mySearch h3 {display: none;} #topics .postTitle {padding-left: 0px;} #navigator {position: relative;} .blogStats {position: absolute; left: 0px;} #navigator {padding-left: 254px;} #blogTitle {padding-left: 265px;} #ad_t2 {display: none;} #cnblogs_c1 {display: block;} #under_post_news {display: none;} #cnblogs_c2 {display: block;} #under_post_kb {display: none;} .nav li {margin-bottom: 5px;} #sidebar_categories {display: none;} .newsItem {display: none;} #blog-calendar {display: none!important;} #blog-calendar {width: 210px;} #navigator {height:42px;} @media screen and (max-width: 767px) {#home {padding:1px 10px 30px 10px} #blogTitle {padding-left:0;} .blogStats{display:none;} #navigator {padding-left:0;height:77px;} #topics .postTitle{font-size:16px;} #sideBar{display:none;} #cnblogs_c1, #cnblogs_c2{text-align:left!important;} .postDesc{width:inherit;}} #flagcounterdiv{ margin-top:7px; width:210px; height:17px; background:url(https://s05.flagcounter.com/count/d5Xi/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_3/viewers_3/labels_0/pageviews_0/flags_0/percent_0/); background-size:221px auto; background-repeat:no-repeat; background-position:-6px -2px; } #sidebar_scroller{overflow-y:auto;height:100%;} #navList a {padding-top:12px!important;} .blogStats {margin-top:12px!important;}

公告里的調用次數統計是在這里https://s05.flagcounter.com/申請的，你如果申請到了應該只要替換我鏈接里的"d5Xi"就好了，我調整了下樣式，只顯示前3個國家然后隱藏了廣告..

我隱藏了文章頁的日歷組件，如果不想隱藏的話去掉"#blog-calendar {display: none!important;}"這段就好

還隱藏了博客園爸爸的文字廣告"#ad_t2 {display: none;}"..

加了自適應，手機上看也還行

 

2、設置——博客側邊欄公告

1 2 3 4

< a  href="https://github.com/ctxsdhy" target="_blank">GitHub</ a >  |   < a  href="http://weibo.com/ctxsdhy" target="_blank">新浪微博</ a >  |   < a  href="http://www.ctxsdhy.com" target="_blank">博客</ a > < div  id="flagcounterdiv"></ div >

 

3、設置——頁首 HTML 代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< link  href="http://files.cnblogs.com/files/ctxsdhy/cnblog-scroller.css" type="text/css" rel="stylesheet"> < script  src="http://files.cnblogs.com/files/ctxsdhy/scrollspy.js" type="text/javascript"></ script > < script  src="http://files.cnblogs.com/files/ctxsdhy/stickUp.min.js" type="text/javascript"></ script > < script  src="http://files.cnblogs.com/files/ctxsdhy/cnblog-scroller.js" type="text/javascript"></ script > < script  src="http://files.cnblogs.com/files/ctxsdhy/ctxsdhy.js" type="text/javascript"></ script > < script > $(function(){ $("#navList").append('< li >< a  class="menu" rel="nofollow" href="https://www.cnblogs.com/ctxsdhy/p/9104080.html">開發&測試</ a ></ li >'); $("#navList").append('< li >< a  class="menu" rel="nofollow" href="https://www.cnblogs.com/ctxsdhy/p/9104085.html">架構&項目</ a ></ li >'); $("#navList").append('< li >< a  class="menu" rel="nofollow" href="https://www.cnblogs.com/ctxsdhy/p/9104086.html">運維</ a ></ li >'); $("#navList").append('< li >< a  class="menu" rel="nofollow" href="https://www.cnblogs.com/ctxsdhy/p/9104089.html">讀書&源碼</ a ></ li >'); //$("#navList").append('< li >< a  class="menu" rel="nofollow" href="http://www.cnblogs.com/ctxsdhy/p/5701822.html">最近計划</ a ></ li >'); $("#navList").append('< li >< a  class="menu" rel="nofollow" href="http://www.cnblogs.com/ctxsdhy/p/12009317.html">知識卡片</ a ></ li >'); $("#navList").append('< li >< a  style="color:white" class="menu" rel="nofollow" href="https://i.cnblogs.com" target="_blank">管理</ a ></ li >'); }); </ script >

最后一個按鈕"管理"鼠標移上去才會看到