博客園樣式美化

• 前言
• 准備工作
• 美化樣式
• 實現過程
  • 1、頂部加載條
  • 2、頂部導航條
  • 3、導航條上的關於和友情鏈接
  • 4、背景圖片模糊
  • 5、為每篇文章單獨的背景
  • 6、修改markdown樣式
  • 7、生成目錄
  • 8、底部導航條
  • 9、去除尾部廣告
  • 10、適配手機
  • 11、針對首頁優化
  • 12、訪問統計
• 總結

前言

之前就想通過博客園提供的自定義樣式功能美化一下博客，但是一直想等學會 vue 再來改（其實是懶......）。上個禮拜看到一位大神的博客感到非常驚艷，遂下定決心用一個周末來改。之前有想過自己設計樣式，但是感覺越看越丑，所以還是決定照着這位大神的博客一點點改。

准備工作

1、先看看有沒有輪子

Google 一下，沒有喜歡的樣式。

上 Github 也沒有搜到想要的。

可能關鍵詞沒用對吧。

2、自己動手，豐衣足食

首先要申請js權限，要不然很多東西都實現不了。然后右鍵查看源代碼，把html下載下來（方便在本地調試）。最后照着別人的博客一點點的修改，一步一步的實現效果。

ps:我原本用的博客樣式是bluesky，其實還是蠻喜歡的

3、最后成果

修改前：

修改后：

美化樣式

Github

實現過程

1、頂部加載條

我采用的是NProgress,這個我感覺非常好用。這是他們的官網，可以直接點四個方法查看效果。

點Download會跳到Github上去，上面有詳情文檔和CDN地址

我采取了最簡單的方法

$(document).ready(function(){
	    NProgress.start();
	    NProgress.done();
}

效果是：

2、頂部導航條

頂部導航條要實現下滑隱藏，上滑加載。這個剛開始以為很難，沒想到還是比較簡單的。

百度找到監聽滾動條事件的js方法

	var oldScrollNum = 0;
	window.onscroll = function(){
		var t = document.documentElement.scrollTop || document.body.scrollTop;
		//下滑
		if (t>oldScrollNum) {

		//上拉
		}else{

		}
		oldScrollNum = t;
	}

然后通過這個方法改變頂部導航條的margin-top的值達到展現隱藏的效果

最后給滾動條加上過渡屬性 transition: 0.5s ease-in-out; ，這樣就達到了想要的效果。

ps：其實用CSS動畫實現更流暢一點。

3、導航條上的關於和友情鏈接

這個其實就是寫兩篇隨筆 ，因為隨筆的地址是固定的所以可以寫死。

4、背景圖片模糊

這個css3提供了原生支持：filter: blur(3px);

原圖：

duang！加了特效后：

5、為每篇文章單獨的背景

這個得每篇文章里面加個隱藏域，value存背景圖片的地址。

//設置背景圖片地址
	    if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
	    	$("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
	    }else{
    		$("#myheader_bg").css("background-image","url(https://ww1.sinaimg.cn/large/0062YmUwgy1fthnpo4n7yj31hc0hrq8e.jpg)");
	    }

這里設成沒有取到值就用默認的

6、修改markdown樣式

這個就得嘔心瀝血的一點點調整了...

	/** MarkDown樣式調整 */
	.cnblogs-markdown .hljs{
	    font-size: 16px!important;
	    line-height: 2!important;
	    padding: 15px!important;
	}
	.cnblogs-markdown code{
		background:rgb(238,240,244) none !important;
		border:0px !important;
		color: rgb(73,59,92) !important;
		font-size: 16px!important;
	}
	.cnblogs-markdown h2{
		font-weight: 500;
		margin: 20px 0;
	}
	.cnblogs-markdown h2:before{
		content: "#";
		color: #eb5055;
		position: relative;
		top: 0;
		left: -12px;
	}
	#cnblogs_post_body h2{
		font-weight: 500;
		margin: 20px 0;
	}
	#cnblogs_post_body h3{
		font-size: 16px;
	    font-weight: bold;
	    line-height: 1.5;
	    margin: 10px 0;
	}
	.cnblogs-markdown h3:before{
		content: "##";
		color: #2175bc;
		position: relative;
		top: 0;
		left: -8px;
	}
	.postBody blockquote, .postCon blockquote{
		background-image: none;
		border-left: 5px solid #DDDFE4;
		background-color: #EEF0F4;
		width: 100%;
		padding: 6px 0 6px 25px;
	}

