美化博客园主题

美化博客园主题--1

1、进入博客园管理界面

2、点击上方的设置，进入设置页面

3、修改皮肤为Custom

4、同时申请js权限

理由：想美化一下自己的博客园

等待审核通过（这里很快的咯）

审核通过（可以在消息里察看）：

5、页面定制CSS代码

将下面的代码复制粘贴入即可

@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}

6、首页HTML代码

将下面的代码复制粘贴入即可

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit w1 leo"></div>
        <div class="white-orbit w2 leo"></div>
        <div class="white-orbit w3 leo"></div>
    </div>
</div>

7、页脚HTMl代码

将下面的代码复制粘贴入即可

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const config = {
    // 默认启用皮肤 'reacg'
    // 在这里添加自定义配置
    // 当前为全部使用默认配置
    theme: {
      name: 'reacg',
      color: '#29898d',
      title: 'Leebri’s Blog！',
      favicon: 'https://s1.328888.xyz/2022/08/01/FqqGP.png',
      avatar: 'https://pic.cnblogs.com/avatar/2937389/20220723235216.png',
      headerBackground: 'https://api.mtyqx.cn/api/random.php'

    },
    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: '无语',
           },
      ]
    },
    // 代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    github: {
      enable: true,
      color: '#7775c4',
      url: 'https://github.com/legical',
    },

    signature: {
      enable: true,
      contents: [
      "色相事一刹那，<b style='color:#ff6b81'>光阴里无尽藏。</b>",
    //   "<b>console.log();</b>",
      ],
    },
    imagebox: {
      enable: true,
    },
    darkMode: {
      enable: true,
      // 夜间自动切换深色模式
      autoDark: true,
      // 日间自动切换浅色模式
      autoLight: true
    },
    // 背景图片或颜色
    bodyBackground: {
      enable: true,
      value:'#1d2630',
        //   'https://api.mtyqx.cn/tapi/random.php',
      opacity: 0.85,
      repeat: false,
    },
    notice:{
        enable:true,
        text:['双击导航条锁屏','你最最最重要','戒骄戒躁，久久为功'],
    },
    lock: {
        enable: true,
        background: '',
        strings: [
            '到点啦，不能再学了！',
            '乖宝，休息一会儿吧~',
            '离开一会，马上回来~',
            '喂！三点几啦！饮茶先啦！',
        ],
    },
    live2d: {
        enable: true,
        page: 'all',
        agent: 'pc',
        model: '小埋',
        width: 150,
        height: 200,
        position: 'left',
        gap: 'default',
    },
    musicPlayer: {
        enable: false,        
    },
    gitee: {
        enable: false,
        color: '#C71D23',
        url: '',
    },
    donation: {
        enable: false,
        qrcodes: [],
    },
    notation: {
        enable: true,
    },
    postTopimage: {
        enable: true,
        imgs: ['https://s1.328888.xyz/2022/07/25/DuW9k.png',],
        position: 'top',
    },
    indexListImg: {
        enable: true,
        imgs: [],
    },
    topProgress: {
        enable: false,
        page: 'all',
        agent: 'pc',
        background: '#29898d',
        height: '5px',
    },
  }
  $.awesCnb(config)
</script>

8、博客侧边栏公告不填

9、最后点击保存

10、最后友友们进入自己的博客园进行察看

11、不会的可以给博主留言哦！！！

可以加入学习群：862369742