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

2019/04/10 10:10
阅读数 17

项目已经使用 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}}
  • <input type="checkbox" checked="checked" /> 禁用默认 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: 923665892 QQ群:541802647 (活跃) 微信: wx923665892

请优先加群!

感谢

GShang 提供了一套主题。

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

原文出处:https://www.cnblogs.com/guangzan/p/12256583.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部