使用 awescnb 快速构建博客园皮肤

时间 2020-03-25

标签使用 awescnb 快速构建博客皮肤繁體版

原文原文链接

Awescnb

💫 Awescnb, awesome cnblog 使博客园更美好。css

简介

项目使用 webpack4 构建,能够本地调试 css 和 js, 模块化开发更高效, 同时集成大量插件(仅导入便可).html

你能够用它作如下三件事webpack

建立: 你可使用它快速建立本身的博客园皮肤,最后打包生成的 js 文件,供你本身使用.git
分享: 你可使用它快速建立一个博客园皮肤并将它贡献给项目,园友就可以切换到你的皮肤了.github
安装: 你能够安装这个项目中的皮肤在你的博客园.这不是一个简单的博客园皮肤,而是一个合集.安装以后,你能够快速切换其余皮肤.web

切换效果展现:npm

文件较大，为了节省流量，点击跳转查看.微信

安装现成的皮肤

1.你的博客首页 -> 管理 -> 设置babel

2.设置博客默认皮肤为 Custom模块化

3.使用 loading (不使用请忽略)

复制以下 html 粘贴到 页首 HTML.

<div 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>
</div>

复制以下 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-color: #fff;
background-image:url(https://guangzan.gitee.io/imagehost/awescnb/images/bg/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 粘贴到 博客侧边栏公告 如没开通 js 权限请先开通.

<script src="https://guangzan.gitee.io/awescnb2.0/index.js"></script>
<script>$.awesCnb({
              // 默认使用已经集成的皮肤 reacg
              // 在这里写入配置
              // 什么都不写表明使用默认配置
        });
</script>

6.保存.

若是你想继续定制化一些功能, 点我跳转到宝宝都能看懂的文档.

建立一个皮肤

首先你须要将本项目 clone 到本地 git clone https://gitee.com/guangzan/awescnb2.0.git.

1. 建立基本文件

例如你要建立一个名字为 demo 的博客园皮肤.

在 themes 文件夹下建立 demo 文件夹.
在 demo 文件夹中建立 index.js.
在 demo 文件夹中建立 index.css.
在 demo/index.js 中粘贴如下代码.

import './index.css' // 引入你的样式文件
import AwesCnb from '@/themes/awescnb' // 引入公共的类

class Demo extends AwesCnb {
  constructor() {
    super()
    super.init(this.init)
  }

  init() {
    // import plugins (use commonjs)
    // to do something
  }
}

new Demo()

2. 更新配置以启动你的皮肤

打开config / options.js：

module.exports = {
  themeName: 'demo',
  template: 'post',
}

themeName 运行 npm start 启动的皮肤
template 本地开发要启动的页面 | 首页 -> 'index' | 随笔详情页 -> 'post' | 标签页 -> 'tag' | ...

3. 构建和打包

npm start 将在本地启动你的皮肤,进行调试.
npm run build 打包

项目打包会在 dist 目录下生成如下 js 文件:

demo.js 你的皮肤js.
...其余皮肤 js (无需关注)
index.js 这个文件是用来根据用户所选的皮肤加载对应的 demo.js. (无需关注)

若是你仅本身使用你构建的皮肤, 你只须要在你的博客园中引入 demo.js 便可.
若是你但愿别人也能切换到你构建的皮肤, 欢迎贡献你构建的皮肤给这个项目.

4. 安装你建立的皮肤

安装步骤同上,你只需在安装过程当中做以下变化:

<script src="https://xxx/demo.js"></script> // 或者直接将打包好的 demo.js中代码放入标签内
<script>$.awesCnb({})</script>

项目连接

Todo

项目

merge.js √
在入口引入 merge √
themejs 从 mergejs 导入用户选项 x
组织目录 √
Window.useroptions √
调整 plugins 位置 √
根据 env 加载 http 文件 x
eslint √
prettier √
stylelint x
babel √
autoprefixer √
postcss-import √
cssnano √
bug 打包多出一个 js √
可单独使用 themejs √
sourcemap √
config/options.js √
md 标签 √
测试单个文件 √
同步到 github
footer 版本同步
注释
rebuild tools/loadfile √

通用备选插件

自定义 body 背景图片\背景色透明度 √
图片灯箱 √
弹幕 √
点击特效 √
图片灯箱 √
live2d √
播放器 √
加载进度条 √
charts
typed
代码行号
代码高亮

class awescnb

NProgress √
组织经常使用 css √
live2d √
点击特效 √
背景包括颜色和图像 √
皮肤颜色 √
favicon 和网站标题 √
音乐播放器 √
隐藏 loading √
在开发环境中导入 cnblog.common.css √

reacg(示例皮肤)

自定义二维码 √
自定义头像 √
icons √
footer √
移动端菜单 √
图标 √
自定义 body 背景图片\背景色透明度 √
图片灯箱 √
代码行号 √
代码高亮 √
文章目录 √
文章底部签名 √
弹幕 √
返回顶部 √
签名 √
示例音乐丢失 ... √
backtotop 定位逻辑 √
夜间判断逻辑 √
优化切换暗色/亮色模式效果和逻辑 √
bug highlight 无效 √
显示评论区头像增长轮询次数 √
移动端默认禁用点击特效 √
signature 样式优化 √
移动端隐藏顶部订阅按钮 √
调整移动端字体大小 √
bug -> themeColor double √
弹幕阴影 √
评论图片样式

gshang(示例皮肤)

build √

Contact

QQ：923665892
QQ 群：541802647 (活跃)
微信：wx923665892