使用 Vite 开发博客园皮肤

2021 年 6 月 23 日
筆記
awescnb, CNBLOG, vite, webpack5

前置

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 build

dist 文件夹放置了所有皮肤和你刚刚构建的皮肤，dist/<themename>.js 即是你创建的皮肤打包后的的文件。

在博客园安装

打开首页 > 管理 > 设置
设置默认皮肤为 “Custom”
禁用默认样式
页脚 HTML

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

保存 🎉

Tags: awescnb CNBLOG vite webpack5