博客园主题美化
今天星期六,趁着有闲暇时间,我就搞了一下博客的美化这一块
我的博客平台是博客园,在开始之前,我搜了很多美化方面的内容,但是有的并不是很好看,终于,我发现了一款很漂亮的主题,它完全改变了我对博客园的映像...
先给大家看看我现在的界面:
也可参照我的博客:
主题代码下载地址
打开是这样的
复制粘贴代码这一块,说简单也简单,说麻烦也有点麻烦
步骤:
打开博客园后台——设置
因为这个主题是按照Custom这个主题修改的,所以博客皮肤选Custom
如果要应用新主题,侧边栏要申请js权限
找到下图位置,开始申请,只要理由合理,过不了多久就可以通过了
将对应的文件复制到博客园后台就可以了,不过需要修改一些参数,不然就是别人的页面了。
- 页面定制CSS代码——page.css
- 博客侧边栏公告——sidebar.html
- 页脚——foot.html
注意以下几个地方:
下载的文件中有个main.js的文件,在这个文件里可以修改一些自己想要的效果
修改完之后可以把main.js上传到博客园后台的文件中,之后在侧边栏公告那里添上一句代码:
<script src="你的地址"></script>
对于侧边栏:
这里修改主页的背景图片
homeTopImg是主页的图片,引号里面是图片地址,可以放多个图片地址,用引号括起来,逗号隔开;
notHomeTopImg是随笔顶部图片,引号里面是图片地址,可以放多个图片地址,用引号括起来,逗号隔开。
<!--离开页面改变title-->
var time;
var norm_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);
}
});
这里可以更改页面的标题
下面代码可以制作一个倒计时,它会显示你注册博客时到现在为止过去的时间
<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("2020-03-05");
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 = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
setTimeout(showsectime, 1000);
}
showsectime();
</script>
对于图片的路径问题:推荐聚合图床
注册账号后可以上传本地图片:
打开 可以复制不同格式的链接
superbed 可以一键复制图片链接
用这个可以很好的保证图片的安全性和不易丢失性
大家可以琢磨琢磨,界面效果还是不错的
参考: https://github.com/Zou-Wang/CNblogs-Theme-Sakura