博客园美化代码
博客图片
文档地址
语雀（推荐）：https://www.yuque.com/awescnb/
https://guangzan.gitee.io/awescnb-docs/
设置博客皮肤为Custom
页首 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;
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;
}
}
页脚 HTML 代码
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const config = {
theme: {
name: 'reacg',
avatar: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141113347-1557806829.jpg',
headerBackground: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009135128063-988565527.jpg',
title: '小飞博客',
favicon: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141113347-1557806829.jpg',
log: '小飞博客',
},
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: '',
},
]
},
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/xiao-i-fei',
},
signature: {
enable: true,
contents: [
"This theme is built with <b style='color:#ff6b81'>awescnb</b>.",
"<b>console.log(🍺);</b>",
],
},
imagebox: {
enable: true,
},
darkMode: {
enable: true,
autoDark: false,
autoLight: false
},
qrcode: {
enable: true,
img: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009143420059-1841497547.png',
desc: '小飞',
},
bodyBackground: {
enable: true,
value: "https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009135128063-988565527.jpg",
opacity: 0.85,
repeat: false,
},
charts: {
enable: true,
labels: [
'Vue',
'React',
'Flutter',
'Java',
'NodeJs',
'TypeScript',
'CSS',
],
datasets: [
{
label: 'My First Chart',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)',
},
{
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)',
},
],
},
notice: {
enable: true,
text: ['🔯双击导航条锁屏', '🙃快评论吧'],
},
lock: {
enable: true,
background: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141606979-966489484.png',
strings: [
'<i>Powered by</i> webpack.',
'& Theme in awescnb',
'快去自定义您的个性签名吧~',
],
},
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'haru-01',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
musicPlayer: {
enable: true,
autoplay: false,
lrc: {
enable: true, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
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]",
},
],
},
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 50,
},
gitee: {
enable: true,
color: '#C71D23',
url: 'https://gitee.com/xiao-i-fei',
postSignature: {
enable: true,
enableLicense: true,
licenseName: '小飞',
licenseLink: 'https://www.cnblogs.com/Xiao-I-Fei/',
content: ['小飞博客园'],
},
},
catalog: {
enable: true,
position: 'left',
},
barrage: {
enable: true,
opacity: 0.6,
barrages: ['全局弹幕'],
indexBarrages: ['首页弹幕'],
postPageBarrages: ['博文页弹幕'],
},
notation: {
enable: true,
},
postTopimage: {
enable: true,
imgs: [
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009135128063-988565527.jpg",
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141606979-966489484.png",
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141623375-2128983113.jpg",
],
},
postBottomimage: {
enable: true,
img: 'https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009135128063-988565527.jpg',
height: '200px'
},
indexListImg: {
enable: true,
imgs: [
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009135128063-988565527.jpg",
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141606979-966489484.png",
"https://img2022.cnblogs.com/blog/2869834/202210/2869834-20221009141623375-2128983113.jpg",
],
},
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
}
$.awesCnb(config)
</script>
浙公网安备 33010602011771号