用 webpack 搭了一個寫博客園皮膚的架子

簡介

干巴巴寫一個博客園皮膚不是一件容易的事. 因為你無法像用前端框架寫代碼那樣在本地調試你的 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