怎样让博客更好看

博客皮肤选择Custom,再页面定制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打开)
在业首HTML代码中填入<div id="loading"><div class="loader-inner"></div></div>
在页脚HTML代码中填入

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
 const opts = {
    theme: {
      name: 'geek',
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      log: true,
      avatar: "https://images.cnblogs.com/cnblogs_com/blogs/840523/galleries/2447096/o_250328224322_%E5%A4%B4%E5%83%8F.jpg", //你的头像
      headerBackground:
      "https://images.cnblogs.com/cnblogs_com/blogs/840523/galleries/2447096/t_250328232835_%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-29%20072731.png", //你的界面顶部背景图
    },
    highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {
      enable: false,
      url: "https://github.com/xxxx",//你的github账号,没有可以enable:false
    },
    gitee: {
      enable: false,
      url: 'https://gitee.com/xxxxxx',//你的gitee账号,没有可以enable:false
    },
    click: {
      enable: true,
    },
    emoji: {
      enable: true,
    },
    darkMode: {
      enable: true,
      autoDark: true,
      autoLight: false,
    },
    qrcode: {
      enable: false,
      img: 'https://weiyigeek.top/img/wechat-search.png',//你的微信公众号图片,没有可以enable:false
      desc: 'WeiyiGeek 公众号',//你的微信公众号名
    },
    donation: {
      enable: false,
      qrcodes: ['https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-alipay.png'],
    },//你的支付宝赞赏图片,没有可以enable:false
    signature: {
      enable: true,
      contents: [
         "<b>💡 有理想,但不妄想, 💭 有希望,但不奢望, 🐬 有作为,但不妄为。</b>",
      ],//你的个性签名
    },
    postSignature: {
      enable: true,
      enableLicense: true,
      content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    },
    links: {
      enable: true,  //下面部分可以定义你的其他相关界面、账号的链接
      value: [
        {
          name: "🍞 OI Wiki",
          link: "https://oi-wiki.org/",
        },
        {
          name: "🎨 博客主页",
          link: "https://www.cnblogs.com/",
        },
        // {
        //   name: "👨‍💻 博主介绍",
        //   link: "https://blog.weiyigeek.top/about/index.html",
        // },
        {
          name: "🍻 luogu主页",
          link: "https://www.luogu.com.cn/user/1022974",
        },
        {
          name: "🧀 Bilibili",
          link: "https://space.bilibili.com/1531385378?spm_id_from=333.1007.0.0",
        },
        // {
        //   name: "🍪 今日头条",
        //   link: "https://www.toutiao.com/c/user/token/MS4wLjABAAAAqcPSoMqfctaEqJpGSF775eeCjWkrop4AOyLITdMx-L78F5iXzfQcSRM5sY4dq3wR/?source=author_home",
        // },
        // {
        //   name: "🦁 百家号",
        //   link: "https://author.baidu.com/home?from=blog&app_id=1726736601523415",
        // }                            
      ],//这些都是“传送门”,可以自己更改,后面的是网页地址
    },
  };
  $.awesCnb(opts);
</script>
<script type="text/javascript">
    window.onload = function () {
        var minSize = 10; //最小字体
        var maxSize = 20; //最大字体
        var newOne = 500; //生成雪花间隔
        var flakColor = "#f5f5f5fa"; //雪花颜色
        var flak = $("<div></div>").css({ position: "absolute", "top": "0px", "z-index": "9999" }).html("✽"); //定义一个雪花,添加了 z-index
        var dhight = $(window).height(); //定义视图高度
        var dw = $(window).width() - 80; //定义视图宽度
        setInterval(function () {
            var sizeflak = minSize + Math.random() * maxSize; //产生大小不等的雪花
            var startLeft = Math.random() * dw; //雪花生成是随机的left值
            var startOpacity = 0.7 + Math.random() * 0.3; //随机透明度
            var endTop = dhight - 100; //雪花停止top的位置
            var endLeft = Math.random() * dw; //雪花停止的left位置
            var durationfull = 5000 + Math.random() * 3000; //雪花飘落速度不同
            flak.clone().appendTo($("body")).css({
                "left": startLeft,
                "opacity": startOpacity,
                "font-size": sizeflak,
                "color": flakColor
            }).animate({
                "top": endTop,
                "left": endLeft,
                "opacity": 0.1 //修正了拼写错误:"opacity"
            }, durationfull, function () {
                $(this).remove()
            });
        }, newOne);
    }
</script>

在页脚代码里,我给你写了一些注释,自己可以调整,没写注释的就不用管了(记得要有JS权限才行,没有也没事,申请一下就好了,理由就填“想装饰博客,让读者在阅读时更加愉快”即可)

posted @ 2025-04-20 20:24  Ryan_L_F  阅读(43)  评论(6)    收藏  举报
//雪花飘落效果