Vite 是一种新型前端构建工具，能够显著提升前端开发体验。Vite 十分适合 awescnb 的架构，最近，我将 awescnb 重构完成，现在可以更加愉快地构建博客园皮肤了。
环境准备Node.js 点击下载
Git 点击下载
推荐 vscode 点击下载
准备工作将 awescnb 通过 Git clone 到本地，启动 vscode 并打开项目，vscode 会提示你安装该项目必要的扩展。如果没有弹出提示，请手动安装【工作区推荐】下的扩展。
安装项目依赖。按下 Ctrl + ` 打开终端，输入以下命令即可安装依赖。
npm i 创建皮肤目录复制目录 /src/themes/demo 到 /src/themes 下，并重命名为你想要的名字，例如： <themename>。此时得到：
|-- themes | |-- <themename> | | |-- index.css | | |-- index.js 启动项目在启动项目之前，打开 /awescnb.config.js，配置要启动的皮肤名称
module.exports = { - themeName: 'xxx', + themeName: '<themename>', // ... }在终端运行如下命令，即可自动打开浏览器
npm run dev是的，你将在浏览器中看到这个导航页面，可以调式所有图中你看到的页面。
编写样式打开 <themename>/index.css，编写你的皮肤 CSS 代码。你也可以使用 scss 或 less 编写样式，或者随意组织你的样式模块。
编写脚本打开 <themename>/index.js
import './index.css' import { createTheme } from 'awescnb' const theme = createTheme() console.log("Hi!") // 在这里编写任意 JavaScript 导入插件awescnb 集成了大量的博客园皮肤插件，专为博客园定制，开箱即用。下面给皮肤添加一个【点击特效】插件
import './index.css' import { createTheme } from 'awescnb' + import { clickEffect } from 'plugins' // 引入点击特效插件 const theme = createTheme() + theme.use(clickEffect) // 注册插件你还可以给插件传入配置，以博文目录插件 catalog 为例
import './index.css' import { createTheme } from 'awescnb' import { clickEffect, catalog } from 'plugins' const theme = createTheme() theme .use(clickEffect) .use( catalog, { // 插件皮肤用户默认配置 enable: true, // ... }, { // 皮肤开发时插件配置 mountNode: '.account', scrollContainer: '#mainContent', // ... } )你甚至可以定制插件样式，以贴近你的皮肤风格，通过 scss map 实现插件样式定制。我建议将插件样式单独放到一个 plugins.scss 文件中，并在主样式文件中导入。以 emoji 插件为例
// plugins.scss $emoji: ( textEmojiColor: var(--body-color), // 字体表情颜色 bg: var(--emoji-bg), // 背景色 borderColor: var(--form-border-color), // 表情面板边框颜色 hoverBg: var(--tags-bg), // ... hoverBorderColor: var(--postSignature-border-color), // ... ); @import 'plugins/emoji/index.scss'; 构建皮肤运行如下命令将会在项目根目录生成一个 dist 文件夹
npm run builddist 文件夹放置了所有皮肤和你刚刚构建的皮肤，dist/<themename>.js 即是你创建的皮肤打包后的的文件。
在博客园安装打开首页 > 管理 > 设置
设置默认皮肤为 “Custom”
禁用默认样式
页脚 HTML
<script>// 打包后的皮肤 js 代码</script> <script>$.awesCnb({})</script>保存
分类：
Cnblog技术点：
相关文章：
详解Window10下使用IDEA搭建Hadoop开发环境 2021-07-21
golang开发:Error的使用 2021-07-20
Android 开发学习进程0.32 dwonloadmanager使用 2021-07-15
使用 Cron4j 表达式 在 Solon 里开发定时任务 2021-07-13
十九、.net core使用SoapCore开发webservice接口，以及使用HttpClientFactory动态访问webservice接口 2021-07-13
自定义组件开发：使用v-model封装el-pagination组件 2021-07-07
循序渐进BootstrapVue，开发公司门户网站（5）--- 使用实际数据接口代替本地Mock数据 2021-07-01
Luat Demo | 一文读懂，如何使用Cat.1开发板实现Camera功能 2021-06-28
注解式项目开发！详细解析Java中各个注解的作用和使用方式 2021-06-28
循序渐进BootstrapVue，开发公司门户网站（4）--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示 2021-06-25
使用 vite 构建一个表情选择插件 2021-06-24
『无为则无心』Python基础 — 5、Python开发工具的安装与使用 2021-06-23
台达PLC开发笔记（一）：台达PLC连接介绍，分别使用485、网口与台达PLC建立连接 2021-06-22
循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果 2021-06-22
使用 Bridge to Kubernetes 简化云端开发 2021-06-06
使用 Bridge to Kubernetes 简化云端开发 2021-06-06
【Python】神器：Streamlit，仅使用Python开发一个运维管理后台（不需要编写html，js，css） 2021-06-03
stm32开发笔记（二）：stm32系列使用V3.5固件库的帮助文件以及GPIO基本功能（一） 2021-05-20
鸿蒙手机版JNI实战（JNI开发、SO库生成、SO库使用） 2021-04-27