bilili又一次博客美化

1：选择Custom模板,禁用模板CSS
2：开通js权限
css代码

@import url(https://blog-static.cnblogs.com/files/gshang/gshang.pure.css) screen and (min-0px);
#blogTitle h1 a {

    max- 110px!important;

}

侧边栏代码

<script>
	jQuery(function() {
		pure({
			favicon: "https://pic.cnblogs.com/avatar/1228856/20170830115452.png",
			avatar: "https://pic.cnblogs.com/avatar/1228856/20170830115452.png",
			setContact: {
				enable: true,
				data: {
					wechat: 'https://pic.cnblogs.com/avatar/1228856/20170830115452.png',
					qq: '1486450630',
					email: '1486450630@qq.com'
				}
			},
			news: {
				enable: true,
				data: [
					'现在是<span id="week"></span>,开学后的<span id="day"></span>',
					'距离武汉封城，已经过去<span id="illDay"></span>天了',
					'<a href="https://epi.starsee.cn/">全国疫情趋势AI预测</a>',
					'<a href="https://j-x.gitee.io/home/yiqing/covid-19">武汉光谷周边小区疫情地图</a>',
				]
			},
			banner: {
				enable: true,
				data: [{
						url: "https://news.ifeng.com/c/special/7tPlDSzDgVk",
						img: "https://x0.ifengimg.com/ucms/2020_07/7C3B11DC8FF81E8DE68FD4A610F6CB12A0D04ED6_w1125_h483.png",
						title: "疫情实时动态"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/biliTheme.html",
						img: "https://img2018.cnblogs.com/blog/1489774/202001/1489774-20200104194952221-337450693.png",
						title: "博客主题——Bili2.0"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/tools.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png",
						title: "实用工具分享"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/movie.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png",
						title: "动画电影分享"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/11185613.html",
						img: "https://img2018.cnblogs.com/blog/1489774/201909/1489774-20190923190114426-2061049622.png",
						title: "VIP视频解析"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/11135154.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png",
						title: "常用网站集合"
					}
				]
			},
			sidebarContent: true
		})
	})
</script>

页首代码

<style>
	@-webkit-keyframes ball-scale-multiple {
		0% {
			-webkit-transform: scale(0);
			transform: scale(0);
			opacity: 0;
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes ball-scale-multiple {
		0% {
			-webkit-transform: scale(0);
			transform: scale(0);
			opacity: 0;
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	.ball-scale-multiple {
		transform: scale(6);
		position: relative;
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}


	.ball-scale-multiple>div:nth-child(2) {
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.ball-scale-multiple>div:nth-child(3) {
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.ball-scale-multiple>div {
		background-color: var(--ThemeColor);
		 15px;
		height: 15px;
		border-radius: 100%;
		margin: 2px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		position: absolute;
		left: -90px;
		top: -70px;
		opacity: 0;
		margin: 0;
		 180px;
		height: 180px;
		-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
		animation: ball-scale-multiple 1s 0s linear infinite;
	}



	#loading {
		opacity: 1;
		 100vw;
		height: 100vh;
		position: fixed;
		z-index: 999999999999999;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--BlockColor);
	}
</style>

<div id="loading">
	<div class="ball-scale-multiple">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

页脚代码

<script type="text/javascript" src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/highlightMATLABCode.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/sidebarContent.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/ctgu/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/gshang.pure.js"></script>

以下是撒花和富强文字特效

<!-- 鼠标点击效果撒花 -->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

<script language="javascript" type="text/javascript">
    //单击显示随机文字
    var a_idx = 0; 
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
       //rgb颜色随机
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
     var color =  'rgb'+'('+r+','+g+','+b+')';
        var a = new Array("富强","❤","民主","❤", "文明","❤", "和谐","❤", "自由","❤", "平等","❤", "公正","❤", "法治","❤" ,"爱国","❤", "敬业","❤", "诚信","❤", "友善","❤");
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx+1)%a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index":5, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color":  color
        }); 
        $("body").append($i); 
            $i.animate({ 
                "top": y - 180, 
                "opacity": 0 
            }, 
            3000, 
            function() { 
                $i.remove(); 
            });
        }); 
    });
</script>