大家好,又见面了,我是你们的朋友全栈君。
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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155252.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...