分享几套不一样的博客园皮肤

项目已经使用 webpack 重构，不用往下看了， 请点击跳转到新文章。

产生

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

为了节省流量请点此查看

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

介绍

    🍖awesCnb 不是一个简单的皮肤，是多套皮肤的合集，可以快速切换多套主题，安装后，只需要在博客园设置页面更改 name 的值就能直接切换整套主题。

• 风格变化莫测（因为你可以快速切换多套主题）
• 根据配置加载 （没有使用的插件不会加载）
• 安装后静静享受更新
• 兼容性强（通过 gulp 自动处理 js css）
• 访问快速 （代码部署在 码云 而不是 GitHub）
• 易于安装
• 大量的可选配置
• 都是废话我不啰嗦了

安装

这个过程看起来很长，其实只是简单的复制粘贴，我写的足够详细每个人都能够安装它，哪怕你刚刚注册博客园！

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

:root{--sk-size:60px;--sk-color:#ffb3cc}
#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}}

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

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({ 
        // 在这里配置主题，什么都不写即代表使用默认配置
        // 就这样什么都不写也能跑起来
    });
</script>

• 复制如下 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>

• 保存

切换全局主题

安装完之后，过了很久，难免喜新厌旧。这一套主题玩够了，ok，接下来打开设置，将 theme 对象下的 name 的值修改一下( 你可以看上面 安装中的 js )，点击保存，重新进入你的博客。Oh my God！你换了一整套新的皮肤！ 有一点需要你注意，请使用简单美观的 markdown 语法来书写，如果现在你还不知道什么是 markdoown， 抓紧花几分钟学习它吧

文档

如果你想继续配置，点我 转到宝宝都能看懂的配置文档。

加入

如果你掌握了一些 web 前端知识，欢迎加入一起开发，或者你也有自定义的一套主题，也欢迎加入仓库。
点击 跳转到开发文档。

联系

QQ群：541802647 （活跃）

感谢

GShang 提供了一套主题。

截止目前有很多小伙伴提供了宝贵的建议， 有时间会统计更新在文档中。