用 webpack 搭了一個寫部落格園面板的架子
阿新 • • 發佈：2020-03-14
## 簡介
乾巴巴寫一個部落格園面板不是一件容易的事. 因為你無法像用前端框架寫程式碼那樣在本地除錯你的 js, 所以我用空閒時間寫了這個小專案.
1. 你可以使用它建立自己的部落格園面板.最後打包生成的的 js 檔案,供你自己使用.
2. 你可以安裝這個專案中的面板在你的部落格園.這不是一個簡單的部落格園面板,而是一個合集.安裝之後,你可以快速切換其他面板.
3. 你可以使用它建立一個部落格園面板.並將它貢獻給專案,園友就能夠切換到你的面板了.
## 目錄
這裡只簡單的羅列基本的專案目錄,讓你清楚它是怎麼執行的.如果你有問題或建議歡迎交流.
```
├─config webpack配置
└─src
│ main.js 專案入口
├─assets 靜態檔案
├─constants 常量
│ default.js 預設配置
│ elements.js 部落格園常用標籤class\id
│ env.js 環境變數
│
├─plugins 公共外掛
│
├─templates 部落格園的html
│
└─themes
├─awescnb 其他面板繼承的 class
│ │ index.js
│
└─reacg 新增的面板
│ index.js
```
## 建立新的面板
首先你需要將[專案](https://gitee.com/guangzan/awescnb2.0) clone 到本地 `git clone https://gitee.com/guangzan/awescnb2.0.git`.
1.在 `themes` 資料夾下建立一個新資料夾,例如 `demo`.
2.在 `demo` 資料夾中建立 `index.js`.
3.在 `demo` 資料夾中建立 `index.css`. 面板樣式
4.在 `demo/index.js` 中貼上以下程式碼.
```js
import "./index.css"; // 引入建立好的 樣式檔案
import AwesCnb from "@/themes/awescnb"; // 引入公共的類
class Demo extends AwesCnb {
constructor() {
super();
super.init(); // 初始化父類的外掛
this.init();
}
init() {
this.hideLoading();
}
// to do something
}
new Demo();
```
用它來建立一個部落格園主題,只需要繼承 class(awescnb). 就可以繼承包括但不限於下面這些外掛.或者不繼承單獨使用你需要的外掛.即使你繼承了所有外掛, 它們也能在部落格園設定頁面快速開啟和關閉.
- 頭部進度條
- 看板娘(3D 模型)
- 音樂播放器
- 主題色
- 自定義背景圖片或顏色
- 華麗的點選特效
- 自定義網站圖示和標題
- ...
5.開啟`config / webpack.base.js`並進行以下更改：
```js
entry:{
index: './src/main.js',
reacg: './src/themes/reacg/index.js',
+ demo: './src/themes/reacg/demo.js',
},
```
6.執行命令
- `npm i` 安裝專案依賴
- `npm start` 進行本地開發
`templates` 資料夾用於儲存部落格園的 HTML,使用 `HtmlWebpackPlugin` 將指定的 html 注入 index.html。
執行`npm start`將在本地啟動部落格園首頁。如果您想啟動其他頁面，請更改 `config/webpack.dev.js`.
```js
new HtmlWebpackPlugin({
filename: 'index.html',
- template: 'src/templates/index.html',
+ template: 'src/templates/post.html', // Or other pages
inject: 'body',
}),
```
- `npm run build` 打包
專案打包會生成兩個 js 檔案在 dist 資料夾下.
- theme.js 主題js.
- index.js 載入主題js和提供配置檔案.
## 在部落格園安裝這個面板
在使用 webpack 構建這個專案之前, 上個版本使用 gulp 構建. 因為這個版本的面板正在從上個版本遷移.
所以如果你想安裝面板, 請先使用上個版本的.[跳轉](https://gitee.com/guangzan/awescnb)以安裝.
上個版本的面板提供了大量的可選配置,安裝後你可以在部落格園->設定頁面自定義你的部落格.
```js
{
theme: {
name: 'reacg',
color: '#FFB3CC',
qrcode: '',
title: '',
favicon: 'https://guangzan.gitee.io/awescnb/assets/images/favicon.png',
avatar: '//pic.cnblogs.com/avatar/1501373/20200119190802.png',
headerBackground: 'https://guangzan.gitee.io/awescnb/assets/images/acg/22.jpg',
},
bodyBackground: {
enable: false,
type: 'color',
value: '#ffb3cc',
opacity: 1,
repeat: false,
},
imagebox: {
enable: false,
},
barrage: {
enable: false,
opacity: 0.5,
colors: [
'#FE0302',
'#FF7204',
'#FFAA02',
'#FFD302',
'#FFFF00',
'#A0EE00',
'#00CD00',
'#019899',
'#4266BE',
'#89D5FF',
'#CC0273',
'#CC0273',
],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
back2top: {
enable: true,
},
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'random',
width: 150,
height: 200,
position: 'right',
},
github: {
enable: true,
color: '#ffb3cc',
url: 'https://gitee.com/guangzan/awescnb',
},
click: {
enable: true,
page: 'all',
agent: 'pc',
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
},
lineNumbers: {
enable: true,
},
catalog: {
enable: true,
position: 'left',
},
musicPlayer: {
enable: false,
page: 'all',
agent: 'pc',
autoplay: false,
audio: [
{
name: '紅色高跟鞋',
artist: '李瑨瑤',
url: `https://guangzan.gitee.io/awescnb/assets/music/紅色高跟鞋.mp3`,
cover:
'//p2.music.126.net/ww7gcJ_erzPa8jgZesmTOA==/109951163271403502.jpg?param=90y90',
},
],
},
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
postSignature: {
enable: false,
content: ['轉載請附上原文連結，謝謝！'],
},
highLight: {
type: 'atomOneDark',
},
links: [
{
name: 'awesCnb',
link: 'https://gitee.com/guangzan/awescnb',
},
],
}
```
具體可以參考[文件](https://guangzan.gitee.io/awescnb-docs/guide/use/options.html)
## 貢獻
如果你像我一樣是一個前端小白, 不妨拿它來練練手, 又可以美化你的部落格, 一舉兩得.
1. fork 這個[倉庫](https://gitee.com/guangzan/awescnb2.0).
2. `git checkout -b your-new-feature` 建立您的功能分支.
3. `git commit -m 'Add some featureCommit` 提交您的程式碼.
4. `git push origin your-new-feature` 推送到分支.
5. 提交一個 `pull request`.
## To do
**調整**
- merge.js √
- 在入口引入 merge √
- themejs 從 mergejs 匯入使用者選項 x
- 調整目錄 √
- Window.useroptions √
- 調整 plugins 位置 √
- 根據 env 載入 http 檔案 x
- eslint √
- prettier √
- stylelint x
- babel √
- autoprefixer √
- postcss-import √
- cssnano √
**class awescnb**
- NProgress √
- 組織常用 css √
- live2d √
- 點選特效 √
- 背景包括顏色和影象 √
- 主題顏色 √
- favicon 和網站標題 √
- 音樂播放器 √
- 隱藏 loading √
- 在開發環境中匯入 cnblog.common.css √
- 圖片燈箱
...
## 聯絡
- QQ:923665892
- QQ 群：541802647 (活躍)
- 微信：wx923665892
請優先加群.
## 專案地址
[點我跳轉到 1.0](https://gitee.com/guangzan/awescnb)
[點我跳轉到 2.0](https://gitee.com/guangzan/awescnb2.0)