博客园主题美化配置（Awescnb)

　　平时比较喜欢捣鼓主题，但是没办法见一个爱一个，或者有时候就一个主题用腻了，想尝试另一个主题，此处记录下是为了切换是更快的还原当初的配置，同时可以给广大网友提供参考～

　　当前主题为awescnb系列主题中的geek主题

 

Awescnb文档(已失效)   新地址

Awescnb作者博客

配置步骤

一、准备工作

申请js权限（参考链接：https://www.cnblogs.com/maczhen/p/14372738.html)

 

二、博客配置

1.基本配置、代码高亮

修改博客默认主题为 Custom 其他默认

 

2.博客侧边栏

开启公告

复制如下代码块：

<!-- @format -->

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const opts = {
    // 基本配置
    theme: {
      name: 'geek',
      //color: '#FFB3CC',
      color: '#00CED1',
      title: 'Clivia Du',
      avatar :'https://images.cnblogs.com/cnblogs_com/blogs/760109/galleries/2284979/t_230317060835_2020492231947451.jpg',
      headerBackground: 'https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png',
    },
    // 代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    // github图标
    github: {
      enable: false,
      url: '',
    },
    // 码云图标
    gitee: {
      enable: false,
      url: '',
    },
    // 图片灯箱
    imagebox: {
      enable: true,
    },
    // 文章目录
    catalog: {
      enable: true,
      position:'left'
    },
    // 右下角按钮组
    tools: {
      enable: true,
    },
    // 点击特效
    click: {
      enable: true,
    },
    // 评论输入框表情
      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: '',
              },
          ]
      },
    // 暗色模式
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false,
    },
    // 随笔头图
    postTopimage: {
      enable: true,
    },
    // 随笔尾图
    postBottomimage: {
      enable: false,
    },
    // 打赏二维码
    donation: {
      enable: false,
      qrcodes: [],
    },
    // 个性签名
    signature: {
      enable: true,
      contents: [ "<b style='color:#ff6b81'>我爱吃饭</b>.",
                 "<b style='color:#ff6b81'>也爱睡觉</b>."
                ],
    },
    // 侧边栏二维码
    qrcode: {
      enable: false,
      img: '',
      desc: '',
    },
    // 弹出公告
    notice: {
      enable: false,
      text: [],
    },
    // 首页列表图
    indexListImg: {
      enable: false,
    },
    // 顶部加载进度条
    topProgress: {
      enable: false,
    },
    // 随笔页尾部签名
    postSignature: {
      enable: true,
      content: [],
      licenseName: '',
      licenseLink: '',
    },
    // 背景图片或颜色
    bodyBackground: {
      enable: true,
      value: '#1E90FF',
      opacity: 0.90,
      repeat: false,
    },
    // 弹幕
    barrage: {
      enable: false,
    },
    // 锁屏
    lock: {
      enable: false,
    },
    // 自定义链接链接
    links: [
      {
        name: 'Github: MidYoungXZ',
        link: 'https://github.com/MidYoungXZ',
      }
    ],
  }
  $.awesCnb(opts)
</script>

其中内容按需修改比如：

头像链接  
　　avatar :'https://images.cnblogs.com/cnblogs_com/blogs/760109/galleries/2284979/t_230317060835_2020492231947451.jpg'  
背景图链接  
　　headerBackground: 'https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png'

个性签名

　　signature: {
      enable: true,
      contents: [ "<b style='color:#ff6b81'>我爱吃饭</b>.",
                 "<b style='color:#ff6b81'>也爱睡觉</b>."],

　　}

3.页面定制CSS代码

   禁用模板默认CSS

　复制如下CSS代码：

#loading{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap{animation:spin 2s cubic-bezier(0.175,0.885,0.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap:nth-child(1){animation-delay:-50ms}.loader-line-wrap:nth-child(2){animation-delay:-0.1s}.loader-line-wrap:nth-child(3){animation-delay:-150ms}.loader-line-wrap:nth-child(4){animation-delay:-0.2s}.loader-line-wrap:nth-child(5){animation-delay:-250ms}.loader-line-wrap:nth-child(1) .loader-line{border-color:#ea4747;height:90px;width:90px;top:7px}.loader-line-wrap:nth-child(2) .loader-line{border-color:#eaea47;height:76px;width:76px;top:14px}.loader-line-wrap:nth-child(3) .loader-line{border-color:#47ea47;height:62px;width:62px;top:21px}.loader-line-wrap:nth-child(4) .loader-line{border-color:#47eaea;height:48px;width:48px;top:28px}.loader-line-wrap:nth-child(5) .loader-line{border-color:#4747ea;height:34px;width:34px;top:35px}@keyframes spin{0%,15%{transform:rotate(0)}100%{transform:rotate(360deg)}}
 
// 文章统计优化
.message-bottom {
    margin-top: 10px;
}
 
.message-bottom span {
   margin-right: 10px;
}

4.页首HTML代码

复制如下代码：

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

5.页脚HTML代码

　　无

6.其他设置

　　无

 

三、完成

效果如下：