使用 Vite 开发博客园皮肤

前置

Vite 是一种新型前端构建工具,能够显著提升前端开发体验。Vite 十分适合 awescnb 的架构,最近,我将 awescnb 重构完成,现在可以更加愉快地构建博客园皮肤了。

环境准备

  1. Node.js 点击下载
  2. Git 点击下载
  3. 推荐 vscode 点击下载

准备工作

  1. awescnb 通过 Git clone 到本地,启动 vscode 并打开项目,vscode 会提示你安装该项目必要的扩展。如果没有弹出提示,请手动安装【工作区推荐】下的扩展。

image

  1. 安装项目依赖。按下 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

image

是的,你将在浏览器中看到这个导航页面,可以调式所有图中你看到的页面。

编写样式

打开 <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 即是你创建的皮肤打包后的的文件。

在博客园安装

  1. 打开首页 > 管理 > 设置
  2. 设置默认皮肤为 “Custom”
  3. 禁用默认样式
  4. 页脚 HTML
<script>// 打包后的皮肤 js 代码</script>
<script>$.awesCnb({})</script>
  1. 保存 🎉
posted @ 2021-06-23 12:02  guangzan  阅读(2791)  评论(29编辑  收藏  举报