我的博客园美化
Posted MeloJun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的博客园美化相关的知识，希望对你有一定的参考价值。
有小伙伴问到我的博客园皮肤具体是怎么配置的，于是有了这篇博客hhh，来这里分享一下
有小伙伴问到我的博客园皮肤具体是怎么配置的，于是有了这篇博客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>关于此博客园及其美化
我的美化是从西窗夜雨\\(dalao\\)那里拿来二次开发的.
而这位\\(dalao\\)是这份美化的源头:自为风月马前卒.
我拿来之后修改了页首的部分参数,更换了所有的图片与链接/按钮.
同时去掉了一些本人认为意义不大的美化,所以我的博客看起来要相对简约一些.
我对自己的美化给出的\\(label\\)是\\(Simple\\:and\\:light\\).喜欢的小伙伴可以通过\\(QQ\\)私信或在本帖下评论索要.
当然也可以去找两位源头——终极源头和直接源头.至于博文嘛...我只能说博主水平不高...确实⑧太行.
\\(So\\:much\\:for\\:this.\\)
以上是关于我的博客园美化的主要内容，如果未能解决你的问题，请参考以下文章