有小伙伴問到我的博客園皮膚具體是怎么配置的，於是有了這篇博客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>
原本reacg效果
修改后
Chrome效果
Edge效果
