博客园美化

前言

本人不会前端，但是又感觉一般的网站真的好丑啊，不符合宅的审美，直到有一天，我套他猴子的，看到了一个这个二次元主题的网页，只能默默的说一句‘牛逼’，就开始了漫漫的，折腾之路。此主题美化是在大佬不忘编码的基础之上改的，并且修复了一些bug，在此鸣谢大佬。大佬链接：https://www.cnblogs.com/zouwangblog/ 不忘编码

准备

要想完成美化首先要开通js权限申请理由一般给点好话，24h之内必定申请的到

准备各种css，js文件，文件在以下目录给出

文件	类型
sidebar	*
main	js
page	css
foot	*

主题部署

基本部署

page部署

前提，已经获取js权限

根据图片选择样式，

引入page样式，

将page代码复制到页面定制 CSS 代码

page代码链接：https://gitee.com/sushiyv/theme-of-blog-garden/blob/master/blog-theme/page.html

侧边栏引入sidebar 链接：https://gitee.com/sushiyv/theme-of-blog-garden/blob/master/blog-theme/sidebar.js

脚本配置：

<link rel="stylesheet" href="//at.alicdn.com/t/font_1346053_111ghkv8md9.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://blog-static.cnblogs.com/files/sushiyv/main.js"></script>
<script type="text/javascript">
    $.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: '',
            notice: '欢迎大家来踩'
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/sushiyv/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: false,
            paypal: null,
            wechat: '',
            alipay: ''
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://github.com/sushiyv'
        },
	topImg: {
		homeTopImg: [
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221441867-1280066445.jpg",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221453772-1904899366.jpg",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221504421-920778895.jpg",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221513279-1857548569.jpg",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221523671-718358199.jpg",

					],
              notHomeTopImg: [
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131221350764-1867777767.png",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131223224651-1930887203.jpg",
"https://img2020.cnblogs.com/blog/2269163/202101/2269163-20210131223241920-1323780946.jpg",

					]
		},
                      topInfo: {
				title: 'Hi, 青鷣丶',
                                        text: 'You got to put the past behind you before you can move on.',
					github: "https://github.com",
					weibo: "https://weibo.com/",
					telegram: "",
					music: "https://music.163.com/",
					twitter: "",
					zhihu:"https://www.zhihu.com",
					mail: "http://mail.qq.com",
				}
    });
</script>

<!--定时器-->
<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 = "建站的"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(showsectime, 1000);
}showsectime();
</script>
<!--纪念日end-->
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/sushiyv/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/sushiyv/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

代码配置

模块	属性	说明	类型	默认值
profile（基础信息）	enable	是否启用	Boolean	true
	avatar	作者头像	String
	favicon	网站标题图标	String
	notice	公告	String	海上月是天上月，眼前人是心上人。
catalog（博文目录）	enable	是否启用	Boolean	false
	move	是否允许拖拽	Boolean	true
	index	是否显示索引	Boolean	true
	level1	一级标题	String	h2
	level2	二级标题	String	h3
	level3	三级标题	String	h4
signature（博文签名	enable	是否启用	Boolean	true
	home	作者主页	String	https://www.cnblogs.com
	license	许可证名称	String	CC BY 4.0
	link	许可证链接	String	https://creativecommons.org/licenses/by/4.0
sponsor（博文赞赏）	enable	是否启用	Boolean	false
	paypal	PayPal 收款地址	String	null
	alipay	支付宝收款二维码	String	null
	wechat	微信收款二维码	String	null
github（GitHub Corners）	enable	是否启用	Boolean	false
	fill	背景填充色	String	[Silence Theme Color]
	color	章鱼猫颜色	String	#fff
	link	Github 链接	String	null
topImg（头图）	homeTopImg	首页头图	Array	[https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg]
	notHomeTopImg	文章和随笔页头图	Array	[https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg]
topInfo(首页头图信息)	titile	头部标题	String	Hi, Toretto!
	text	座右铭	String	You got to put the past behind you before you can move on.
	github	GitHub链接	String	“ ”
	weibo	微博链接	String	“ ”
	telegram	telegram链接	String	“ ”
	music	网易云音乐链接	String	“ ”
	twitter	twitter链接	String	“ ”
	zhihu	知乎链接	String	“ ”
	mail	邮箱链接	String	“ ”

foot部署

将foot代码复制到页脚 HTML 代码内

<!--live2d-->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
<!--live2dend-->

<!--放大图片-->
<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>
<!--放大图片end-->

