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

時間  2020-05-29
標籤 博客 文章 自動 生成 導航 目錄 简体版
原文   原文鏈接

文章若是比較長的話，子標題很難找，文章結構無法一目瞭然，若是有一個導航目錄靠在邊欄就行了javascript

看了不少園子裏其餘的文章，js和css挺長的，怕用很差，乾脆本身嘗試寫一個css

 

1、要實現的功能

一、自動生成

不限定某幾個h標籤，最好h1-h6均可以支持html

二、靠在側邊欄

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

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

三、簡單的風格

不一樣皮膚顯示能夠融入的比較好，這裏會借用catListPostArchive隨筆檔案的css類，導航目錄的樣式會和隨筆檔案的樣式同樣，本身就不用加樣式了github

四、目錄滾動監聽

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

五、優化

最好能平滑的滾動架構

 

2、實現代碼

一、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有一點小問題，這裏附件中的已經修復了app

scrollspy.js插件有兩種初始化方式，一種是直接在body中增長"data-spy='scroll'"，是立刻加載的，由於咱們要延遲，因此用第二種js手動初始化"$('body').scrollspy();"，須要注意的是被監測的ul要附加"nav"的css類，scrollspy.js的代碼中是經過".nav li > a"的結構去查找的運維

我習慣本身給h標籤裏添加序號的，因此代碼中沒有增長自動編號的功能，須要的話請在代碼中增長

 

二、cnblog-scroller.css

.scroller-offset1 {text-indent: 0 /* !important */;}
.scroller-offset2 {text-indent: 1.5em;}
.scroller-offset3 {text-indent: 3em;}
.scroller-offset4 {text-indent: 4.5em;}
.scroller-offset5 {text-indent: 6em;}
.scroller-offset6 {text-indent: 7.5em;}
.nav .active {background-color:#f5f5f5;}

若是皮膚有本身設定text-indent縮進的話，須要用本身!important來強制設定，具體距離根據皮膚調整一下

 

3、使用方法

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

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

右邊有申請js權限的按鈕，理由寫但願使用js來自動生成文章的導航目錄就能夠了

 

二、在頁首Html代碼中增長

將附件中的的4個文件上傳到本身的博客園裏，在博客園 -> 管理 -> 文件 -> 選擇文件 上傳

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

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

（直接用個人用戶名也能夠~不用下載了）

 

三、效果

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

 

4、附件下載

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

 由於沒有增長滾動條，爲了防止太長我後來把二級之後的行高減少了

 

5、個人主題分享

一、設置——頁面定製 CSS 代碼

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 {background-color:#f4f4f4!important}
.syntaxhighlighter .line.alt2 {background-color:#F8F8F8!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;}"..

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

 

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

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

 

三、設置——頁首 HTML 代碼

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程