大家好，又见面了，我是你们的朋友全栈君。
Awescnb 博客园皮肤
Awescnb 是一款基于 vite 和 webpack5 ，构建、安装、切换的博客园皮肤。界面简单干净，集成到 Cnblog 步骤也十分简便，只需要几步就能在你的博客园快速安装皮肤。
一、安装步骤
1. 点击博客园首页的设置按钮进入设置页面
2. 设置博客默认皮肤为 “ Custom ”
3. 展开页首 HTML 代码，将如列代码复制到文本框中
<div id="loading"><div class="loader-inner"></div></div>
4. 展开页面定制 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;}}
5. 在展开后的页面定制 CSS 代码中，选中禁用模板默认 CSS
6. 申请开通 JS 权限，理由填 “ 美化博客 ”
7. 展开页脚 HTML 代码，将如下代码复制到文本框中
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 默认启用皮肤 'reacg'
// 在这里添加自定义配置
// 当前为全部使用默认配置
}
$.awesCnb(opts)
</script>
8. 点击保存按钮，进入博客就能看到 Awescnb 皮肤效果啦 ！
二、扩展 Awescnb 功能
喜欢 Awescnb 皮肤的小伙伴们可以进入 Awescnb 官网，点击快捷入口下面的配置选项按钮，按照上面的提示可以配置自己喜欢的样式风格哦 ！
Awescnb 官网地址为 ：https://www.yuque.com/awescnb
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/155252.html原文链接：https://javaforall.net
