🎉 新版本来了，基于 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。再次感谢所有提供建议的小伙伴。💗