博客园主题美化配置（Awescnb)
Posted MuXinu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园主题美化配置（Awescnb)相关的知识，希望对你有一定的参考价值。
平时比较喜欢捣鼓主题，但是没办法见一个爱一个，或者有时候就一个主题用腻了，想尝试另一个主题，此处记录下是为了切换是更快的还原当初的配置，同时可以给广大网友提供参考～
当前主题为awescnb系列主题中的geek主题
配置步骤
一、准备工作
申请js权限（参考链接：https://www.cnblogs.com/maczhen/p/14372738.html)
二、博客配置
1.基本配置、代码高亮
修改博客默认主题为 Custom 其他默认
2.博客侧边栏
开启公告
复制如下代码块：
<!-- @format --> <script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script> <script> const opts = // 基本配置 theme: name: \'geek\', //color: \'#FFB3CC\', color: \'#00CED1\', title: \'Clivia Du\', avatar :\'https://images.cnblogs.com/cnblogs_com/blogs/760109/galleries/2284979/t_230317060835_2020492231947451.jpg\', headerBackground: \'https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png\', , // 代码高亮 highLight: enable: true, , // 代码行号 lineNumbers: enable: true, , // github图标 github: enable: false, url: \'\', , // 码云图标 gitee: enable: false, url: \'\', , // 图片灯箱 imagebox: enable: true, , // 文章目录 catalog: enable: true, position:\'left\' , // 右下角按钮组 tools: enable: true, , // 点击特效 click: enable: true, , // 评论输入框表情 emoji: enable: true, buttonIcon: "我的博客园美化
有小伙伴问到我的博客园皮肤具体是怎么配置的，于是有了这篇博客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>以上是关于博客园主题美化配置（Awescnb)的主要内容，如果未能解决你的问题，请参考以下文章
有小伙伴问到我的博客园皮肤具体是怎么配置的，于是有了这篇博客hhh，来这里分享一下