用 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

VirMach 便宜 VPS

QNews

QNews