Lancewang9527 / awesCnb-G

🎉 快速切换多套博客园主题皮肤

---

产生

    博客园第三方主题数不胜数，或者你肯定也为你的博客园作了一些优化。接下来无论如何你都可以将你已经存在的代码稍作修改（无非就是建一个文件夹，修改一下文件名）加入这个仓库，安装过的人都可以互相共享主题样式。ok，先放个效果GIF，如果有兴趣请往下看吧。

文件较大，为了节省流量，点击跳转

当然还可以切换更多全局主题，它在不断扩充！

安装

1.你的博客首页 -> 管理 -> 设置 2.设置博客默认皮肤为 Custom 3.复制如下 css 粘贴到 页面定制 css

:root{--sk-size:60px;--sk-color:#ffb3cc}
#home{display:none}
#loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://guangzan.gitee.io/awescnb/assets/images/background/cell.gif);z-index:99999}
.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}
.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}
.sk-fold-cube:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}
.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}
.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}
.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}
.sk-fold-cube:nth-child(2):before{animation-delay:.3s}
.sk-fold-cube:nth-child(4):before{animation-delay:.6s}
.sk-fold-cube:nth-child(3):before{animation-delay:.9s}
@keyframes sk-fold{
0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}
25%,75%{transform:perspective(140px) rotateX(0);opacity:1}
100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}

4. 禁用默认 css 样式 5.复制如下 js 粘贴到 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码） 没开通 js 权限请先开通

    <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
    <script>$.awesCnb({
                theme: {
                    name: 'reacg',  // 在这里配置全局主题
                }
            });
    </script>

6.复制如下 html 粘贴到 页首 HTML

<section id="loading">
  <div class="sk-fold">
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
  </div>
</section>

7.保存

切换全局主题

安装完之后，过了很久，难免喜新厌旧。这一套主题玩够了，ok，接下来打开设置，将 theme 对象下的 name 的值修改一下( 你可以看上面 安装中的 js )，点击保存，重新进入你的博客。awescnb!你换了一整套新的皮肤！

文档

点我转到文档

联系

• qq: 923665892
• wx：wx923665892
• qq群：541802647
• qq邮箱：[e-mail]

感谢以下小伙伴对此项目的做出的贡献

• GShang