博客园主题
借鉴
Awescnb：https://guangzan.gitee.io/awescnb-docs/
步骤
您的博客首页 -> 管理 -> 设置
设置博客默认皮肤为 Custom
禁用默认 css 样式
页首 HTML
<div id="loading"><div class="loader-inner"></div></div>
页面定制 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;
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;
}
}
博客侧边栏公告 (定制部分根据个人修改)
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
// 基本配置
theme: {
//name: 'geek',
name: 'reacg',
//name: 'view',
//name: 'simple',
//name: 'element',
//name: 'gshang',
color: '#FFB3CC',
title: '',
avatar: 'http://browser9.qhimg.com/bdm/480_296_0/t01b42b2461b49783e7.jpg',
favicon: '',
headerBackground: 'http://browser9.qhimg.com/bdr/__85/t013b21a10a6929ccbc.jpg',
},
// 代码高亮
highLight: {
type: '',
dark: 'atomOneDark',
light: 'atomOneLight',
},
// 代码行号
lineNumbers: {
enable: true,
},
// github图标
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/lixiaojia0916',
},
// 码云图标
gitee: {
enable: true,
color: '#C71D23',
url: 'https://gitee.com/lixiaojia0916',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'left',
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: true,
draggable: false,
},
// live2d模型
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'chitose',
180,
height: 250,
position: 'left',
gap: 'default',
},
// 点击特效
click: {
enable: true,
auto: false,
colors: [],
size: 30,
maxCount: 15,
},
// 评论输入框表情
emoji: {
enable: true,
showRecents: true,
showSearch: true,
showPreview: false,
recentsCount: 20,
theme: 'auto',
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音乐播放器
musicPlayer: {
enable: true,
autoplay: true,
lrc: {
enable: true, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
name: '大鱼',
artist: 'REOL',
url:
'http://isure.stream.qqmusic.qq.com/C400003ae8GI3mQimV.m4a?guid=823073950&vkey=018037BDD1275677935358A31FFEEA78F0EB5DF8AE782B3D85E6A9BD8CEA48D5B50C2B8A24D3E4E6AD4EC6B27FB977E6D96ED268747529D7&uin=0&fromtag=66',
cover:
'http://browser9.qhimg.com/bdm/960_593_0/t0100dc32508c7e4d7a.jpg?param=300x300',
lrc:
"[ti:大鱼][ar:周深][al:大鱼][by:][offset:0][00:00.00]大鱼 - 周深[00:14.42]词：尹约[00:28.85]曲：钱雷[00:43.27]海浪无声将夜幕深深淹没[00:48.93][00:50.09]漫过天空尽头的角落[00:55.35][00:56.79]大鱼在梦境的缝隙里游过[01:02.61][01:03.76]凝望你沉睡的轮廓[01:08.45][01:09.88]看海天一色 听风起雨落[01:16.48]执子手吹散苍茫茫烟波[01:22.34][01:23.61]大鱼的翅膀 已经太辽阔[01:31.09]我松开时间的绳索[01:35.41][01:37.30]怕你飞远去 怕你离我而去[01:43.87]更怕你永远停留在这里[01:49.43][01:50.76]每一滴泪水 都向你流淌去[01:57.57][01:58.58]倒流进天空的海底[02:03.37][02:19.11]海浪无声将夜幕深深淹没[02:24.73][02:25.86]漫过天空尽头的角落[02:31.05][02:32.76]大鱼在梦境的缝隙里游过[02:38.46][02:39.58]凝望你沉睡的轮廓[02:43.98][02:45.63]看海天一色 听风起雨落[02:51.86][02:52.41]执子手吹散苍茫茫烟波[02:58.41][02:59.30]大鱼的翅膀 已经太辽阔[03:06.57][03:07.08]我松开时间的绳索[03:11.13][03:13.09]看你飞远去 看你离我而去[03:19.22][03:19.86]原来你生来就属于天际[03:25.87][03:26.68]每一滴泪水 都向你流淌去[03:34.01][03:34.51]倒流回最初的相遇",
},
{
name: '打上花火',
artist: 'REOL',
url:
'http://isure.stream.qqmusic.qq.com/C400002HNUy126VnBY.m4a?guid=908128257&vkey=26BD0E9D8B6E3513958B81644F78ED648445FBE60E2FF0FD1F556D9D82226A4D527EC534218739239D695DCD431D474CEE109F6636C3ED45&uin=0&fromtag=66',
cover:
'http://browser9.qhimg.com/bdm/960_593_0/t0100dc32508c7e4d7a.jpg?param=300x300',
lrc:
"[ti:打上花火 (《升空的焰火，从下面看还是从侧面看？》动画电影主题曲)][ar:DAOKO (ダヲコ)][al:打上花火 (初回限定盤)][by:][offset:0][kana:1うち1あげ1はな1び1よね1づ1けん1し1し1よね1づ1けん1し1きょく1よね1づ1けん1し1ひ1み1なぎさ1いま1おも1だ1すな1うえ1きざ1こと1ば1きみ1うし1すがた1よ1かえ1なみ1あし1もと1なに1ゆう1なぎ1なか1ひ1ぐ1とお1す1ひか1さ1はな1び1み1お1なつ1あい1まい1こころ1と1つな1よる1つづ1ほ1なん1ど1きみ1おな1はな1び1み1わら1かお1なに1きず1よろこ1く1かえ1なみ1じょう1どう1しょう1そう1さい1しゅう1れっ1しゃ1おと1なん1ど1こと1ば1きみ1よ1なみ1えら1いち1ど1に1ど1かな1す1いき1の1き1ひかり1むね1す1て1の1ふ1み1らい1ひそ1み1はな1び1はな1び1よる1さ1よる1さ1よる1さ1よる1さ1しず1き1しず1き1はな1はな1すこ1すこ1すこ1ひ1み1なぎさ1いま1おも1だ1すな1うえ1きざ1こと1ば1きみ1うし1すがた1ひか1さ1はな1び1み1お1なつ1あい1まい1こころ1と1つな1よる1つづ1ほ][00:00.80]打上花火 - DAOKO (ダヲコ)/米津玄師 (よねづ けんし)[00:06.54]词：米津玄師[00:10.01]曲：米津玄師[00:19.72][00:20.30]あの日見わたした渚を[00:25.07]今も思い出すんだ[00:28.62][00:29.99]砂の上に刻んだ言葉[00:35.09]君の後ろ姿[00:38.84][00:40.14]寄り返す波が足元をよぎり[00:46.45]何かをさらう[00:48.49][00:50.04]夕凪の中[00:52.89][00:53.56]日暮れだけが通り過ぎてゆく[00:57.97][01:00.25]パッと光って咲いた[01:02.44]花火を見てた[01:04.91]きっとまだ終わらない夏が[01:08.91][01:09.90]曖昧な心を[01:11.92][01:12.61]解かして繋いだ[01:14.98]この夜が続いて欲しかった[01:19.42][01:30.78]あと何度君と同じ花火を[01:33.12]見られるかなって[01:35.20]笑う顔に何ができるだろうか[01:38.79][01:40.55]傷つくこと喜ぶこと[01:42.90]繰り返す波と情動[01:45.17]焦燥[01:46.33]最終列車の音[01:49.13][01:50.74]何度でも言葉にして[01:54.19]君を呼ぶよ[01:55.41]波を選びもう一度[01:57.82][02:00.58]もう二度と悲しまずに済むように[02:08.19][02:17.83]ハッと息を呑めば[02:19.84]消えちゃいそうな光が[02:22.40]きっとまだ胸に住んでいた[02:26.63][02:27.53]手を伸ばせば触れた[02:29.93]あったかい未来は[02:32.40]密かにふたりを見ていた[02:36.96][02:38.83]パッと花火が[02:40.11]パッと花火が[02:41.05]夜に咲いた[02:42.21]夜に咲いた[02:43.46]夜に咲いて[02:44.79]夜に咲いて[02:46.03]静かに消えた[02:47.37]静かに消えた[02:48.61]離さないで[02:49.75]離れないで[02:50.81]もう少しだけ[02:52.13]もう少しだけ[02:53.43]もう少しだけこのままで[02:57.43][03:07.82]あの日見わたした渚を[03:12.23]今も思い出すんだ[03:16.47][03:17.66]砂の上に刻んだ言葉[03:21.59][03:22.69]君の後ろ姿[03:25.50][03:27.71]パッと光って咲いた花火を見てた[03:32.38]きっとまだ終わらない夏が[03:36.24][03:37.28]曖昧な心を解かして繋いだ[03:42.33]この夜が続いて欲しかった",
},
{
name: '极乐净土',
artist: 'REOL',
url:
'http://183.232.174.13/amobile.music.tc.qq.com/C400000alo6v02CKdw.m4a?guid=417100418&vkey=387652602CD6D60CBF9FBF98F91E369ED26106979B033EB99387586F6EBD0914A0B141A6F1EF7E51F601975A0F0C0B1D6BAA692A04784CAB&uin=0&fromtag=66',
cover:
'http://browser9.qhimg.com/bdm/960_593_0/t0100dc32508c7e4d7a.jpg?param=300x300',
lrc:
"[ti:極楽浄土][ar:GARNiDELiA (ガルニデリア)][al:約束 -Promise code- (约定 -Promise code-)][by:][offset:0][kana:1ごく1らく1じょう1ど1し1きょく1つき1あ1のぼ1ころ1とも1あか1ちょう1ちん1まつり1ばや1し1あい1ず1ちょう1さそ1だ1のぞ1み1まよ1こ1ぬ1だ1たの1ごく1らく1じょう1ど1うた1うた1こころ1こえ1き1おど1おど1とき1わす1こ1よい1とも1くる1ざ1うつく1さ1はな1ち1いち1や1あつ1あい1ゆめ1まぼろし1うそ1まこと1な1せ1かい1ごく1らく1じょう1ど1うた1うた1こころ1みだ1かみ1いき1き1おど1おど1とき1わす1こ1よい1とも1くる1ざ1うそ1まこと1な1せ1かい1ごく1らく1じょう1ど1うた1うた1こころ1こえ1き1おど1おど1とき1わす1こ1よい1とも1くる1ざ1こ1よい1くる1ざ][00:00.88]極楽浄土 - GARNiDELiA (ガルニデリア)[00:09.19]词：メイリア[00:26.11]曲：toku[00:32.34]月明かり昇る刻[00:35.29][00:35.96]灯る赤提灯[00:39.02][00:39.71]祭囃子の合図[00:42.49]ふわり蝶が誘い出す[00:45.72]ちょいと覗いて見てごらん[00:50.15]迷い込めば抜け出せない[00:53.12]楽しいことがしたいなら[00:56.89][00:57.48]おいでませ極楽浄土[01:00.76]歌えや歌え心のままに[01:04.35]アナタの声をさぁ聞かせて[01:08.09]踊れや踊れ時を忘れ[01:11.64]今宵共にああ狂い咲き[01:15.29][01:31.00]美しく咲く花も[01:33.74][01:34.60]いつか散りゆくもの[01:37.58][01:38.23]それならこの一夜を[01:41.11]もっと熱く愛したい[01:44.22]ちょいと「いいこと」いたしましょう[01:48.91]これは夢か幻か[01:51.66]嘘も真も無い世界[01:55.45][01:56.11]ゆきましょう極楽浄土[01:59.48]歌えや歌え心のままに[02:03.11]乱れる髪息も気にせず[02:06.75]踊れや踊れ時を忘れ[02:10.36]今宵共にああ狂い咲き[02:44.80]ちょいと「いいこと」いたしましょう[02:52.12]嘘も真も無い世界[02:55.95][02:56.60]ゆきましょう極楽浄土[02:59.80]歌えや歌え心のままに[03:03.47]アナタの声をさぁ聞かせて[03:07.19]踊れや踊れ時を忘れ[03:10.81]今宵共にああ狂い咲き[03:14.48]今宵アナタと狂い咲き",
},
],
},
// 随笔头图
postTopimage: {
enable: true,
fixed: false,
imgs: [],
},
// 随笔尾图
postBottomimage: {
enable: false,
img: '',
height: '',
},
// 打赏二维码
donation: {
enable: false,
qrcodes: [],
},
// 个性签名
signature: {
enable: false,
contents: [],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: false,
text: [],
},
// 首页列表图
indexListImg: {
enable: false,
imgs: [],
},
// 顶部加载进度条
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 随笔页尾部签名
postSignature: {
enable: true,
content: [],
licenseName: '',
licenseLink: '',
},
// 背景图片或颜色
bodyBackground: {
enable: true,
value: '',
opacity: 0.9,
repeat: false,
},
// 弹幕
barrage: {
enable: false,
opacity: 0.6,
fontSize: '',
colors: [],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
// 图表
charts: {
enable: false,
pie: {
title: 'My skills',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},
// 锁屏
lock: {
enable: true,
background: 'https://gitee.com/lixiaojia0916/work_note/raw/master/%E5%8D%9A%E5%AE%A2%E5%A3%81%E7%BA%B8/f3dae5e4395f1c8231c95e2469d9523d.jpg',
strings: ['有些事情是不可能忘记的，只是一时想不起。——《千与千寻》'],
},
// 自定义链接链接
links: [
{
name: 'https://www.baidu.com',
link: 'https://www.baidu.com',
},
],
})
</script>