## 简介
干巴巴写一个博客园皮肤不是一件容易的事. 因为你无法像用前端框架写代码那样在本地调试你的 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/reacghttps://img.qb5200.com/download-x/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)
