使用 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. 儲存 ?