博客园美化

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>

访问人数统计

我一般都是给隐藏掉的,防止影响博客美观,申请方式

结语

到这里我博客的美化方案就已经都给与大家了,虽说没有多么好看,但也至少能让你们的博客与众不同,最后还是那句话,一定要有自己的个性,能有自己的东西在里面。

posted @ 2019-07-16 13:27 すのはら荘の雪 阅读(...) 评论(...) 编辑 收藏