Version: Next

构建皮肤

文档迁移通知

📑 感谢大家的支持，当前文档已经不再保持更新。原因是，为了不影响访问速度，我将该文档托管在码云上。每次更新文档我都需要重新构建文档项目并手动更新码云 Pages 服务。这样效率是不够的，现在已经将将所有文档相关的内容托管到在线文档-语雀了。请务必访问新的文档，感谢理解！ 点击查看

激动人心的时刻到来了！

🙌 开始着手创建一个新皮肤吧，不用担心，非常简单！

看视频

🎞 如果您感到力不从心，我还精心制作了视频教程供您 参考。

依赖

  • node
  • npm

点击下载

准备工作

  1. 将本项目 clone 到本地。
  2. 运行 npm install（依赖 node & npm）。

创建基本文件

例如您要创建一个叫做 demo 的皮肤:

  • 在 themes 文件夹下创建 demo 文件夹

  • 在 demo 文件夹中创建 index.js 和 index.css

  • 在 demo/index.js 中粘贴以下代码

import './index.css'
import AwesCnb from '@awescnb'
class Demo extends AwesCnb {
constructor() {
super()
super.init(this.init)
}
init() {
// to do something
// 如果不知道如何做，打开 themes/reacg/index.js 参考
}
}
new Demo()

本地启动

1.配置项目

config / options.js

module.exports = {
themeName: 'demo',
template: 'post',
eslint: true,
sourceMap: false,
openAnalyzer: true,
cssExtract: false,
openBrowser: true,
}

options

  • themeName 您创建的主题文件夹名称
  • template 本地开发要启动的页面
  • eslint 是否开启 eslint
  • sourceMap 是否开启 sourcemap
  • openAnalyzer 是否在 build 后开启 size 分析
  • cssExtract 是否单独抽离 css
  • openBrowser 是否自动打开浏览器

template

  • index 首页
  • post 随笔详情页
  • tag 标签页
  • ...

对应 src/templates 下的 .html 文件的文件名。

2.运行 npm start 启动本地服务器，调试皮肤。

打包

运行 npm run build 打包。

dist 文件夹放置了已经存在的皮肤和您的皮肤，对应您创建的皮肤文件夹名称的一个 js 文件（demo.js）即是您创建的皮肤打包后的的文件。如果您开启了 cssExtract, 打包您的皮肤生成的文件将被放在 dist/ext 文件夹下，此时，您的皮肤由一个 css (dist/ext/demo.css)和一个 js (dist/ext/demo.js)文件组成。

安装

如果仅仅打包成一个 js 文件：

<script>// 打包后的 js代码</script>
<script>$.awesCnb({})</script>

如果设置 cssExtract 为 true, 则打包会生成 js 和 css 文件，放在 dist/ext 文件夹下。安装时需要将 css 代码单独放 页面定制 CSS 中，js 同上。

Edit this page