美化部落格園大全
阿新 • • 發佈：2019-06-10
前言：用了兩天的時間把我的部落格園好好規劃了一下，也來寫篇隨筆教一下大家怎麼定義一個屬於自己的部落格園，我將會把我部落格園的所有內容展現給大家（很大方的吧）
首先要明白，部落格園如何自定義樣式，在部落格園的設定裡，面板我選擇的是SimpleMemory，我的樣式是基於這個面板來的，當然你選擇別的面板也可以用，但樣式多少會有差別。之後要做的就是申請js許可權，沒有許可權你是新增不了js樣式的，
我的已經申請過了顯示的是支援狀態，申請很快的，一定要申請。好了，接下來就開始我們的自定義之旅，當然美化部落格園要適度不然將深陷其中☺
1.部落格園背景設定
2.看板娘
3.時鐘
4.網易雲音樂
5.打賞
6.自定義評論樣式
7.GitHub連結
8.單擊放大圖片
9.點選滑鼠愛心
10.滑鼠粒子特效
1.部落格園背景設定
已經特地寫過一篇文章，直接目錄跳轉過去即可看到
2.看板娘
這是我最喜歡的一個功能，有什麼能比每次開啟部落格看見一個美美的看板娘更讓人心情愉悅的呢，相信你們也看見了我首頁的看板娘，接下來我來介紹如何新增
還是那句話首先要申請js許可權，之後在側邊欄公告裡新增如下程式碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/waifu1.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/flat-ui.min1.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="300" height="300" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/zouwangblog/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/zouwangblog/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>
3.時鐘
這是一個小功能，也是在側邊欄公告裡
<div id="clockdiv">
<canvas id="dom" width="200" height="200">您的瀏覽器不相容canvas</canvas>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/zouwangblog/Clock.js"></script>
4.網易雲播放器
這個需要開啟網易雲
之後將以下程式碼複製到側邊欄公告裡
提示：部落格園，不支援iframe,支援embed
<embed src="//music.163.com/style/swf/widget.swf?sid=409650851&type=2&auto=1&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
5.打賞
在頁首新增以下程式碼
<script>
window.tctipConfig = {
imagePrefix: "http://files.cnblogs.com/files/kdy11/",
cssPrefix: "http://files.cnblogs.com/files/kdy11",
buttonImageId: 4,
buttonTip: "dashang",
list:{
alipay: {qrimg: "https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_zhifubao.bmp"},
weixin:{qrimg: "https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_weixin.bmp"},
}
};
</script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/dashang.js"></script>
將裡面的兩張圖片換成你自己的就行了，怎麼儲存微信支付寶收款碼不用我說了吧
6.自定義評論樣式
擁有聊天一樣的評論功能心不心動，在頁尾裡新增以下
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/comment.css">
<script type="text/javascript">
$(function(){
$('#blogTitle h1').addClass('bounceInLeft animated');
$('#blogTitle h2').addClass('bounceInRight animated');
// 刪除反對按鈕
$('.buryit').remove();
initCommentData();
});
function initCommentData() {
$('.feedbackItem').each(function() {
var text = $(this).find('.feedbackListSubtitle .layer').text();
// 將樓層資訊放到data裡面
// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
$(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
});
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 監聽獲取評論ajax事件
if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
initCommentData();
}
});
</script>
7.GitHub連結
頁首：
<a href="https://github.com/Zou-Wang" 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>
8.單擊放大圖片
部落格園是不支援單擊放大圖片的，當圖片太小的時候很不方便，下面上程式碼
<link href="https://blog-static.cnblogs.com/files/zouwangblog/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心程式碼 -->
<script src="https://blog-static.cnblogs.com/files/yadongliang/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
<script type='text/javascript'>$(".code_img_closed").unwrap();</script>
<script type='text/javascript'>$(".code_img_opened").unwrap();</script>
9.點選滑鼠愛心
頁首：
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
想單擊的時候出來什麼在數組裡自定義就行
10.滑鼠粒子特效
就是我頁面漂浮的粒子功能:
<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>
後話：美化部落格園就到達尾聲了，一些小功能就不在這裡展示了，當然我後續還會有補充，謝謝大家支援
&n