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

GZ/awescnb

简介

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

创建新的皮肤

首先你需要将项目 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

posted @ 2020-03-13 21:29  guangzan  阅读(899)  评论(4)  编辑  收藏  举报