博客园样式_1

简单展示一下：

设置步骤：

1.选择博客园样式为: Custom

2.页面定制 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;
    }
}

注意：要选择禁用模板，默认CSS样式

2.博客侧边栏公告（支持HTML代码） （支持 JS 代码）

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    theme: {
      name: 'geek',
      avatar: 'https://pic2.zhimg.com/v2-d7b27676caca00d677680f614f8b5fbc_is.jpg',
headerBackground:'https://img2020.cnblogs.com/blog/2121323/202101/2121323-20210123115530598-1803224458.png',
title:'好好学习，天天向上',
favicon:'https://pic2.zhimg.com/v2-d7b27676caca00d677680f614f8b5fbc_is.jpg',
    },
signature: {
    enable: true,
    contents: [
    "愿为西南风，<b style='color:#ff6b81'>长逝入君怀</b>.",
    "<b>愿得常巧笑，携手同车归</b>",
    ],
},
bodyBackground: {
    enable: true,
    value:
        'https://cdn.jsdelivr.net/gh/Kanna-jiahe/blogimage/img/20210104152318.jpg',
    opacity: 0.85,
    repeat: false,
},
lineNumbers: {
    enable: true,
},
//进入博客的提示
        notice: {
            enable: true,
            text: ['ヾ(≧▽≦*)o 欢迎来到Acapplellaの小窝'],
        },
//头部进度条
        topProgress: {
            enable: true,
            page: 'all',
            agent: 'pc',
            background: '#FFB3CC',
            height: '5px',
        },
 // 右下角按钮列表
        tools: {
            enable: true,
            initialOpen: true,
            draggable: false,
        },
        // 返回顶部按钮
        back2top: {
            enable: true,
            type: 'complex',
        },
        // 黑暗模式
        darkMode: {
            enable: true,
            autoDark: true, // 夜间自动切换暗色模式
            autoLight: false // 日间自动切换亮色模式
        },
        // 音乐播放器
        musicPlayer: {
            enable: true,
            page: 'all',
            agent: 'pc',
            autoplay: false,
            volume: 0.4,
            lrc: {
                enable: false, // 启用歌词
                type: 1, // 1 -> 字符串歌词 3 -> url 歌词
                color: '', // 颜色
            },
            audio: [{
                name: '恋ってもどかしい',
                artist: '光宗信吉',
                url: 'http://music.163.com/song/media/outer/url?id=28191027.mp3',
                cover: 'https://gitee.com//riotian/blogimage/raw/master/img/20200725223851.png',
                lrc: `[00:00.00] 暂无歌词`,
            }, ],
        },
//随笔结尾签名
        postSignature: {
            enable: true,
            enableLicense: true,
            content: ['博主撰文不易，转载还请注明出处；若对本文有疑，请私信或在下方讨论中提出。O(∩_∩)O谢谢！',
                '『At last：非常一(hu)本(shuo)正(ba)经(dao)的：博主很笨，请不要欺负他』'
            ],
            licenseName: '',
            licenseLink: '',
        },
  })

</script>

4.页首 HTML 代码

<div id="loading"><div class="loader-inner"></div></div>

5.页脚 HTML 代码

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("Linux","AJax","龙族","天空之城","工藤新一","江户川柯南","毛利兰","漩涡鸣人","宇智波佐助","JQuery","操作系统","❤珂朵莉❤","Android","Tensorflow","国防科大");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        3000,
        function() {
            $i.remove();
        });
    });
});
</script>

6.点击保存按钮即可