使用Awescnb构建酷炫的博客园皮肤

一. 概述

基于 vite 和 webpack 5，构建、安装、切换博客园皮肤

源码地址：https://gitee.com/guangzan/awescnb

经常浏览博客园，看到别人的博客非常酷炫，所以也想定义一个酷炫的页面，但是发现自己的前端 css 水平太差，只会修改博客园的字体大小和颜色，百度了一下相关的文档，找到了 awescnb 这个开源仓库，能够满足我的需求，接下来我将记录一下自己使用 awescnb 构建博客园皮肤的过程，更多详细的配置可以查看文章后面的参考文档。

下面是我使用 awescnb 构建的博客园：

image-20211203184959078

二. 使用Awescnb安装博客园皮肤

1. 打开你的博客首页 -> 管理 -> 设置

image-20211203191317055

2. 设置博客皮肤为 Custom ，渲染引擎选择 highlight.js，取消勾选显示行号，主题样式选择默认的 cnblogs

image-20211203192246122

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;}}

image-20211203192651059

4. 复制如下代码粘贴到【页首 HTML】

image-20211203192738007

5. 复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）。

image-20211203194745816

6. 点击保存，进入你的博客查看效果。

参考文档

https://www.yuque.com/awescnb/user/tmpomo