<!--鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"> 
</canvas>
<script type="text/javascript" src="https://files.cnblogs.com/files/sushiyv/anime.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/sushiyv/fireworks.js"></script>
<!--end-->


<!-- Music-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/sushiyv/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/sushiyv/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/sushiyv/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="5278558272" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
<!-- Music end -->



<!--雪花特效1&12月自动添加-->

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/sushiyv/xue.js"></script>


<!--顶部加载条-->
<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>
NProgress.start();
NProgress.done();
</script>

原版本看板娘已经失效，所以已经删除了。

基本部署已经完成啦

配置完成后，记得点击「保存」按钮，保存上述操作。

个性化定制

如需个性化定制就需要上传到后台各种文件啦

各种文件链接：https://gitee.com/sushiyv/theme-of-blog-garden/tree/master/blog-theme/各种js组件

文件	作用
APlayer.min.css	页面播放器样式
APlayer. min.js	页面播放器js
L2Widget.0.min.js	看板娘
L2Widget. min.js	看板娘
Meting. min.js	我敲，我忘了是啥了
anime. min.js	我敲，这个也忘了
fireworks. js	我敲，这也太尴尬了
main.js	控制页面总行为
xue.js	下雪js

客官莫慌，慌也没用,一个组件一个组件配置

先下载好上述文件，暂时不要上传后台

先下载好上述文件，暂时不要上传后台

先下载好上述文件，暂时不要上传后台

重要的事说3.1415926/3.1415926*3遍，上传了就无法更改了，我靠，这个真的几把坑啊。

页面播放器配置

直接上传APlayer.min.css,APlayer. min.js，或者不用上传这两个文件，分这两种这两种情况进行。

这两个文件是作用在页脚 HTML 代码中的这段代码

<!-- Music-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/sushiyv/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/sushiyv/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/sushiyv/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="5278558272" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
<!-- Music end -->

情况一、不上传这两个文件的情况

这两个文件我看不懂，不会改，因此，引用我文件里的样式即可，唯一需要改动的就是data-id="5278558272"里面的id数值，这个id是网易云中的外链id
情况二、上传文件的情况

搞毛啊，直接情况一就好了

看板娘配置

这个需要L2Widget. min.js，L2Widget.0.min.js这两个文件

这个个性化配置在开始的基本配置的时候已经加进去了，but，这个low的一批，要想更换请删除

页面定制 CSS 代码

#live2dcanvas {
    border: 0 !important;
}

博客侧边栏公告（支持HTML代码）（支持 JS 代码）

<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/sushiyv/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/sushiyv/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

鼠标配置

我想起来！！！！

anime. min.js fireworks. js这两个文件是控制鼠标的，是控制鼠标特效的，哇咔咔咔咔咔

不用管，已经在基本部署里配置完了
具体控制代码为页脚代码

<!--鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"> 
</canvas>
<script type="text/javascript" src="https://files.cnblogs.com/files/sushiyv/anime.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/sushiyv/fireworks.js"></script>
<!--end-->

来谈下一话题

总体布局部署

这个很麻烦，东西很多。

文件为main.js，是最主要的配置文件，控制链接啥的，其中主要修复的bug也在里面

针对这个文件，可以按块来分析

class Silence这个文件块是基本部署siderbar的主体文件，sidebar将这个函数重写了因此，这一代码块相当于默认参数。专注于改sidebar就行了,但是，这个还有一个bug

title: 'Hi,Friend',
text: 'You got to put the past behind you before you can move on.',
github: "",
weibo: "",
telegram: "",
music: "",
twitter: "",
zhihu: "",
mail: "",

就是这个title，只控制下层文字，不控制上层文字。要想解决这个问题，需要修改main.js下

		mainHeader() {
			const config = this.defaluts.topInfo;
			var header =
					`<div class="headertop filter-dot">` +
					`</div>` +
					`<div class="main-header">` +
					`</div>` +
					`<div class="focusinfo no-select">` +
					`       <h1 class="center-text glitch is-glitching Ubuntu-font" data-text="Hi, Friend">${config.title}</h1>` +
					`       <div class="header-info"><p><i class="fa fa-quote-left"></i> ${config.text} <i class="fa fa-quote-right"></i></p>` +
					`      </div>` +
					`</div>` +
					`<div class="wave">` +
					`   <div id="banner_wave_1"></div>` +
					`   <div id="banner_wave_2"></div>` +
					`</div>` +
					`<div class="scroll-down" data-offset="-45">` +
					`        <span class="hidden">Scroll Down</span>` +
					`        <i class="fa fa-chevron-down" aria-hidden="true"></i>` +
					`</div>`;
			$('#home').prepend(header);
		}

