部落格園美化

蜘蛛zhttty發表於2024-09-02

前言：接著上次的一篇部落格園美化大全文章，我再來重寫一篇現在我這個部落格的美化方案，其實我是有一些私心的，不喜歡別人扒走我的程式碼，畢竟這也是我一點點整合而來付出了很多心血，當然我希望在我分享完之後，大家依舊能有自己的風格所在。

本部落格採用的是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>

訪問人數統計

部落格園美化

我一般都是給隱藏掉的，防止影響部落格美觀，申請方式

結語

到這裡我部落格的美化方案就已經都給與大家了，雖說沒有多麼好看，但也至少能讓你們的部落格與眾不同，最後還是那句話，一定要有自己的個性，能有自己的東西在裡面。

相關文章