干巴巴写一个博客园皮肤不是一件容易的事. 因为你无法像用前端框架写代码那样在本地调试你的 js, 所以我用空闲时间写了这个小项目.
你可以使用它创建自己的博客园皮肤.最后打包生成的的 js 文件,供你自己使用.
你可以安装这个项目中的皮肤在你的博客园.这不是一个简单的博客园皮肤,而是一个合集.安装之后,你可以快速切换其他皮肤.
你可以使用它创建一个博客园皮肤.并将它贡献给项目,园友就能够切换到你的皮肤了.
这里只简单的罗列基本的项目目录,让你清楚它是怎么运行的.如果你有问题或建议欢迎交流.
├─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 创建新的皮肤首先你需要将项目 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 中粘贴以下代码.
用它来创建一个博客园主题,只需要继承 class(awescnb). 就可以继承包括但不限于下面这些插件.或者不继承单独使用你需要的插件.即使你继承了所有插件, 它们也能在博客园设置页面快速开启和关闭.
头部进度条
看板娘(3D 模型)
音乐播放器
主题色
自定义背景图片或颜色
华丽的点击特效
自定义网站图标和标题
...
5.打开config / webpack.base.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.
npm run build 打包
项目打包会生成两个 js 文件在 dist 文件夹下.
theme.js 主题js.
index.js 加载主题js和提供配置文件.
在博客园安装这个皮肤在使用 webpack 构建这个项目之前, 上个版本使用 gulp 构建. 因为这个版本的皮肤正在从上个版本迁移.
所以如果你想安装皮肤, 请先使用上个版本的.跳转以安装.
上个版本的皮肤提供了大量的可选配置,安装后你可以在博客园->设置页面自定义你的博客.
{ 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: 'http://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==http://www.likecs.com/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: 'http://gitee.com/guangzan/awescnb', }, ], }具体可以参考文档
贡献如果你像我一样是一个前端小白, 不妨拿它来练练手, 又可以美化你的博客, 一举两得.
fork 这个仓库.
git checkout -b your-new-feature 创建您的功能分支.
git commit -m 'Add some featureCommit 提交您的代码.
git push origin your-new-feature 推送到分支.
提交一个 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
点我跳转到 2.0