mainHeader==>>data-text

这样就Hi，Friend才能完美换成别的文字

此外，还需更换

网址，图片等如：

$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu" href="https://www.cnblogs.com/sushiyv/">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/sushiyv/">赞赏</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');

雪花布局

这个比较简单啦，都已经备注上了

(function() {
	var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
			function(callback) {
				window.setTimeout(callback, 1000 / 60);
			};
	window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
	var flakes = [],
			canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
			ctx = canvas.getContext("2d"),
			flakeCount = 200,  //雪花数量，数值越大雪花数量越多
			mX = -100,
			mY = -100;

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	function snow() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		for (var i = 0; i < flakeCount; i++) {
			var flake = flakes[i],
					x = mX,
					y = mY,
					minDist = 150,  //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
					x2 = flake.x,
					y2 = flake.y;

			var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
					dx = x2 - x,
					dy = y2 - y;

			if (dist < minDist) {
				var force = minDist / (dist * dist),
						xcomp = (x - x2) / dist,
						ycomp = (y - y2) / dist,
						deltaV = force / 2;

				flake.velX -= deltaV * xcomp;
				flake.velY -= deltaV * ycomp;

			} else {
				flake.velX *= .98;
				if (flake.velY <= flake.speed) {
					flake.velY = flake.speed
				}
				flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
			}

			ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";  //雪花颜色
			flake.y += flake.velY;
			flake.x += flake.velX;

			if (flake.y >= canvas.height || flake.y <= 0) {
				reset(flake);
			}

			if (flake.x >= canvas.width || flake.x <= 0) {
				reset(flake);
			}

			ctx.beginPath();
			ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
			ctx.fill();
		}
		requestAnimationFrame(snow);
	};

	function reset(flake) {
		flake.x = Math.floor(Math.random() * canvas.width);
		flake.y = 0;
		flake.size = (Math.random() * 3) + 2;  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
		flake.speed = (Math.random() * 1) + 0.5;  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
		flake.velY = flake.speed;
		flake.velX = 0;
		flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1
	}

	function init() {
		let date = new Date();
		let month = date.getMonth()+1;
		if(month === 12||month === 1||month === 2) {
			document.getElementById("Snow").style.cssText="width: 100%; height: 100%"
		} else {
			document.getElementById("Snow").style.cssText="width: 0; height: 0"
		}
		for (var i = 0; i < flakeCount; i++) {
			var x = Math.floor(Math.random() * canvas.width),
					y = Math.floor(Math.random() * canvas.height),
					size = (Math.random() * 3) + 2,  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
					speed = (Math.random() * 1) + 0.5,  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
					opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1

			flakes.push({
				speed: speed,
				velY: speed,
				velX: 0,
				x: x,
				y: y,
				size: size,
				stepSize: (Math.random()) / 30 * 1,  //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
				step: 0,
				angle: 180,
				opacity: opacity
			});
		}

		snow();
	};

	document.addEventListener("mousemove", function(e) {
		mX = e.clientX,
				mY = e.clientY
	});
	window.addEventListener("resize", function() {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	});
	init();
})();

不过需要注意的是，这个雪花效果只有在12月份，1月份才有，控制部分为以下代码中的if(month === 12||month === 1)

	function init() {
		let date = new Date();
		let month = date.getMonth()+1;
		if(month === 12||month === 1) {
			document.getElementById("Snow").style.cssText="width: 100%; height: 100%"
		} else {
			document.getElementById("Snow").style.cssText="width: 0; height: 0"
		}

要想一直有雪花的话，最简单的方法就是直接给个不成立就好了。

其中有一些没有说到的地方直接看https://www.cnblogs.com/zouwangblog/p/11541835.html原版大佬的博客鸭。

总结

我第一次真正写博客，此篇博客主要目的是跟大佬学习，学习一下知识，要是有一些不当的地方，还请多多原谅

posted @ 2021-02-02 00:10 青鷣丶阅读(221) 评论(0) 收藏举报

刷新页面返回顶部

青鷣丶

博客园美化

博客园美化

前言

准备

主题部署

基本部署

page部署

sidebar部署

foot部署

基本部署已经完成啦

个性化定制

页面播放器配置

看板娘配置

鼠标配置

总体布局部署

雪花布局

总结

公告