为园友写的皮肤制作工具 awescnb
2014 年 2 月 9 日
:art: Awescnb
, awesome cnblog.
简介
可能许多初来乍到的新手会被博客园经典的风格劝退，或者您是一个老园友，需要为您的博客定制一些功能（例如宣传公众号，文章目录、或者插入几个捐助二维码等等）而不想浪费太多时间。我制作这个小项目的目的是园友能够轻易地构建一个 博客园皮肤或完善您的博客页面功能
。它可以用来做以下三件事:
- 安装: 在您的博客园安装这个项目中已经集成的皮肤.安装之后,可以快速切换其他皮肤.
- 创建: 快速创建一个的博客园皮肤,通过打包生成文件,供您使用.
- 分享: 快速创建一个博客园皮肤并将它贡献给项目,园友就能够切换到您的皮肤了.
视频教程
今天周末录制了一个简单视频教程，虽然我在搭建的文档里有写，希望它能帮您更容易上手。视频从博客皮肤的安装、切换、从零开始制作三个方面简单展开。
您可能是非 web 前端从业者，视频中用到的命令您可能会有疑惑，只需要 下载 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: [
'Powered by webpack.',
'& Theme in awescnb',
'快去自定义你的个性签名吧~',
],
},
// footer链接
links: [
{
name: 'awescnb',
link: 'https://gitee.com/guangzan/awescnb',
},
],
}
文档
最后
起初我只是用 gulp（前端构建工具） 简单制作了一个博客园皮肤供自己使用，后来越来越多的园友使用，我索性用 webpack 将它重构并和交流群里的小伙伴一起完善。现在它已经能够完全胜任当前的工作了，enjoy！今后我也不再发布关于它的介绍随笔，会花费精力写其他前端相关内容。
有希望捐助的小伙伴不要再问我了，这个小项目非我一人所为，它不接受任何捐助。有任何建议或者问题都可以到交流群（541802647）里交流或者在项目仓库提个 issue。再次感谢所有提供建议的小伙伴。:heartpulse:
About The Author
