博客园样式_1
简单展示一下：
设置步骤：
1.选择博客园样式为: Custom
2.页面定制 CSS 代码为：
#loading {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
background-color: #f4f5f5;
pointer-events: none;
}
.loader-inner {
will-change: transform;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -20px;
background-color: #3742fa;
border-radius: 50%;
animation: scaleout 0.6s infinite ease-in-out forwards;
text-indent: -99999px;
z-index: 999991;
}
@keyframes scaleout {
0% {
transform: scale(0);
opacity: 0;
}
40% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
注意：要选择禁用模板，默认CSS样式
2.博客侧边栏公告（支持HTML代码） （支持 JS 代码）
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
$.awesCnb({
theme: {
name: 'geek',
avatar: 'https://pic2.zhimg.com/v2-d7b27676caca00d677680f614f8b5fbc_is.jpg',
headerBackground:'https://img2020.cnblogs.com/blog/2121323/202101/2121323-20210123115530598-1803224458.png',
title:'好好学习，天天向上',
favicon:'https://pic2.zhimg.com/v2-d7b27676caca00d677680f614f8b5fbc_is.jpg',
},
signature: {
enable: true,
contents: [
"愿为西南风，<b style='color:#ff6b81'>长逝入君怀</b>.",
"<b>愿得常巧笑，携手同车归</b>",
],
},
bodyBackground: {
enable: true,
value:
'https://cdn.jsdelivr.net/gh/Kanna-jiahe/blogimage/img/20210104152318.jpg',
opacity: 0.85,
repeat: false,
},
lineNumbers: {
enable: true,
},
//进入博客的提示
notice: {
enable: true,
text: ['ヾ(≧▽≦*)o 欢迎来到Acapplellaの小窝'],
},
//头部进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 右下角按钮列表
tools: {
enable: true,
initialOpen: true,
draggable: false,
},
// 返回顶部按钮
back2top: {
enable: true,
type: 'complex',
},
// 黑暗模式
darkMode: {
enable: true,
autoDark: true, // 夜间自动切换暗色模式
autoLight: false // 日间自动切换亮色模式
},
// 音乐播放器
musicPlayer: {
enable: true,
page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 启用歌词
type: 1, // 1 -> 字符串歌词 3 -> url 歌词
color: '', // 颜色
},
audio: [{
name: '恋ってもどかしい',
artist: '光宗信吉',
url: 'http://music.163.com/song/media/outer/url?id=28191027.mp3',
cover: 'https://gitee.com//riotian/blogimage/raw/master/img/20200725223851.png',
lrc: `[00:00.00] 暂无歌词`,
}, ],
},
//随笔结尾签名
postSignature: {
enable: true,
enableLicense: true,
content: ['博主撰文不易，转载还请注明出处；若对本文有疑，请私信或在下方讨论中提出。O(∩_∩)O谢谢！',
'『At last：非常一(hu)本(shuo)正(ba)经(dao)的：博主很笨，请不要欺负他』'
],
licenseName: '',
licenseLink: '',
},
})
</script>
4.页首 HTML 代码
<div id="loading"><div class="loader-inner"></div></div>
5.页脚 HTML 代码
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("Linux","AJax","龙族","天空之城","工藤新一","江户川柯南","毛利兰","漩涡鸣人","宇智波佐助","JQuery","操作系统","❤珂朵莉❤","Android","Tensorflow","国防科大");
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
},
3000,
function() {
$i.remove();
});
});
});
</script>
