美化博客园

1.如何修改博客园里个人首页背景 https://www.cnblogs.com/cocottt/p/6617421.html

2.博客园配置 https://www.cnblogs.com/douzujun/tag/博客园配置/

3.参考这位博主的博客园文章(有视频教程) ：【汇总】 博客园皮肤构建工具 awescnb https://www.cnblogs.com/guangzan/p/13020977.html

• 打开博客园的「管理」「设置」，博客皮肤选择custom自定义，并在该选项框下面申请js权限用于美化博客，申请通过后在下方的对应标签页填上下方代码即可。更多自定义样式见下方链接
  参考这位博主的语雀文章 https://www.yuque.com/awescnb/user/kyi19z

标签页:页面定制的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)}

标签页:页首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>

标签页:页脚html代码

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>

<script>

  const opts = {

    // 基本配置

    theme: {

      name: 'geek',

      color: '#232e3c',

      title: '',

      avatar: 'https://pic.cnblogs.com/avatar/2254500/20220412051950.png',

      favicon: '',

      headerBackground: 'https://i.postimg.cc/CxqK0SX1/u-Tools-1656603542432.png',

    },

    // 代码高亮

    highLight: {

      enable: true,

    },

    // 代码行号

    lineNumbers: {

      enable: true,

    },

    // github图标

    github: {

      enable: true,

      url: 'https://www.githubs.cn/',

    },

    // 码云图标

    gitee: {

      enable: true,

      url: 'https://gitee.com/dashboard',

    },

    // 图片灯箱

    imagebox: {

      enable: true,

    },

    // 文章目录

    catalog: {

      enable: true,

    },

    // 右下角按钮组

    tools: {

      enable: true,

    },

    // live2d模型

    live2d: {

      enable: true,

      model: 'haru-01'

    },

    // 点击特效

    click: {

      enable: false,

    },

    // 评论输入框表情

    emoji: {

      enable: true,

    },

    // 暗色模式

    darkMode: {

      enable: true,

      autoDark: false,

      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: '404 not found',

          artist: 'REOL',

          url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',

          cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',

          lrc: ``,

        },

      ],

    },

    // 随笔头图

    postTopimage: {

      enable: true,

    },

    // 随笔尾图

    postBottomimage: {

      enable: false,

    },

    // 个性签名

    signature: {

      enable: false,

      contents: [],

    },

    // 侧边栏二维码

    qrcode: {

      enable: false,

      img: '',

      desc: '',

    },

    // 弹出公告

    notice: {

      enable: false,

      text: [],

    },

    // 首页列表图

    indexListImg: {

      enable: false,

    },

    // 顶部加载进度条

    topProgress: {

      enable: false,

    },

    // 随笔页尾部签名

    postSignature: {

      enable: true,

      content: [],

      licenseName: '',

      licenseLink: '',

    },

    // 背景图片或颜色

    bodyBackground: {

      enable: false,

      value: '',

      opacity: 0.9,

      repeat: false,

    },

    // 弹幕

    barrage: {

      enable: false,

    },

    // 图表

    charts: {

      enable: false,

    },

    // 锁屏

    lock: {

      enable: false,

    }

  }

  $.awesCnb(opts)

</script>