博客園美化

時間 2020-07-03

標籤博客美化简体版

原文原文鏈接

<div class="info"><p>2019-8-13 自上次發表完這篇文章以後，我又將博客園樣式大改了一下，放上兩張這篇美化的效果圖，但不是我如今這個博客的樣式</p></div>javascript

**前言：**接着上次的一篇博客園美化大全文章，我再來重寫一篇如今我這個博客的美化方案，其實我是有一些私心的，不喜歡別人扒走個人代碼，畢竟這也是我一點點整合而來付出了不少心血，固然我但願在我分享完以後，你們依舊能有本身的風格所在。css

本博客採用的是Custom模板，其中採用了Esofar大神發佈的博客主題，並在此基礎上進行修改的。html

美化樣式java

以GitHub上的爲最新版，本博客採用主題色的是惟美的粉色，能夠將css代碼中的#F58EA8替換成本身的主題色。由於樣式代碼實在是太長了沒法摺疊，因此須要源代碼的直接到GitHub上下載就好了，相信裏面的每一個文件名聰明的你必定能看明白。jquery

實現過程

計時器

能夠放在側邊欄或者頁腳頁首中，實現方法以下，具體使用場景因人而異git

<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

頁面離開：github

頁面回來：chrome

3s以後會變爲：bootstrap

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方法。將下方個人連接和名字替換便可canvas

$(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>

###訪問人數統計

我通常都是給隱藏掉的，防止影響博客美觀，申請方式

結語

到這裏我博客的美化方案就已經都給與你們了，雖然說沒有多麼好看，但也至少能讓大家的博客不同凡響，最後仍是那句話，必定要有本身的個性，能有本身的東西在裏面。

原文出處：https://www.cnblogs.com/zouwangblog/p/11194299.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。