博客園頁面美化

    參考了很多大賢的博客，總結嘗試后，隨筆記錄。原帖網址如下：

靜默虛空：https://www.cnblogs.com/jingmoxukong/p/7826982.html

Penn000：https://www.cnblogs.com/Penn000/p/6947472.html

溫一壺月光：https://www.cnblogs.com/Tangent-1231/p/10393759.html

Trainoo：https://www.cnblogs.com/Trainoo/p/8045340.html

---

---

    首先，模板要選擇darkgreentrip，在此基礎上進行修改。

一、頁面CSS代碼

    將以下代碼復制粘貼到頁面css代碼欄中，不同參數代表的頁面目標我已經在代碼注釋里標出來了，自行調節就好，以rgba（255,0,0,0.5）為例，255,0,0表示紅色，0.5表示透明度。可使用顏色在線轉換器將顏色的16進制轉換為rgba格式。

    要構想出一個大致的樣式，事先想好風格、效果，修改顏色后將代碼粘入，最后進行微調。

#home {
    margin: 0 auto;/*元素外邊距*/
    width: 80%;/*原始65*/
    min-width: 980px;/*頁面頂部的寬度*/
    background-color: rgba(254,254,254, 0.5);/*頁面背板顏色，建議如果有背景圖片的話，透明度高一些，不會遮擋*/
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(255,0,0,0.7);/*背板邊緣光暈*/
}
body {
    background:rgba(154,252,0,0.05);/*網頁背景顏色*/
    background-position: 50% 5%; 
    background-size: cover;
}
#blogTitle {
    height: 90px;
    clear: both;
    background-color: rgba(245, 245, 245, 0);/*名字欄背景顏色，建議為白色，其他顏色有點怪，不好協調*/
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right; 
}
#navigator{
    background-color: rgba(255,0,0,0.8);/*主頁面大標題框顏色*/
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(255,0,0, 0.8);/*隨筆小標題前小方塊顏色*/
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #FF0000;/*隨筆小標題顏色*/
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 10px;
    color: #030303;/*隨筆小標題鼠標點擊時顏色顏色*/
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}

.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255,255,255,0.5);/*純白*/
}
/*文章附加信息*/
.postDesc {   
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #030303;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;     
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 發表時間左邊距離*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);/*側邊欄小背板顏色*/
    margin-bottom: 35px;
    word-wrap: break-word;
}

.CalTitle{
    background:  rgba(255, 255, 255, 0.5);/*日歷欄標題欄顏色*/
}
.catListTitle{
    background-color: rgba(255,0,0,0.8);/*側邊欄標題框顏色*/
}

#topics{
    background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
    display: none;
}

#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}

.cnblogs_code div{
    background: rgba(255, 255, 255, 0); 
}

.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0); 
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5); 
}

二、博客側邊欄設置（先申請js權限）

    1.添加右下角的返回頂部圖標（小火箭），可更改12行的圖片鏈接修改圖標樣式：

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

    2.添加側邊欄頭像，第三行的圖片鏈接換成自己的：

</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2178320981,2144335976&fm=26&gp=0.jpg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">

    3.添加公告欄時鍾控件特效:

<embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

三、頁首HTML代碼

    1.右上角Github鏈接，可進入http://tholman.com/github-corners/自行更改角標樣式（需將第一行的GitHub鏈接改成自己的）：

<!-- github  -->
<a href="https://github.com/MenxinJie" 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>

四、頁腳HTML代碼

    1.頁面背景特效，線條隨鼠標移動：

<script>
!function(){
 function n(n,e,t){
 return n.getAttribute(e)||t
 }
 function e(n){
 return document.getElementsByTagName(n)
 }
 function t(){
 var t=e("script"),o=t.length,i=t[o-1];
 return{
 l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
 }
 }
 function o(){
 a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
 c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
 }
 function i(){
 r.clearRect(0,0,a,c);
 var n,e,t,o,m,l;
 s.forEach(function(i,x){
 for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
 null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
 l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
 t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
 }),
 x(i)
 }
 var a,c,u,m=document.createElement("canvas"),
 d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
 function(n){
 window.setTimeout(n,1e3/45)
 },
 w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
 window.onmousemove=function(n){
 n=n||window.event,y.x=n.clientX,y.y=n.clientY
 },
 window.onmouseout=function(){
 y.x=null,y.y=null
 };
 for(var s=[],f=0;d.n>f;f++){
 var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
 }
 u=s.concat([y]),
 setTimeout(function(){i()},100)
 }();
 </script>

    2.鼠標點擊爆炸動畫（這個我自己沒用）

/* 點擊爆炸效果*/
<canvas class="fireworks" style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;" width="2880" height="902"></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript">
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
</script>

五、2019/10/8更新！！！

    上面的代碼做出來的頁面已經沒在用了，補充兩個新的頁面，其中頁面CSS代碼（三）參考自夏日淺笑https://www.cnblogs.com/summertime-wu。

    下載壓縮包后，將里面的分別將代碼刷入對應位置，即可呈現。

    注意事項：修改網頁小圖標時，先找到你的目標，然后在圖片在網頁上轉換成icon格式，並上傳到博客園文件 里，復制鏈接，替換即可。

1.頁面css代碼（二）

  點我下載，效果圖：

  

 

2.頁面css代碼（三）

  點我下載，效果圖：