入園已有兩年有余，時有博文發表，博客首頁使用的是博客園團隊提供的模版，但總感覺頁面有些單一。平時在看別人的博客時，都有一些自定義功能，還蠻吸引我的。參考了很多博文，今天來一個總結，將自己的博客美化過程來分享下。
先來整體感受一下，美化后的博客首頁，如下所示。雖然談不上精致，但還是豐富了不少，也自定義了自己想要的內容。
前提條件
在美化首頁之前，我們需要先做幾個必要事情。
開通js權限
如果沒開通該權限，你看到別人的定制效果很好，照葫蘆畫瓢，將代碼復制到自己的設置中，發現會不生效。沒申請過的朋友，可能會有疑問了，在哪里能獲得這個權限呢？
在你的博客主頁點擊“管理”---->點擊“設置”----下翻找到“申請JS權限”，提交申請即可。
做完這幾步，就是靜候佳音了，在工作時間內，一般一小時內就會處理；如果時間比較長還沒通過，可以給博客園后台發郵件去申請，發給contact@cnblogs.com，有了權限之后就可以開始下面的定制了。有權限顯示如下，界面上顯示為：支持JS代碼。
選擇模板
我們在使用博客的時候，都是有個模板的。今天分享美化內容，選擇的模板是：AnotherEon001。按理說，每個模板都可以這樣優化，只是有些內容或按鈕顯示的不協調而已，需要再次調整下。優化內容僅供參考，每個人都是不一樣的煙火，都是自己的獨到之處，可以把自己的博客裝飾成別具一格的頁面。
開始定制
當前期准備做好后，我們就可以開始着手美化自己的博客了。
1.自定義導航欄
我們首先需要做的是，屏蔽調官方模板自帶的導航欄，然后才能把自己寫好的導航欄加上去，這個導航欄內容你可以自己修改成你自己的，用編輯器修改好代碼，然后把它分別粘貼到“頁面定制CSS代碼”框和“頁首HTML代碼”框，代碼如下：
導航欄CSS定制代碼
#header{display:none;} /* 將默認的導航頭屏蔽掉 */ /* 定制自己導航欄的樣式 */ #shwtop ul { margin: 0; padding: 0; list-style-type: none; /*去除li前的標注*/ background-color: #333; overflow: hidden; /*隱藏溢出的部分，保持一行*/ } #shwtop li { float: left; /*左浮動*/ } #shwtop li a, .dropbtn { display: inline-block; /*設置成塊*/ color: white; text-align: center; text-decoration: none; padding: 14px 16px; } /*鼠標移上去，改變背景顏色*/ #shwtop li a:hover, .dropdown:hover .dropbtn { /* 當然顏色你可以自己改成自己喜歡的，我還是挺喜歡藍色的 */ background-color: blue; } #shwtop .dropdown { /* display:inline-block將對象呈遞為內聯對象， 但是對象的內容作為塊對象呈遞。 旁邊的內聯對象會被呈遞在同一行內，允許空格。 */ display: inline-block; } #shwtop .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } #shwtop .dropdown-content a { display: block; color: black; padding: 8px 10px; text-decoration:none; } #shwtop .dropdown-content a:hover { background-color: #a1a1a1; } #shwtop .dropdown:hover .dropdown-content{ display: block; } /* 標題欄優化到此 */
頁首Html代碼
<!-- 創建新的導航欄，內容可更改為你自己的--> <div id="shwtop" > <ul style="margin-left:0px;margin-right: 0px;" class="test11" > <div class="dropdown"> <a href="#" class="dropbtn">博客園管理</a> <div class="dropdown-content"> <!-- <a class="menu" href="這里是你文章或隨筆分類的鏈接地址，自己修改下面同理"> 這里更改下拉具體內容 </a> --> <a class="menu" href="https://www.cnblogs.com/" >1.博客園首頁</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/" >2.我的首頁</a> <a class="menu" href="https://i-beta.cnblogs.com/posts/edit" >3.添加新隨筆</a> <a class="menu" href="https://msg.cnblogs.com/send/%E6%B8%A9%E4%B8%80%E5%A3%B6%E6%B8%85%E9%85%92" >4.聯系博主</a> <a class="menu" href="https://i-beta.cnblogs.com/" >5.博客園后台</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">全部分類</a> <div class="dropdown-content"> <!-- <a class="menu" href="這里是你文章或隨筆分類的鏈接地址，自己修改下面同理"> 這里更改下拉具體內容 </a> --> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1541858.html" >1.APP自動化</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1357115.html" >2.Jmeter自動化</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1462114.html" >3.Linux環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1092643.html" >4.Jmeter基礎</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1081628.html" >5.UI自動化（Java）</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1291998.html" >6.Python</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1085615.html" >7.接口測試</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1447060.html" >8.抓包工具</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">APP自動化</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11475812.html" >1.自動化環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11546338.html" >2.Genymotion模擬器</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11614039.html" >3.Appium API</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11615628.html" >4.Appium-Server與Appium-Desktop</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1541858.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">Jmeter自動化</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10290315.html" >1.Jenkins環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10462493.html" >2.jmeter+ant+jenkins環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10473996.html" >3.郵件發送</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10547176.html" >4.定時構建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10706234.html" >5.參數化配置</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10849062.html" >6.優化測試報告</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1357115.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">Linux環境搭建</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10890812.html" >1.Java+Tomcat配置</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11073195.html" >2.Jenkins+Gitlab配置</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11073308.html" >3.Jmeter+Ant配置</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11073507.html" >4.綜合實踐</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1462114.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">Jmeter基礎</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7640014.html" >1.Jmeter環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7650762.html" >2.Jmeter關聯</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7668258.html" >3.腳本開發</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10792485.html" >4.Basic Auth登錄</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/12112624.html" >5.參數化JDBC</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/12109888.html" >6.參數化CSV</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/12175501.html" >7.RSA加密</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1092643.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">UI自動化（Java）</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7622215.html" >1.環境搭建</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7623838.html" >2.驅動+元素定位</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7625800.html" >3.基本API</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7629039.html" >4.AutoIT鍵盤操作</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7544560.html" >5.TestNG基礎</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7554023.html" >6.TestNG實踐</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1081628.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">Python</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/9574693.html" >1.經典排序</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/9656221.html" >2.截圖詳解</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/9693865.html" >3.AutoIT鍵盤操作</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11679676.html" >4.Requests實踐</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/11593345.html" >5.Unittest實踐</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1291998.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">接口測試</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7591751.html" >1.SoapUI入門</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7615182.html" >2.Postman基礎</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7596342.html" >3.Postman動態傳參</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7601859.html" >4.Postman高級應用</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7610606.html" >5.HttpClient介紹</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7617855.html" >6.HttpClient實踐</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1085615.html" target="_Blank">更多...</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">抓包工具</a> <div class="dropdown-content"> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/7582947.html" >1.Fiddler基礎</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10727178.html" >2.Fiddler篡改數據</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/10889227.html" >3.Fiddler小技巧</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/12562448.html" >4.移動端工具Stream</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/p/12582455.html" >5.FiddlerMock測試</a> <a class="menu" href="https://www.cnblogs.com/hong-fithing/category/1447060.html" target="_Blank">更多...</a> </div> </div> </ul> </div> <!-- 創建新的導航欄，內容可更改為你自己的-->
我們來看下效果圖，如下所示：
2.添加頂部信息
增加頁面頂部信息，代碼放到頁首HTML中，代碼示例如下：
<!-- 添加博客頂部博主信息--> <p style="text-align: center;font-size:40px;font-family: 'STLiti';margin-bottom:8px;margin-top:25px;opacity: 0.5">歡迎來到溫一壺清酒的博客</p>
效果圖如下所示：
3.添加頂部公告
增加個頂部公告，添加一幅詩詞，是不是增加了點文人雅士的氣息，^_^^_^，我們來看代碼，將代碼增加到頁首HTML中即可，如下所示：
<!-- 添加頂部滾動信息（公告）例子：《行路難》--> <div id="Scroll_info" style="text-align: center;color:red;font-size:13px;padding:5px;opacity: 0.5">。 《行路難》李白 金樽清酒斗十千，玉盤珍羞直萬錢。 停杯投箸不能食，拔劍四顧心茫然。 欲渡黃河冰塞川，將登太行雪滿山。 閑來垂釣碧溪上，忽復乘舟夢日邊。 行路難！行路難！多歧路，今安在？ 長風破浪會有時，直掛雲帆濟滄海</div> <script> function func(){ var tag = document.getElementById('Scroll_info'); var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()',1600); </script>
效果圖如下所示：
4.添加目錄導航
書寫博文，就是用於分享並記錄自己的成長史。有不錯的閱讀索引，可以給博文增加不錯的好感。目錄為兩級，為H2、H3，也就是默認編輯器的標題2和標題3格式，Markdown對應##和###，所以只要你以后文章按照這個標題格式寫，就能自動生成目錄。分享的代碼示例已支持三級菜單，目錄導航按鍵的位置，大小，顏色等樣式你可以修改代碼改變，把代碼放到“頁面定制CSS代碼”框和“頁腳HTML代碼”框，代碼如下：
頁面定制CSS代碼
/* 定制生成博客目錄的CSS樣式 */ #uprightsideBar{ font-size:16px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed; /* 將div的位置固定到距離top:150px，right:0px的位置， 這樣div就會處在最右邊的位置，距離頂部150px， 當然這兩個值你可以自己改。 */ top:150px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:25px; box-shadow: 0 0 8px #877788; border:1px solid #00DDC00; border-right:none; text-align:center; background:rgb(72 ,118, 255); } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:101px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents dt{ margin-top:5px; margin-left:5px; } #sideBarContents dd, dt,ds { cursor: pointer; } #sideBarContents dd:hover, dt:hover,ds:hover { color:#A7995A; } #sideBarContents dd{ margin-left:20px; }
頁腳Html代碼
<script type="text/javascript"> /* 這段代碼按H2、H3格式生成兩級菜單 寫博客按H2、H3格式寫，不然生成不了 Markdown寫作按##、###兩級目錄寫 當然你也可以改寫代碼成三級菜單 */ var BlogDirectory = { /* 獲取元素位置，距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top）*/ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top:topPosition, left:leftPosition}; }, /*獲取滾動條當前位置 */ getScrollBarPosition:function () { var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移動滾動條，finalPos 為目的位置，internal 為移動速度 */ moveScrollBar:function(finalpos, interval) { //若不支持此方法，則退出 if(!window.scrollTo) { return false; } //窗體滾動時，禁用鼠標滾輪 window.onmousewheel = function(){ return false; }; //清除計時 if (document.body.movement) { clearTimeout(document.body.movement); } //獲取滾動條當前位置 var currentpos =BlogDirectory.getScrollBarPosition(); var dist = 0; //到達預定位置，則解禁鼠標滾輪，並退出 if (currentpos == finalpos) { window.onmousewheel = function(){ return true; } return true; } //未到達，則計算下一步所要移動的距離 if (currentpos < finalpos) { dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; } var scrTop = BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 window.scrollTo(0, currentpos);//移動窗口 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，則解禁鼠標滾輪，並退出 { window.onmousewheel = function(){ return true; } return true; } //進行下一步移動 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode:function (text){ var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; }, /* 創建博客目錄，id表示包含博文正文的 div 容器的 id， mt 和 st 分別表示主標題和次級標題的標簽名稱（如 H2、H3，大寫或小寫都可以！）， interval 表示移動的速度 */ createBlogDirectory:function (id, mt, st, newdist, interval){ //獲取博文正文div容器 var elem = document.getElementById(id); if(!elem) return false; //獲取div中所有元素結點 var nodes = elem.getElementsByTagName("*"); //創建博客目錄的div容器 var divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); var divSideBarTab = document.createElement('DIV'); divSideBarTab.setAttribute('id', 'sideBarTab'); divSideBar.appendChild(divSideBarTab); var h2 = document.createElement('H2'); divSideBarTab.appendChild(h2); var txt = document.createTextNode('目錄導航'); h2.appendChild(txt); var divSideBarContents = document.createElement('DIV'); divSideBarContents.style.display = 'none'; divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //創建自定義列表 var dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); var num = 0;//統計找到的mt和st mt = mt.toUpperCase();//轉化成大寫 st = st.toUpperCase();//轉化成大寫 newdist = newdist.toUpperCase();//轉化成大寫 //遍歷所有元素結點 for(var i=0; i<nodes.length; i++) { if(nodes[i].nodeName == mt|| nodes[i].nodeName == st || nodes[i].nodeName == newdist) { //獲取標題文本 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的內容可能有HTML標簽，所以用正則表達式去除HTML的標簽 nodetext = nodetext.replace(/ /ig, "");//替換掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入錨 nodes[i].setAttribute("id", "blogTitle" + num); var item; switch(nodes[i].nodeName) { case mt: //若為主標題 item = document.createElement("dt"); break; case st: //若為子標題 item = document.createElement("dd"); break; case newdist: //若為子標題 item = document.createElement("ds"); break; } //創建錨鏈接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); item.setAttribute("name", num); //添加鼠標點擊觸發函數 item.onclick = function(){ var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //將自定義表項加入自定義列表中 dlist.appendChild(item); num++; } } if(num == 0) return false; /* 鼠標進入時的事件處理 */ divSideBarTab.onmouseenter = function(){ divSideBarContents.style.display = 'block'; } /* 鼠標離開時的事件處理 */ divSideBar.onmouseleave = function() { divSideBarContents.style.display = 'none'; } document.body.appendChild(divSideBar); } }; window.onload=function(){ /* 頁面加載完成之后生成博客目錄 */ BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3","h4",20); //為右下角推薦推薦區域添加關注按鈕 $('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="follow(\'ab04813a-468b-4ddf-dd4b-08d4ef52ecb5\');" href="javascript:void(0);" style="font-weight: bold; padding-left:5px;">關注下博主喲</a> </div>'); } </script>
效果圖如下所示：
5.美化推薦功能
平時自己寫的博文，被博友們，自然是一件喜悅的事情，此處優化了下按鈕的位置，示例代碼如下所示，代碼寫到頁面定制CSS中。
頁面定制CSS代碼
/* 點贊與反對優化 */ #div_digg { padding: 0px; position: fixed; _position: absolute; bottom: 20px; right: -28px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 1; opacity: 1; text-align: center; } .icon_favorite { background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0; padding-left: 16px; } /* 隱藏反對入口 */ .buryit {display:none;} /* 配置點贊按鈕居中 */ .diggit{ float:left; margin-left:40px; width:46px; height:52px; text-align:center; cursor:pointer; margin-top:2px; padding-top:5px; }
效果圖如下所示：
6.添加快速返回
添加快速返回頂部的功能按鍵，使其能夠在文章任意文字快速返回文章頂部，把代碼分別粘貼到“頁面定制CSS代碼”框和“頁首HTML代碼”框，和上面一樣修改代碼，可以調整按鍵的位置，大小等，代碼如下：
頁面定制CSS代碼
/* 定制返回頂部按鍵 */ #toTop { background: url(https://files-cdn.cnblogs.com/files/hong-fithing/timg_top.bmp) no-repeat 0px top; width: 65px; height: 65px; overflow: hidden; position: fixed; right: 140px; bottom: 20px; cursor: pointer; padding: 0px; margin:10px; }
頁首HTML代碼
<!-- 指定返回頂部位置#shwtop --> <a href="#shwtop"><div id="toTop" style="zoom:0;"></div></a>
效果圖如下：
7.添加打賞功能
為博客添加一個打賞功能，如果讀者覺得你的文章對他有幫助，他可以通過這個按鍵來打賞你。當然，要用這個插件功能，首先你得配置以下參數。代碼list[]qrImg: 'https://files-cdn.cnblogs.com/files/hong-fithing/zhifubao_100_100.bmp'里的支付寶或者微信二維碼的圖片位置，你要修改成你自己的。【不過不修改，我也不介意的，哈哈哈哈】
在配置打賞功能時，需要先到支付寶或者微信客戶端生成一個二維碼，然后保存到手機，上傳到電腦，再上傳到你的博客相冊中，然后獲得圖片源鏈接。
這里需要注意的是，靜態圖片，不要過大，最好是設置下圖片的大小再上傳到博客文件中。
參數設置
1.修改支付寶和微信二維碼鏈接；
2.修改top: '40%' ：這一項可以改變按鍵在屏幕的位置，調到你屏幕的合適位置，這里可以用百分比%，也可以用像素px來指定；
3.修改id：9這一項修改顏色，1~9代表不同的9種顏色，可以嘗試修改；
4.修改type：'dashang'這一項是修改顯示文字的。有兩種顯示，一種是打賞（dashang），一種是贊助（zanzhu）。
貢獻該插件作者的github地址是：https://github.com/greedying/tctip
打賞功能的代碼寫在頁腳HTML代碼中，代碼如下所示：
<!-- 添加打賞功能按鍵 --> <script src="https://static.tctip.com/tctip-1.0.2.min.js"></script> <script> new tctip({ top: '40%', button: { id: 9, type: 'dashang', }, list: [ { type: 'alipay', qrImg: 'https://files-cdn.cnblogs.com/files/hong-fithing/zhifubao_100_100.bmp' }, { type: 'wechat', qrImg: 'https://files-cdn.cnblogs.com/files/hong-fithing/weixin_100_100.bmp' } ] }).init() </script>
效果圖如下：
8.添加github地址
在博客頁面中添加Github圖標，可以快速鏈接到你的github或者其他網址。圖標的樣式可以自己修改，代碼放在“頁腳HTML代碼”框中，代碼如下：
頁腳HTML代碼
<!-- 博客頁面腳添加Github鏈接或其他鏈接 --> <!-- 頁面左上角 --> <a href="https://www.jianshu.com/u/518462f09fa6" title="我的簡書地址" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <!-- 頁面右上角 --> <a href="" title="我的github地址" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
效果圖如下：
9.添加個性時鍾
在博客左側欄增加個時鍾，豐富下頁面，代碼分部放到頁面定制CSS和博客側邊欄公告中，代碼如下所示：
頁面定制CSS代碼
/* 定制公告欄時鍾位置 */ #clockdiv { /* left, center, right */ text-align: center; }
博客側邊欄公告代碼
<!-- 添加公告欄時鍾 --> <div id="clockdiv"> <canvas id="dom" width="120" height="120">時鍾canvas</canvas> </div> <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
效果圖如下：
10.添加訪客來源
在添加訪客來源功能時，好多都是介紹使用Flag Counter這個插件，網址是：http://s11.flagcounter.com/more/Fe64/，但我操作了下，似乎是不生效，不知是我配置問題還是如何。當配置不生效的情況下，我就換了種方式。使用該網站來統計：https://www.bfcounter.vip/，按網址提供的步驟操作即可。將代碼放到博客側邊欄公告代碼中，如下所示：
<!-- 訪問地區來源統計 --> <h3>訪客來源</h3> <a href="https://www.bfcounter.vip/"><img src="https://www.bfcounter.vip/generatepic?userid=656a7624-6c20-45c7-ac21-1b1c6fa67d20" alt="Page Counter" border="0"></a>
效果圖如下：
11.添加點擊特效
添加鼠標點擊心形特效，代碼放到博客側邊欄公告中，代碼示例如下：
博客側邊欄公告代碼
<script type="text/javascript"> /* 點擊出現愛心特效*/ (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script>
效果圖如下：
12.添加個性簽名
添加個性簽名，增加樣式優化，頁面定制CSS代碼示例如下：
/* 設置簽名格式 定制css樣式 */ #MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; text-shadow: 1px 1px 1px #FFF; font-size: 16px; font-family: 'Microsoft Yahei'; }
樣式添加好了，那就到博客簽名中，添加簽名內容，點擊博客園中的管理>博客簽名按鈕，如下：
添加簽名內容，如下所示：
<div>作者：<a href="https://www.cnblogs.com/hong-fithing/">溫一壺清酒</a></div> <div>出處：<a href="https://www.cnblogs.com/hong-fithing/">https://www.cnblogs.com/hong-fithing/ </a></div> <div>本文僅代表作者觀點，系作者@溫一壺清酒發表。<br />文中書寫有誤之處，歡迎批評指正。<br />歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。</div> <p>-------------------------------------------</p> <p>座右銘：發上等願，結中等緣，享下等福； 擇高處立，尋平處住，向寬處行。</p> <p>如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個<span style="color: #F00000; font-size: 18px"> [推薦]</span>哦，博主在此感謝！</p> <p></p> <p>你的打賞，是對博主最大的鼓勵；如果你心情無比愉悅，也是可以掃碼打賞博主的，哈哈哈^_^O(∩_∩)O哈哈~</p> <div align="left"> <img src="https://files-cdn.cnblogs.com/files/hong-fithing/weixin_100_100.bmp"> <img src="https://files-cdn.cnblogs.com/files/hong-fithing/zhifubao_100_100.bmp"> </div>
效果圖如下所示：
13.添加標題樣式
博文中，都會有不同的標題，但標題又如何來區分呢，增加如下樣式，那便一目了然了，也可以自定義修改，看個人喜好，示例代碼如下：
頁面定制CSS代碼
/* 定制生成博客標題樣式 */ #cnblogs_post_body { color: black; font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px; } #cnblogs_post_body h1 { background:#169fe6; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 22pt; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h2 { background: #006699; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 18px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h3 { background: #87CEFA; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #AFEEEE, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 16px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h4{ background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 14px; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h5{ background: #778899; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 12px; font-weight: bold; height: 23px; line-height: 22px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; }
效果圖如下：
14.隱藏默認內容
既然是自定義博客內容，那自然有些內容是不想要的，那該如何處理呢？不想展示在頁面中，那直接隱藏掉即可，代碼寫在頁面定制CSS中，示例代碼如下：
頁面定制CSS代碼
/* 隱藏導航欄里的訂閱 */ #leftmenu ul li a#blog_nav_rss{display: none;} /* 隱藏導航欄里的訂閱圖片 */ #leftmenu ul li a#blog_nav_rss_image{display: none;} /* 隱藏導航欄里的標題 */ /*#leftmenu h3{display: none;}*/ /* 隱藏導航欄里的博客園入口 */ #leftmenu ul li a#blog_nav_sitehome{display: none;} /* 隱藏導航欄里的個人博客入口 */ #leftmenu ul li a#blog_nav_myhome{display: none;} /* 隱藏導航欄里的新隨筆入口 */ #leftmenu ul li a#blog_nav_newpost{display: none;} /* 隱藏導航欄里的聯系入口 */ #leftmenu ul li a#blog_nav_contact{display: none;} /* 隱藏導航欄里的管理入口 */ #leftmenu ul li a#blog_nav_admin{display: none;} /* 隱藏搜索入口 */ #sidebar_search{display: none;} /* 隱藏常用鏈接入口 */ #sidebar_shortcut{display: none;}
將不想要的內容隱藏后，頁面會覺得更簡潔。
問題
圖片過大
增加了打賞功能，加載圖片會出現失敗的情況，訪問靜態圖片，提示錯誤如下所示：
{"success":false,"message":"該文件已超過當日下載流量(200MB)的下載限制"}
解決該問題，就是將圖片變小一些，這里需要注意。
打賞功能不展示
配置了打賞功能，但對應功能沒有展示，百度查訪了一番，有網友解答道，因為瀏覽器為了安全起見，默認是不允許在HTTPS里面引用HTTP資源的。
解決辦法：
將我們后台代碼中<script src="//static.tctip.com/tctip-1.0.2.min.js"></script>
替換成<script src="https://static.tctip.com/tctip-1.0.2.min.js"></script>
再次訪問頁面，打賞功能就正常展示了。
以上內容就是我自己在優化博客頁面的總結了，也是感謝各位大佬的分享，讓我東拼西湊，整合成一份完美的優化。