博客园主题美化

准备工作

首先你得有个cnblogs博客
申请js权限

能想到美化主题应该也具备前提条件,很简单就不细说

---

部署使用

博主使用的是geek主题,所以本文也是基于geek主题做的美化修改,可参考主题作者开发了一个皮肤构建工具awescnb,可以在博客园安装这个项目中已经集成的皮肤

设置博客皮肤为“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',     //name: 设置博客主题的名称为 geek
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      color: '#a1eafb',
      log: true,        //是否在控制台显示日志信息，true 表示启用
      avatar: "https://img2024.cnblogs.com/blog/3656185/202506/3656185-20250606170825468-2064269819.jpg", //博客的头像图片 URL
      headerBackground:"https://img2024.cnblogs.com/blog/3656185/202506/3656185-20250606110427605-691287834.png",        //博客头部背景图片的 URL
    },
    //代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    //是否启用GitHub
    github: {
      enable: false,
      url: "https://blog.csdn.net/LogicYarn?spm=1000.2115.3001.5343",
    },
    // 文章目录
    catalog: {
    enable: true,
    },
    //鼠标点击特效
    click: {
      enable: false,
    },
    //表情
    emoji: {
      enable: true,
      buttonIcon: "🥳",
      emojiList: [
          {
              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: true,
      autoLight: false,
    },
    //个性签名
    signature: {
      enable: true,
      contents: [
        "<b style='font-size: 1rem; color:#FF4500'>开头很简单，最难的是坚持。</b>",
      ],
    },
    // 背景图片或颜色
    bodyBackground: {
    enable: false,
    value: 'https://img2024.cnblogs.com/blog/3656185/202506/3656185-20250606105901092-778644194.png',
    opacity: 0.7,
    repeat: false,
    },
    // 顶部加载进度条
    topProgress: {
      enable: true,
    },
    // 自定义链接链接
    links: [
    {
      name: '皮肤配置',
      link: 'https://www.yuque.com/awescnb/user/tmpomo',
    },
  ],
  };
  $.awesCnb(opts);
</script>