博客园主题美化教程

主题：geek主题（博主用的就是这一款）

该博主还开发了一个皮肤构建工具 awescnb，可以在博客园安装这个项目中已经集成的皮肤
https://www.yuque.com/awescnb/user

1、进入博客园的设置里面申请开通js权限。
没有申请是这个样子的

填写一下申请的理由（网上一般都是这么写的），等待通过就好了，会有邮件进行通知提醒。

尊敬的博客园管理员：
您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。
感谢您的帮助。

2、将博客皮肤修改为Custom，将渲染引擎修改为highlight.js

3、CSS代码
勾选禁用模版默认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;}}

4、页首HTML代码

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

5、页脚HTML代码

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
 const opts = {
    theme: {
      name: 'geek',
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      log: true,
      avatar: "https://blog-static.cnblogs.com/files/blogs/775095/733a851cc36cbf615c31123bfebd85e.gif?t=1668011108", //头像
      headerBackground:
        "https://blog-static.cnblogs.com/files/blogs/775095/1.gif?t=1668326814", //背景
    },
    highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {
      enable: false,
      url: "https://github.com/tiansztiansz",
    },
    gitee: {
      enable: false,
      url: 'https://gitee.com/weiyigeek',
    },
    click: {
      enable: false,
    },
    emoji: {
      enable: true,
    },
    darkMode: {
      enable: true,
      autoDark: true,
      autoLight: false,
    },
    qrcode: {
      enable: false,
      img: 'https://weiyigeek.top/img/wechat-search.png',
      desc: 'WeiyiGeek 公众号',
    },
    donation: {
      enable: false,
      qrcodes: ['https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-alipay.png'],
    },
    signature: {
      enable: true,
      contents: [
        "<b>今日事，今日毕，勿将今事待明日</b>",
      ],
    },
    postSignature: {
      enable: true,
      enableLicense: false,
      content: ['禁止转发', ''],
    },
    links: {
      enable: false,
      value: [
        {
          name: "🍞 个人主页",
          link: "https://www.weiyigeek.top",
        },
        {
          name: "🎨 博客主页",
          link: "https://blog.weiyigeek.top",
        },
        {
          name: "👨‍💻 博主介绍",
          link: "https://blog.weiyigeek.top/about/index.html",
        },
        {
          name: "🍻 微信公众号",
          link: "https://weiyigeek.top/img/wechat-search.png",
        },
        {
          name: "🧀 Bilibili",
          link: "https://space.bilibili.com/385802642/article",
        },
        {
          name: "🍪 今日头条",
          link: "https://www.toutiao.com/c/user/token/MS4wLjABAAAAqcPSoMqfctaEqJpGSF775eeCjWkrop4AOyLITdMx-L78F5iXzfQcSRM5sY4dq3wR/?source=author_home",
        },
        {
          name: "🦁 百家号",
          link: "https://author.baidu.com/home?from=blog&app_id=1726736601523415",
        }
      ],
    },
  };
  $.awesCnb(opts);
</script>