使用 Vite 開發博客園皮膚

前置

Vite 是一種新型前端構建工具，能夠顯著提升前端開發體驗。Vite 十分適合 awescnb 的架構，最近，我將 awescnb 重構完成，現在可以更加愉快地構建博客園皮膚了。

環境準備

1. Node.js 點擊下載
2. Git 點擊下載
3. 推薦 vscode 點擊下載

準備工作

1. 將 awescnb 通過 Git clone 到本地，啓動 vscode 並打開項目，vscode 會提示你安裝該項目必要的擴展。如果沒有彈出提示，請手動安裝【工作區推薦】下的擴展。

2. 安裝項目依賴。按下 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 即是你創建的皮膚打包後的的文件。

在博客園安裝

1. 打開首頁 > 管理 > 設置
2. 設置默認皮膚爲 “Custom”
3. 禁用默認樣式
4. 頁腳 HTML

<script>// 打包後的皮膚 js 代碼</script>
<script>$.awesCnb({})</script>

5. 保存 🎉