用 webpack 搭了一个写博客园皮肤的架子

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