使用Awescnb构建酷炫的博客园皮肤
一. 概述
基于 vite 和 webpack 5，构建、安装、切换博客园皮肤
源码地址：https://gitee.com/guangzan/awescnb
经常浏览博客园，看到别人的博客非常酷炫，所以也想定义一个酷炫的页面，但是发现自己的前端 css 水平太差，只会修改博客园的字体大小和颜色，百度了一下相关的文档，找到了 awescnb 这个开源仓库，能够满足我的需求，接下来我将记录一下自己使用 awescnb 构建博客园皮肤的过程，更多详细的配置可以查看文章后面的参考文档。
下面是我使用 awescnb 构建的博客园：
二. 使用Awescnb安装博客园皮肤
- 打开你的博客首页 -> 管理 -> 设置
- 设置博客皮肤为
Custom，渲染引擎选择highlight.js，取消勾选显示行号，主题样式选择默认的cnblogs
- 复制如下代码粘贴到【页面定制 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;}}
- 复制如下代码粘贴到【页首 HTML】
- 复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）。
- 点击保存，进入你的博客查看效果。
参考文档
https://www.yuque.com/awescnb/user/tmpomo