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

  • 2020 年 3 月 13 日
  • 筆記

简介

干巴巴写一个博客园皮肤不是一件容易的事. 因为你无法像用前端框架写代码那样在本地调试你的 js, 所以我用空闲时间写了这个小项目.

  1. 你可以使用它创建自己的博客园皮肤.最后打包生成的的 js 文件,供你自己使用.

  2. 你可以安装这个项目中的皮肤在你的博客园.这不是一个简单的博客园皮肤,而是一个合集.安装之后,你可以快速切换其他皮肤.

  3. 你可以使用它创建一个博客园皮肤.并将它贡献给项目,园友就能够切换到你的皮肤了.

目录

这里只简单的罗列基本的项目目录,让你清楚它是怎么运行的.如果你有问题或建议欢迎交流.

├─config  webpack配置  └─src      │  main.js 项目入口      ├─assets 静态文件      ├─constants 常量      │      default.js  默认配置      │      elements.js 博客园常用标签classid      │      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 中粘贴以下代码.

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并进行以下更改:

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.

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 构建. 因为这个版本的皮肤正在从上个版本迁移.
所以如果你想安装皮肤, 请先使用上个版本的.跳转以安装.

上个版本的皮肤提供了大量的可选配置,安装后你可以在博客园->设置页面自定义你的博客.

{      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',          },      ],  }

具体可以参考文档

贡献

如果你像我一样是一个前端小白, 不妨拿它来练练手, 又可以美化你的博客, 一举两得.

  1. fork 这个仓库.
  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
点我跳转到 2.0