博客园silence主题皮肤加鼠标特效设置
0X00-引言
心潮所致，搞一搞博客装饰，搞了好久也没有吃饭，点了份蛋炒饭和可口可乐，花了19.28元，痛哭流涕😭。
0X01-主题下载
部署文档：https://www.cnblogs.com/esofar/p/cnblogs-theme-silence.html
GitHub地址：https://github.com/esofar/cnblogs-theme-silence
样例效果：https://www.cnblogs.com/peace-and-romance/
0X02-基本设置
进入博客园管理-设置-博客侧边栏公告-申请JS权限，理由措辞要礼貌，等待管理员开通
措辞样例:
(1)
尊敬的博客园管理员：
请问是否可以帮我开通js权限，我想对文章的样式和布局需要js代码进行调整外观。
谢谢您的帮助。
(2)
尊敬的博客园管理员：
您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。
谢谢您的帮助。
下载主题，压缩包解压
进入博客园管理，点击设置
主题不支持子标题，博客皮肤一栏选择custom
0X03-页面定制CSS代码设置
进入解压文件夹中dist目录，打开silence.min.css文件，复制粘贴到页面定制CSS代码中，点击禁用模板默认CSS
0X04-博客侧边栏公告设置
博客侧边栏设置，代码中的要求填自己的链接，图片可以上传到个人的云端仓库(gitee,github)生成链接
上传压缩包dist目录下的silence.min.js文件到博客园文件管理
<script>
window.$silence={
avatar:'自己的头像图片云链接',
github:'GitHub地址',
defaultMode:'auto',
defaultTheme:'b',
hljsln: true,
showNavAdmin:true,
favicon: '网页标题图标链接',
catalog: {
enable: true,
index: true,
active: false,
levels: ['h1','h2', 'h3', 'h4','h5','h6']
},
navbars: [{
title: 'GitHub',
url: 'GitHub地址'
},{
title: '朋友',
chilren: [{
title: '百度',
target: '_blank',
url: 'https://www.baidu.com',
}, {
title: '谷歌',
target: '_blank',
url: 'https://www.google.com',
}]
}]
};
</script>
<script src="上传到博客园文件管理的文件链接"></script>
复制代码到博客侧边栏公告下，把代码中要求链接的地方填入即可
0X05-鼠标点击特效及页面标题进入退出title设置
直接复制代码粘贴到页首HTML代码中即可
<div class="dark-loading">
<div class="box">
<h2>Loading</h2>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("博主是帅哥","美男你说对吗");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script>
var OriginTitile = document.title; /*定义一个变量保存原标题*/
var titleTime; /*定义一个变量*/
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = '客官请留步+' + OriginTitile; /*可删除原标题*/
clearTimeout(titleTime);
}
else {
document.title = '爱你呦';/*自定义标题+原标题，可删除原标题*/
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 3500); /*设置标题时间，单位毫秒*/
}
});
</script>
0X06-线条背景动画及鼠标点击烟花设置
直接复制代码粘贴到页脚即可
<!-- 线条背景动画 -->
<script src="https://blog-static.cnblogs.com/files/liyhbk/js.js" color="0,0,255" opacity="0.2" count="99" zindex="-2" pointColor='151,255,233'>
</script>
<!-- 鼠标点击烟花效果 -->
<script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>
<canvas width="1777" height="1777" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
0X07-引用
https://www.cnblogs.com/wkfvawl/p/9414180.html
