美化博客园

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>