前置
Vite 是一种新型前端构建工具,能够显著提升前端开发体验。Vite 十分适合 awescnb 的架构,最近,我将 awescnb 重构完成,现在可以更加愉快地构建博客园皮肤了。
环境准备
准备工作
- 将 awescnb 通过 Git clone 到本地,启动 vscode 并打开项目,vscode 会提示你安装该项目必要的扩展。如果没有弹出提示,请手动安装【工作区推荐】下的扩展。
- 安装项目依赖。按下 + 打开终端,输入以下命令即可安装依赖。
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 build
dist 文件夹放置了所有皮肤和你刚刚构建的皮肤,dist/<themename>.js 即是你创建的皮肤打包后的的文件。
在博客园安装
- 打开首页 > 管理 > 设置
- 设置默认皮肤为 “Custom”
- 禁用默认样式
- 页脚 HTML
<script>// 打包后的皮肤 js 代码</script>
<script>$.awesCnb({})</script>
- 保存 🎉