🎉 新版本來了，基於 vite + webpack5，更好的開發者體驗。
🎨 Awescnb, awesome cnblog.
簡介
可能許多初來乍到的新手會被博客園經典的風格勸退，或者您是一個老園友，需要為您的博客定制一些功能而不想浪費太多時間。發布這個項目的目的就是希望園友能夠通過前端工程化的方式輕易地構建一個博客園皮膚。簡單來說，awescnb 不僅僅是一套博客園皮膚，它內部集成了幾十個開箱即用的插件，以及大量的工具函數，它高度可定制，創建一個博客園皮膚從未如此簡單。如果您不喜歡動手，那么沒關系，可以將使用 awescnb 構建的皮膚輕松安裝到您的博客。簡而言之，awescnb 可以做以下幾件事:
- 安裝：在您的博客園安裝這個項目中已經集成的皮膚；
- 切換：安裝之后，體驗多套皮膚無縫切換（皮膚之間共享配置）；
- 創建：使用 awescnb 從零開始構建一個博客園皮膚；
- 分享：如果您已經擁有自己創建的皮膚，無論是否是使用 awescnb 構建的，都可以貢獻給 awescnb。
文檔
起初我使用 vuepress 搭建了在線文檔，但它在本地開發時問題諸多，接着將文檔遷移到了 docusaurus。無法解決的是，每次更新文檔意味着需要構建文檔項目並推送到遠程倉庫，這花費我一部分不必要的一些時間。現在，我已將文檔全部遷移至在線文檔-語雀。如果您希望使用 awescnb 構建一個博客園皮膚或者將皮膚安裝到您的博客，請 點擊這里 以查看文檔 📑。舊版文檔中，在醒目的位置也添加了語雀鏈接，感謝理解。
視頻教程
今天周末錄制了一個簡單視頻教程。雖然我在文檔里有寫，但希望通過這個簡短的視頻能幫您更容易上手。視頻從博客皮膚的安裝、切換、從零開始制作三個方面簡單展開。
視頻中用到的命令您可能會有疑惑，只需要下載 node並安裝到您的電腦就擁有了一個叫做 npm 的東西（node 包管理器）,而視頻中使用的 npm xx 命令正是來源於此。
相關鏈接
配置一覽
{
// 基本配置
theme: {
name: 'reacg',
color: '#FFB3CC',
title: '',
contentSize: 'mid',
headerBackground: '',
avatar: 'https://pic.cnblogs.com/face/sample_face.gif',
favicon: '',
},
// 代碼高亮
highLight: {
type: 'atomOneDark',
inDarkMode: 'atomOneDark',
},
// 代碼行號
lineNumbers: {
enable: true,
},
// github圖標
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/guangzan/awescnb',
},
// 碼雲圖標
gitee: {
enable: true,
color: '#C71D23',
url: 'https://gitee.com/guangzan/awescnb',
},
// 圖片燈箱
imagebox: {
enable: true,
},
// 文章目錄
catalog: {
enable: true,
position: 'left',
},
// 返回頂部按鈕
back2top: {
enable: true,
type: 'complex',
},
// 右下角按鈕列表
tools: {
enable: true,
initialOpen: true,
draggable: false,
},
// live2d模型
live2d: {
enable: true,
page: 'all',
agent: 'pc',
model: 'haru-01',
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
// 點擊特效
click: {
enable: true,
auto: false,
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
size: 30,
maxCount: 15,
},
// 評論輸入框表情
emoji: {
enable: true,
showRecents: true,
recentsCount: 20,
showPreview: true,
showSearch: true,
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音樂播放器
musicPlayer: {
enable: true,
page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 啟用歌詞
type: 1, // 1 -> 字符串歌詞 3 -> url 歌詞
color: '', // 顏色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url:
'http://music.163.com/song/media/outer/url?id=436016480.mp3',
cover:
'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
lrc: ``,
},
],
},
// 隨筆頭圖
postTopimage: {
enable: true,
// position: 'top', // position api 已經廢棄，使用 postbottomimage 代替
fixed: false,
imgs: [],
},
// 隨筆尾圖
postBottomimage: {
enable: false,
img: '',
height: '',
},
// 打賞
donation: {
enable: false,
qrcodes: [],
},
// 個性簽名
signature: {
enable: false,
contents: [],
},
// 二維碼
qrcode: {
enable: false,
img: '',
desc: '',
},
// 彈出公告
notice: {
enable: false,
text: [],
},
// 首頁列表圖
indexListImg: {
enable: false,
imgs: [],
},
// 頂部加載進度條
topProgress: {
enable: false,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
indexTimeline: {
enable: false,
},
// 隨筆頁尾部簽名
postSignature: {
enable: false,
content: [],
licenseLink: '',
},
// 背景圖片或顏色
bodyBackground: {
enable: false,
type: 'color',
value: '',
opacity: 1,
repeat: false,
},
// 彈幕
barrage: {
enable: false,
opacity: 0.6,
colors: [
'#FE0302',
'#FF7204',
'#FFAA02',
'#FFD302',
'#FFFF00',
'#A0EE00',
'#00CD00',
'#019899',
'#4266BE',
'#89D5FF',
'#CC0273',
'#CC0273',
],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
// 圖表
charts: {
enable: false,
pie: {
title: 'My skills',
data: {
labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
values: [40, 30, 20, 10, 20],
},
},
},
// 鎖屏
lock: {
enable: true,
background: '',
strings: [
'<i>Powered by</i> webpack.',
'& Theme in awescnb',
'快去自定義你的個性簽名吧~',
],
},
// footer鏈接
links: [
{
name: 'awescnb',
link: 'https://gitee.com/guangzan/awescnb',
},
],
}
最后
起初我只是用 gulp（前端構建工具） 簡單制作了一個博客園皮膚供自己使用，后來得到越來越多的園友的支持，遂用 webpack 將它重構並和交流群里的小伙伴一起完善。現在它已經能夠完全勝任當前的工作了，enjoy！今后我不再花費精力發布關於它的介紹隨筆，但會保證本項目的持續更新。
本項目不接受捐助，感謝支持！有任何建議或者問題都可以到 QQ 交流群（541802647）里交流或者在項目倉庫提個 issue。再次感謝所有提供建議的小伙伴。💗