使用 Vite 開發部落格園皮膚

前置

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

環境準備

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

準備工作

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

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
           

是的，你将在浏覽器中看到這個導航頁面，可以調式所有圖中你看到的頁面。

編寫樣式

打開 <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. 儲存 🎉