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

时间 2020-03-14

标签 webpack 一个博客皮肤架子繁體版

原文原文链接

简介

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

你可使用它建立本身的博客园皮肤.最后打包生成的的 js 文件,供你本身使用.html
你能够安装这个项目中的皮肤在你的博客园.这不是一个简单的博客园皮肤,而是一个合集.安装以后,你能够快速切换其余皮肤.前端
你可使用它建立一个博客园皮肤.并将它贡献给项目,园友就可以切换到你的皮肤了.webpack

├─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.github

1.在 themes 文件夹下建立一个新文件夹,例如 demo.
2.在 demo 文件夹中建立 index.js.
3.在 demo 文件夹中建立 index.css. 皮肤样式
4.在 demo/index.js 中粘贴如下代码.web

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). 就能够继承包括但不限于下面这些插件.或者不继承单独使用你须要的插件.即便你继承了全部插件, 它们也能在博客园设置页面快速开启和关闭.npm

头部进度条
看板娘(3D 模型)
音乐播放器
主题色
自定义背景图片或颜色
华丽的点击特效
自定义网站图标和标题
...

5.打开config / webpack.base.js并进行如下更改：gulp

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

具体能够参考文档

贡献

若是你像我同样是一个前端小白, 不妨拿它来练练手, 又能够美化你的博客, 一箭双雕.

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

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

简介

目录

建立新的皮肤

在博客园安装这个皮肤

贡献

To do

联系

项目地址