博客园美化代码

博客图片

文档地址

语雀（推荐）：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.',
                '&amp; 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>