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

具體能夠參考文檔