修改前：

修改后：

ps:感覺還是不太滿意┑(￣Д ￣)┍

7、生成目錄

這個采用了Github上的輪子：https://github.com/gzdaijie/cnblogs_markdown_optimize

然后我魔改了下。。

function() {
            // 根據h2、h3標簽自動生成目錄
            var captions_ori = $("#cnblogs_post_body h2"),
            	captions_ori2 = $("#cnblogs_post_body h3"),
                captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<ul id='right_meun'></ul>");
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1,index2 = -1;
            captions.replaceWith(function(){
                var self = this;
                if(self.tagName == "H2" || self.tagName == "h2"){
                    // 設置點擊目錄跳轉
                    index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); 
                    return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
                } else {
                	// add by summertime-wu 增加h3鏈接跳轉
                	index2 += 1;
                	$('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]); 
                	$("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
                    return ;
                }
            });
        }

eummm......看起來比較糟糕，但是能跑！！

效果：

8、底部導航條

這個實現和頂部的差不多，多的就是去頂尾部和上一篇下一篇的四個按鈕，去頂部和去尾部用錨點很好實現，上一篇和下一篇則需要用js從頁面上取值

然后賦給自定義的按鈕。不過這里需要注意一點，由於這個上一篇和下一篇的鏈接博客園是采取ajax異步加載的方式，所以直接取鏈接可能導致取空值，需要設置一個定時器來取，我的是設置了1秒后再從頁面上取。

        /** 設置ajax請求加載完數據時執行的js */
	setTimeout(afterAjax,1000);
	function afterAjax(){
            //取值
        }

9、去除尾部廣告

額，這個呢。實現so easy，找到對應廣告元素的id，設置 display:none 就好了，但是有點心虛。畢竟博客園免費給我們提供的了地方寫博客，然而我卻......

10、適配手機

這個其實沒有仔細處理，只是粗略的調整了下主體的大小，當瀏覽器寬度小於1000px時，將#main設為100%寬。

	#main{
		width: 40%;
		background-color: white;
		/*max-width: 700px;*/
	}
	@media screen and (max-width: 1000px) {
	 #main {width: 100%;}
	}

效果：

11、針對首頁優化

通過js獲取當前url，然后匹配一下（其實這里可以優化一下，判斷是否包含 summertime-wu 且后面沒有下一級）

if (window.location.href == "https://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "https://www.cnblogs.com/summertime-wu/"||
            window.location.href == "http://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "http://www.cnblogs.com/summertime-wu/") {
    //針對性優化
}

是的，我現在才發現博客園既可以走http，也可以走https。。其實還可以這樣：http://summertime-wu.cnblogs.com

12、訪問統計

我這里采用的是http://www.flagcounter.com/,感覺挺不錯的，不需要注冊什么的，生成了html代碼直接復制到側邊欄代碼框里就可以用了。

不過由於我把側邊欄隱藏了，所以網頁上看不到。正好我也不想讓這個統計影響了整體的頁面風格。

當然即使隱藏了還是能夠正常統計的。假如自己需要查看則需要手動在控制台改下樣式，讓 #maincontent 縮小，#sidebar展現。

總結

1. 在這里鄭重感謝Chakhsu Lau，是這位大神的博客給我提供了模仿的對象。ps:這位大神的博客是用他自己寫的一個Typecho主題：pinghsu,使用了pjax技術，體驗如絲滑般流暢。

2. 由於自己是后端，不太會寫前端，很多地方都不夠優雅，甚至有點小蠢。但是，能跑！！ ＋△＋

3. 現在發現寫前端原來這么爽，打開控制台你就是上帝了，很多東西都有現成的輪子，還非常簡單好用。不過也發現前端不爽的地方，要適配各種分辨率和兼容各種瀏覽器。

4. 自己同時是提需求的和實現需求的好矛盾啊啊啊。不過我最后堅定了一個想法，無論多難都要實現，打磨好每一個細節ˋ︿ˊ

5. 源碼稍后會放在 Github上，如有做得不好的地方，請不吝賜教，假如覺得不錯的話給個star吧˙▽˙