博客园美化
接着上次的一篇[博客园美化大全]文章，我再来重写一篇现在我这个博客的美化方案，其实我是有一些私心的，不喜欢别人扒走我的代码，毕竟这也是我一点点整合而来付出了很多心血，当然我希望在我分享完之后，大家依旧能有自己的风格所在
2019-8-13 自上次发表完这篇文章之后，我又将博客园样式大改了一下，放上两张这篇美化的效果图，但不是我现在这个博客的样式
前言：接着上次的一篇博客园美化大全文章，我再来重写一篇现在我这个博客的美化方案，其实我是有一些私心的，不喜欢别人扒走我的代码，毕竟这也是我一点点整合而来付出了很多心血，当然我希望在我分享完之后，大家依旧能有自己的风格所在。
本博客采用的是Custom模板，其中采用了Esofar大神发布的博客主题，并在此基础上进行修改的。
美化样式
以GitHub上的为最新版，本博客采用主题色的是唯美的粉色，可以将css代码中的#F58EA8替换成自己的主题色。
因为样式代码实在是太长了无法折叠，所以需要源代码的直接到GitHub上下载就行了，相信里面的每个文件名聪明的你一定能看明白。
实现过程
计时器
可以放在侧边栏或者页脚页首中，实现方法如下，具体使用场景因人而异
<div id="showsectime"></div>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function showsectime() {
var birthDay =NewDate("2017-08-23");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("showsectime").innerHTML = "xxx"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(showsectime, 1000);
}showsectime();
</script>
自定义信息
<div class="c-notice">
<div>欢迎来到Zou-Wang的博客</div>
</div>
<div class="c-portrait">
<img class="site-master-avatar" itemprop="image" src="//pic.cnblogs.com/avatar/1646268/20190628143903.png" alt="Zou-Wang"style="height:120px;padding:10px;box-sizing:border-box;z-index:2; border-radius: 50%;"">
<div style="font-size: 25px">Zou-Wang</div>
<div style="font-size: 16px">晓看天色暮看云，行也思君，坐也思君</div>
</div>
页面隐藏显示改变title
页面离开：
页面回来：
3s之后会变为：
var time;
var normar_title=document.title;
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
clearTimeout(time);
document.title = '客官请留步ε=ε=ε=┏(゜ロ゜;)┛';
} else {
document.title = '你终于回来了(。・∀・)ノ';
time=setTimeout(function(){ document.title = normar_title; }, 3000);
}
});
添加导航栏
如果想在原有导航基础上加上自己的链接导航，需要用到html中的append方法。将下方我的链接和名字替换即可
$(document).ready(function(){
$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu" href="https://www.cnblogs.com/zouwangblog/p/11177049.html">友链</a></li><li><a id="blog_nav_myguanyu" class="menu" href="https://www.cnblogs.com/zouwangblog/p/11157339.html">关于</a></li>')
});
加载条
顶部加载条很简单，参考官方文档即可。
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/nprogress.js"></script>
<script>
$(document).ready(function(){
NProgress.start();
NProgress.done();
});
</script>
看板娘
很喜欢的功能，页面右下角的看板娘，看板娘的语言都在waifu-tips1.js这个文件中，自己调试即可。不想复制的点击live2d下载
<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; font-size: 14px"></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-tips1.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
图片放大
博客园本身是不支持点击图片放大的，我们只能自寻插件了，这里用的是zoom.js来实现。
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css">
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>
鼠标烟花
emmm...鼠标点击的烟花特效，图片就不用给了吧，直接复制以下代码即可
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
音乐
这里引用的是网易云歌单，组件用的是APlayer.js说实话，刚开始我直接引用网易云歌单用的是flash插件，样式真心难以吐槽，后来改用了APlayer好看多了啊。
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
想换自己的歌单需要修改data-id，获取id的方法，点击网易云中的生成外联播放器即可获取到歌单id。
控制台信息
修改输出文字在msg变量中
<script type="text/javascript">
$(document).ready(function(){
// 控制台输出信息
(function(a){
if (!a) return;
var msg = "%c欢迎访问Zou-Wang的博客,望各位大佬多加指点.\n ";
if (window.chrome) {
a.log("%c ", "padding:50px;background:url('https://img2018.cnblogs.com/blog/1646268/201907/1646268-20190715094436742-266052290.jpg')no-repeat;background-size: contain;");
a.log(msg, "color:#0080FF");
} else {
a.log(msg.replace(/%c/g,''));
}
})(top.console);
});
</script>
雪花特效
这个功能在我页面暂时关闭，我是打算到了冬天再给解开的，毕竟冬天了该下雪了嘛😁
<div class="Snow">
<canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/xue.js"></script>
访问人数统计
我一般都是给隐藏掉的，防止影响博客美观，申请方式
结语
到这里我博客的美化方案就已经都给与大家了，虽说没有多么好看，但也至少能让你们的博客与众不同，最后还是那句话，一定要有自己的个性，能有自己的东西在里面。
