在博客园中美化博客，并使用自定义的主题
无聊美化下，还挺好看
一、开通博客园 JS 权限
这部分不再赘述，可以点击下方链接，查看如何申请
二、在博客园中设置相关内容
-
打开你的博客首页 -> 管理 -> 设置
-
设置博客皮肤为 “Custom”
-
勾选禁用默认CSS样式
三、在博客园设置中粘贴相应代码
此部分代码粘贴到【页面定制CSS】
#loading{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap{animation:spin 2s cubic-bezier(0.175,0.885,0.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap:nth-child(1){animation-delay:-50ms}.loader-line-wrap:nth-child(2){animation-delay:-0.1s}.loader-line-wrap:nth-child(3){animation-delay:-150ms}.loader-line-wrap:nth-child(4){animation-delay:-0.2s}.loader-line-wrap:nth-child(5){animation-delay:-250ms}.loader-line-wrap:nth-child(1) .loader-line{border-color:#ea4747;height:90px;width:90px;top:7px}.loader-line-wrap:nth-child(2) .loader-line{border-color:#eaea47;height:76px;width:76px;top:14px}.loader-line-wrap:nth-child(3) .loader-line{border-color:#47ea47;height:62px;width:62px;top:21px}.loader-line-wrap:nth-child(4) .loader-line{border-color:#47eaea;height:48px;width:48px;top:28px}.loader-line-wrap:nth-child(5) .loader-line{border-color:#4747ea;height:34px;width:34px;top:35px}@keyframes spin{0%,15%{transform:rotate(0)}100%{transform:rotate(360deg)}}
此部分代码粘贴到【页首HTML】
<div id="loading">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
此部分代码粘贴到【页脚HTML】
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
//博客主题(可切换)
name: 'geek',
color: '#FFB3CC',
//标题
title: '',
//头像
avatar: '',
//网站图标
favicon: '',
headerBackground: 'https://s1.ax1x.com/2023/08/22/pPJr6OS.jpg'
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: true,
url: '',
},
// 码云图标
gitee: {
enable: false,
url: '',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'right',
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: false,
},
// live2d模型
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'haru-01',
width: 150,
height: 200,
position: 'left',
gap: '38px',
},
// 点击特效
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},
// 评论输入框表情
emoji: {
enable: true,
buttonIcon: "🥳",
emojiList: [
{
value: 'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png',
label: '',
},
{
value: '🤣',
label: '笑哭',
},
{
value: '😃',
label: '大笑',
},
{
value: '😅',
label: '苦笑',
},
{
value: '😆',
label: '斜眼笑',
},
{
value: '😏',
label: '得意',
},
{
value: '😊',
label: '微笑',
},
{
value: '😎',
label: '酷！',
},
{
value: '😍',
label: '花痴',
},
{
value: '🙂',
label: '呵呵',
},
{
value: '🤩',
label: '好崇拜哦',
},
{
value: '🤔',
label: '思考',
},
{
value: '🙄',
label: '白眼',
},
{
value: '😜',
label: '略略略',
},
{
value: '😲',
label: '呆住',
},
{
value: '😭',
label: '大哭',
},
{
value: '🤯',
label: '头炸了',
},
{
value: '😰',
label: '冷汗',
},
{
value: '😱',
label: '吓死了',
},
{
value: '🤪',
label: '略略略',
},
{
value: '😵',
label: '晕',
},
{
value: '😡',
label: '愤怒',
},
{
value: '🥳',
label: '祝贺',
},
{
value: '🤡',
label: '小丑竟是我',
},
{
value: '🤫',
label: '嘘~',
},
{
value: '🐒',
label: '猴',
},
{
value: '🤭',
label: '笑笑不说话',
},
{
value: '🐂',
label: '牛',
},
{
value: '🍺',
label: '啤酒',
},
{
value: '(=・ω・=)',
label: '',
},
{
value: '(｀・ω・´)',
label: '',
},
{
value: '(°∀°)ﾉ',
label: '',
},
{
value: '←_←',
label: '',
},
{
value: '→_→',
label: '',
},
{
value: 'Σ(ﾟдﾟ;)',
label: '',
},
{
value: '(｡･ω･｡)',
label: '',
},
{
value: '(-_-#)',
label: '',
},
]
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音乐播放器
musicPlayer: {
enable: true,
autoplay: false,
lrc: {
enable: true, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
name: '浴室',
artist: 'deca joins',
url:
'http://music.163.com/song/media/outer/url?id=483378334.mp3',
cover:
'http://p1.music.126.net/byjfkEIOWI_RmxSKEWTPyw==/18910500486297525.jpg?param=130y130',
lrc:
"[00:00.00] 作词 : 郑敬儒[00:01.00] 作曲 : deca joins[00:04.65]终于忘记你的时候[00:08.18]你出现在我的梦里[00:12.27][00:19.89]终于忘记你的时候[00:23.63]你出现在我的梦里[00:26.64][00:35.47]终于忘记你的时候[00:39.21]你出现在我的梦里[00:47.03]终于忘记你的时候[00:50.66]你出现在我的梦里[00:54.31][01:25.80]我们都被困在这寂寞的夜晚[01:29.44]阳光照进窗帘却太过刺眼[01:33.93]过于温暖的冬天让人失去自觉[01:41.15]波浪在海面上营火在岸边[01:44.93]我又泪流满面你不在我身边[01:48.83]芒草在山巅痛苦还留在眉间[01:54.82][02:12.14]他天真地以为这一切都无所谓[02:20.00]单纯只想把日子过得不浪费[02:27.78]我就是你的人[02:31.31]而这就是我的人生[02:35.16]深夜的时光如此珍贵[02:38.95]这安静的故事里没有音乐[02:44.24][03:13.96]终于忘记你的时候[03:17.50]你出现在我的梦里[03:21.49]终于忘记你的时候[03:25.25]你出现在我的梦里[03:29.08]终于忘记你的时候[03:32.82]你出现在我的梦里[03:36.76]终于忘记你的时候[03:40.56]你出现在我的梦里",
},
{
name: '404 not found',
artist: 'REOL',
url:
'http://music.163.com/song/media/outer/url?id=436016480.mp3',
cover:
'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
lrc:
"[ti:404 not found][ar:REOL][al:Σ][by:菜籽酱][00:00.000] 作曲 : Reol[00:00.008] 作词 : Reol[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]",
},
{
name: '未成年',
artist: '本兮',
url:
'http://music.163.com/song/media/outer/url?id=1451522647.mp3',
cover:
'http://p1.music.126.net/-emsJTdmutfySav8wA-wGQ==/109951166890840827.jpg?param=130y130',
lrc:
"[00:00.000] 作词 : 本兮[00:01.000] 作曲 : 本兮[00:23.490]风格坚持自己是特点 特点[00:27.490]崇尚自由的观念 观念[00:31.490]讨厌老师布置作业 作业[00:35.490]是坏心情的表现 表现[00:39.490]传说中的我们未成年[00:41.490]每天 幻想未来会赚大钱[00:43.490]我们爱上课 但不听讲[00:45.490]他们传纸条 打扰我睡觉[00:47.490]英语老师 她喜欢说[00:48.490]“OK,let me hear you say what[00:50.490]为什么不听讲 what do you want[00:51.490]go out,to my office”[00:52.490]第二节课才能回来 （hope I'm OK）[00:54.490]不喜欢作业 不喜欢学校[00:56.490]什么教导主任 disappear掉[00:58.490]我是好学生 她会对我笑[01:00.490]点个头 老师好 （您今天真漂亮）[01:02.490]不做课间操 因为想睡觉[01:04.490]研究游戏 电脑刚刚才关掉[01:05.490]不怕会变老 因为我还小嘛[01:07.490]黑眼圈的还有XXX还挨不到[01:09.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:13.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:17.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:20.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:23.490]对你爱不完~[01:26.490](学他们唱情歌)[01:28.490]oh 别离开~[01:30.490](拜拜拜拜拜拜)[01:32.490]啦啦啦 我的爱[01:34.490](其实是草莓派)[01:36.490]分你一半[01:38.490](想得美 快走开)[01:39.490]风格坚持自己是特点 特点[01:43.490]崇尚自由的观念 观念[01:46.490]讨厌老师布置作业 作业[01:50.490]是坏心情的表现 表现[01:54.490]风格坚持自己是特点 特点[01:57.490]崇尚自由的观念 观念[02:01.490]讨厌老师布置作业 作业[02:05.490]是坏心情的表现 表现[02:24.490]出去逛街 我习惯戴耳机[02:26.490]所有的曲风 还是喜欢rap[02:28.490]这是范er 不喜欢被模仿[02:30.490]this is my style my voice my song[02:32.490]OK 所有作业[02:34.490]always最后一天大家一起写才对[02:36.490]好累 他的字我看不懂 无所谓[02:38.490]谁都不在乎谁错谁对[02:39.490]不能去网吧 不能去酒吧[02:41.490]so 就把家 变成各种吧[02:43.490]oh nice到了周末可以开玩[02:45.490]嗯.. 出去我掏钱 回家再埋单[02:47.490]]每天倒数 还有几天放假[02:49.490]321 期末考试 放学回家[02:51.490]假期总是补课 but学习永无止境[02:53.490]约束让人叛逆 但愿天下太平[02:54.490]I'm-I'm-I'm-I'm-I'm the best in this world[02:58.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:02.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:06.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:09.490]对你爱不完~[03:11.490](学他们唱情歌)[03:13.490]oh 别离开~[03:15.490](拜拜拜拜拜拜)[03:16.490]啦啦啦 我的爱[03:19.490](其实是草莓派)[03:20.490]分你一半[03:23.490]](想得美 快走开)[03:24.490]风格坚持自己是特点 特点[03:28.490]崇尚自由的观念 观念[03:31.490]讨厌老师布置作业 作业[03:35.490]是坏心情的表现 表现[03:39.490]风格坚持自己是特点 特点[03:42.490]]崇尚自由的观念 观念[03:46.490]讨厌老师布置作业 作业[03:50.490]是坏心情的表现 表现[03:54.490]对你爱不完~[03:58.490]oh 别离开~[04:01.490]啦啦啦 我的爱[04:05.490]分你一半[04:09.490]风格坚持自己是特点 特点[04:13.490]崇尚自由的观念 观念[04:16.490]讨厌老师布置作业 作业[04:20.490]是坏心情的表现 表现[04:23.490]对你爱不完~",
},
],
},
// 随笔头图
postTopimage: {
enable: true,
},
// 随笔尾图
postBottomimage: {
enable: false,
},
// 打赏二维码
donation: {
enable: false,
qrcodes: [],
},
// 个性签名
signature: {
enable: true,
contents: [""],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: false,
text: [],
},
// 首页列表图
indexListImg: {
enable: false,
},
// 顶部加载进度条
topProgress: {
enable: false,
},
// 随笔页尾部签名
postSignature: {
enable: true,
enableLicense: true,
licenseName: '',
licenseLink: '',
content: [],
},
// 背景图片或颜色
bodyBackground: {
enable: false,
value: '',
opacity: 0.9,
repeat: false,
},
// 弹幕
barrage: {
enable: false,
},
// 图表
charts: {
enable: false,
},
// 锁屏
lock: {
enable: true,
background: 'https://s1.ax1x.com/2023/08/22/pPJr0JI.jpg',
strings: [
'<i>Powered by</i> webpack.',
],
},
// 自定义链接链接
links: [
{
name: '<p style="font-size:18px"><strong>友链</strong></p>',
link: '',
},
{
name: '',
link: '',
},
],
}
$.awesCnb(opts)
</script>
主题作者官方文档
以上内容为我的个人配置，如需进一步客制化你的方案，还请以官方文档为参考。
参考链接：
awescnb主题配置文档
浙公网安备 33010602011771号