我的博客园美化
有小伙伴问到我的博客园皮肤具体是怎么配置的，于是有了这篇博客hhh
配置参考
使用的是awescnb中的reacg皮肤
效果体验
设置博客皮肤为Custom
页面定制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;
}
}
页首
<div id="loading">
<div class="loader-inner">
</div>
</div>
页脚(需要自定义修改)
音乐
获取音乐链接以及歌词：https://music.liuzhijin.cn/
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
theme: {
name: 'reacg',
avatar: "https://pic.cnblogs.com/avatar/2334298/20210317231420.png",
color: "#B0C4DE",
},
//音乐
musicPlayer: {
enable: true,
autoplay: false,
lrc: {
enable: false, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
//显示出来的名字
name: '糸守に東京に',
//作者
artist: 'SimorE',
//此处要用上边的网址去获取链接
url:
'http://music.163.com/song/media/outer/url?id=454710238.mp3',
//音乐的封面图,此处用了自己的图床
cover:
'https://i.loli.net/2021/10/28/JszYXB3M6geZpEi.jpg',
//歌词(同样在上边的网址去获取)
//lrc:
// "[ti:糸守に東京に][ar:SimorE][al:Σ][by:SimorE][00:00.000] 作曲 : SimorE[00:00.008] 作词 : SimorE[00:00.25][00:01.69]fade away...do over again...[00:13.35][00:13.76]歌い始めの一文字目 いつも迷ってる[00:18.57]どうせとりとめのないことだけど[00:22.85]伝わらなきゃもっと意味がない[00:26.84][00:27.38]どうしたってこんなに複雑なのに[00:30.75]噛み砕いてやらなきゃ伝わらない[00:34.18]ほら結局歌詞なんかどうだっていい[00:37.64]僕の音楽なんかこの世になくたっていいんだよ[00:41.32][00:54.74]Everybody don't know why.[00:58.20]Everybody don't know much.[01:01.56]僕は気にしない 君は気付かない[01:04.99]何処にももういないいない[01:08.17][01:08.59]Everybody don't know why.[01:11.86]Everybody don't know much.[01:15.25]忘れていく 忘れられていく[01:18.61]We don't know,We don't know.[01:22.86][01:39.61]目の前 広がる現実世界がまた歪んだ[01:46.30]何度リセットしても[01:47.57]僕は僕以外の誰かには生まれ変われない[01:51.88]「そんなの知ってるよ」[01:53.41]気になるあの子の噂話も[01:56.52]シニカル標的は次の速報[01:59.75][02:00.22]麻痺しちゃってるこっからエスケープ[02:03.57]遠く遠くまで行けるよ[02:06.71][02:07.15]安定なんてない 不安定な世界[02:14.04]安定なんてない きっと明日には忘れるよ[02:20.52][02:22.35]fade away...do over again...[02:33.62][02:34.41]そうだ世界はどこかがいつも嘘くさい[02:37.51]綺麗事だけじゃ大事な人たちすら守れない[02:41.06]くだらない 僕らみんなどこか狂ってるみたい[02:44.48]本当のことなんか全部神様も知らない[02:48.56][03:03.39]Everybody don't know why.[03:06.80]Everybody don't know much.[03:10.17]僕は気にしない 君は気付かない[03:13.62]何処にももういないいない[03:17.02][03:17.46]Everybody don't know why.[03:20.49]Everybody don't know much.[03:23.88]忘れていく 忘れられていく[03:27.18]We don't know,We don't know.[03:29.83]",
},
],
},
//背景图片或颜色
bodyBackground: {
enable: true,
// value:
// 'white',
// value:
// 'https://i.loli.net/2021/10/27/42SXrEV8ZDBGkpv.png',
//街道
value:
'https://i.loli.net/2021/10/27/gMf5Fd9DO6tsNu4.jpg',
// value:
// 'https://gitee.com/melo-jun/resource-pool/blob/master/img/street.png',
opacity: 0.89,
repeat: false,
},
//介绍签名
signature: {
enable: true,
contents: [
"软件工程卓越班大二在读生，目前偏向于后台开发，兼顾课内知识，期待在大学期间，可以积累更多在后台开发道路上走得更远的资本！<b style='color:#ff6b81'></b>",
"<b>🍺微信号(Melo__Jun);</b>",
],
},
//头部进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: 'pink',
height: '5px',
},
//github
github: {
enable: true,
color: '#ffb3cc',
url: 'https://juejin.cn/user/2999880266036279',
},
//码云
gitee: {
enable: true,
color: '#C71D23',
url: 'https://blog.csdn.net/qq_45405782?spm=3001.5343',
},
// //自定义链接
links: [
{
name: '掘金',
link: 'https://juejin.cn/user/2999880266036279',
},
{
name: '留言',
link: 'https://www.cnblogs.com/melojun/p/15470172.html',
},
],
//底部版权
postSignature: {
enable: true,
enableLicense: true,
licenseName: '',
licenseLink: '',
content: ['欢迎添加我的微信 --> Melo__Jun '],
},
//模型
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'tororo',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
// 文章目录
catalog: {
enable: true,
},
// 默认启用皮肤 'reacg'
// 在这里添加自定义配置
// 当前为全部使用默认配置
darkMode: {
enable: true,
//autoDark: true,
darkDefault : true,
},
}
$.awesCnb(opts)
</script>
