部落格園美化
阿新 • • 發佈：2019-07-16
前言：接著上次的一篇部落格園美化大全文章，我再來重寫一篇現在我這個部落格的美化方案，其實我是有一些私心的，不喜歡別人扒走我的程式碼，畢竟這也是我一點點整合而來付出了很多心血，當然我希望在我分享完之後，大家依舊能有自己的風格所在。
本部落格採用的是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這個檔案中，自己除錯即可。
<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>雪花特效
這個功能在我頁面暫時關閉，我是打算到了冬天再給解開的，畢竟冬天了該下雪了嘛