前言

最近本著新年新氣象的想法，想換套新的部落格園面板。

之前自己做了一套製作面板的解決方案，這是當時分享面板以及解決方案的部落格：分享一款部落格園面板及其解決方案。

不過在製作新的面板過程中，使用這個解決方案時還是遇到了很多問題。

而為了更方便地製作新面板，就升級了原先的解決方案，搭建了這套部落格園面板製作腳手架。

專案地址已從github換到了碼雲：https://gitee.com/vvjiang/cnblogs-skin。

具體的使用方式專案文件有介紹，這裡就不贅述了，接下來主要是講腳手架解決了什麼問題以及解決方法。

原先的方案以及遇到的問題

原先的解決方案其實很簡單，將css寫在不同的less檔案中，然後用webpack-dev-server保證本地開發。

在需要build最終的css時，通過mini-css-extract-plugin提取樣式到最終的css檔案中。

自定義js部分，就是一個單獨的檔案，在開發環境下通過引用這個檔案來處理，構建時不需要這個檔案，直接複製貼上到部落格園後臺即可。

現在說一說原有方案遇到的一些問題：

• 沒有壓縮css和js。早期時還好，但是到了後面功能變多，js和css檔案體積在逐漸膨脹。
• 部落格園的指令碼功能，實際上是通過script元素包裹的html元素，而且有的功能需要自己的html元素，所以最後js程式碼每次還需要手動加上相應的html元素。
• 開發環境引用部落格園的圖片，頁面上圖片缺失，有時候報403，有時候會載入完但是不顯示。這是部落格園圖片防盜鏈導致。

而我的腳手架就是針對這些問題來給出具體的解決方案。

解決css壓縮問題

其實css壓縮並不是個問題，主要是之前考慮到大家可以在部落格裡面按F12看css檔案，然後方便copy功能。

但是現在我們還是需要去做一下css壓縮的工作。

採用的是webpack4的常規方案：optimize-css-assets-webpack-plugin。

具體的可以百度，或者直接檢視我的專案程式碼，不展開說這個。

解決js壓縮的問題（nodejs + uglify-js）

js壓縮的問題不能靠webpack，因為靠webpack打包應用生成的最終js是包括一些webpack程式碼的，不那麼純粹。

而如果以庫檔案的方式打包，那麼可能還需要配置兩個webpack配置檔案來處理，有點麻煩。

所以我採用的方案是不借助webpack，而是自己用nodejs引入uglify-js這個庫來打包。

這裡只寫一下js壓縮的關鍵程式碼：

const UglifyJS = require("uglify-js");

function buildMoudle(moduleName) {
  fs.readFile(`./src/js/${moduleName}.js`, (err, data) => {
    const code = data.toString()
    let jsCode = ''
    // 如果相應的模組js程式碼不為空，那麼就進行壓縮處理
    if (code !== '') {
      jsCode = UglifyJS.minify(code).code
    }

    // ...
  })
}

這裡實際上使用nodejs讀取指定模組檔案,然後使用uglify-js壓縮和混淆js程式碼，最後再用nodejs將程式碼寫入到指定模組檔案即可。

解決js打包用html元素包裹的問題（自定義模板替換佔位符）

其實到了這一步很好解決，咱們通過nodejs讀取指定模板html檔案的文字，將其中的佔位符替換為壓縮後的js程式碼即可。

先看看我們的模板檔案：

<div id="loadingProcess"></div>
<script type="text/javascript" src="https://magi.com/assets/thirdparty/leader-line.min.js"></script>
<script type="text/javascript">
{{jsContent}}
</script>

再看看我們轉換的關鍵程式碼：

/**
* 用指定模組的Html程式碼包裹js程式碼
* @param {*} jsCode js程式碼
* @param {*} moduleTemplateHtml html模板程式碼
*/
function wrapJSCodeByHtml(jsCode, moduleTemplateHtml) {
  return moduleTemplateHtml.replace("{{jsContent}}", jsCode)
}

最後將返回的最終程式碼輸出到指定模組的html檔案即可。

解決開發環境下頁首檔案和頁尾檔案包裹JS注入到html中的問題（自定義webpack外掛）

但是上面這一步還有點問題，咱們的模組檔案改變了，還要去手動改變咱們開發環境的模板檔案，要不然開發環境和最終生成的不同啊。

但是手動做這個事情太蠢了，多做幾次完全就打消了我繼續做面板的慾望了。

所以這裡我們需要通過一個自定義的webpack外掛，將這部分html程式碼和js注入到開發環境的html中：

/**
* 自制注入頁首和頁尾html模組程式碼的webpack外掛
*/
function InjectBlogHtmlPlugin() {
    console.info('html模組注入')
}

InjectBlogHtmlPlugin.prototype.apply = function (compiler) {
    compiler.hooks.compilation.tap('InjectBlogHtmlPlugin', (compilation) => {
        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(
            'InjectBlogHtmlPlugin',
            function (data, callback) {
                const headerJsText = fs.readFileSync(`./src/js/header.js`).toString()
                const headerHtmlText = fs.readFileSync(`./src/template/header.html`).toString()

                const footerJsText = fs.readFileSync(`./src/js/footer.js`).toString()
                const footerHtmlText = fs.readFileSync(`./src/template/footer.html`).toString()

                data.html = data.html.replace('{{headerHtml}}', headerHtmlText.replace("{{jsContent}}", headerJsText))
                data.html = data.html.replace('{{footerHtml}}', footerHtmlText.replace("{{jsContent}}", footerJsText))

                callback(null, data)
            }
        )
    })
};

htmlWebpackPluginBeforeHtmlProcessing是編譯時的一個hook，在html處理之前。

這裡會將未壓縮的程式碼和模板html一起注入到生成的html中。

解決改變頁首模板檔案和頁尾模板檔案不能熱更新的問題（raw-loader）

到了這一步，這個生成頁首和頁尾模板檔案的功能已經差不多了。

然而你會發現在開發環境下改變頁首模板檔案，頁面並不會熱更新。

這是因為頁首html模板檔案與入口檔案不存在依賴關係，所以不能熱更新。

這裡你可能會有疑問，明明html-webpack-plugin依賴的頁面模板檔案就沒有問題，修改之後可以熱更。

那是因為html-webpack-plugin依賴的模板內部是做了處理的，所以改html-webpack-plugin的頁面模板檔案可以熱更新。

但是我們這裡的頁首模板檔案和頁尾模板檔案肯定不能這麼處理，那麼我們讓他們存在依賴即可。

在入口檔案app.js中引入相應的模板檔案。

import './src/template/header.html'
import './src/template/footer.html'

但是很顯然這樣會引起編譯報錯，所以我們需要修改webpack配置用raw-loader進行處理一下。

module: {
    rules: [
        //...
        {
            test: /\.(htm|html)$/,
            use: [
                'raw-loader'
            ]
        }
    ],
},

這樣一來修改頁首模板和頁尾模板就可以實現熱更新了。

解決部落格園圖片防盜鏈導致開發環境圖片載入錯誤

關於這個問題需要分兩點去解決，第一點是img元素的圖片載入問題，另外一點是css中background-image中圖片的載入問題。

首先我們需要明白是什麼原因導致的，這兩個點都是因為同一個原因：防盜鏈處理。

當我們載入部落格園的圖片資源時，請求頭部會有個Referrer Policy的頭域，預設值為no-referrer-when-downgrade。

它會向伺服器傳送我們當前引用這個資源的頁面的地址，而部落格園伺服器會對不是部落格園的地址做過濾處理，我們的圖片也就載入不出來。

第一點很好解決，在我們的categoryList.html、index.html和read.html三個頁面模板檔案的頭部加上下面這段程式碼即可：

<meta name="referrer" content="no-referrer"/>

這樣一來，我們圖片的請求，不會再向圖片伺服器傳遞 Referrer值。

第二點不好解決，因為圖片是在css中的，上面的方式對它無效。

最開始的想法是有沒有辦法攔截圖片請求然後做處理，然而並沒有什麼太好的辦法。

後來我又想著本地開啟一個代理，用nodejs的express去處理圖片資源，但是太過麻煩。

最後的處理方式比較質樸：

將css圖片中引用的圖片下載下來放在本地，開發的時候載入本地圖片，生成的時候通過webpack的publicPath生成部落格園的地址。

其實這種玩法是借鑑了我日常操作中的場景：開發的時候載入本地圖片，釋出的時候將本地圖片上傳到cdn之後，引用cdn地址。

而現在部落格園的圖片資源就是作為這個cdn地址存在的。

這裡說起來簡單，其實改造起來還是做了不少事的。

首先要將css中引用的圖片下載下來，存放在src資料夾下的imgs資料夾中。

然後修改所有css中的部落格園圖片地址為本地圖片地址。

因為之前都是用的網路圖片地址，現在用本地圖片的話，那麼就要用file-loader處理一下。

需要在webpack.config.js中配置publicPath，但是考慮到咱們的webpack配置在生產和開發時都會用到，所以需要區分開發和生產環境。

這裡沒有用兩套配置，因為畢竟改動不大，所以直接使用cross-env新增NODE_ENV環境變數，然後在webpack.config.js中加以判斷。

這個方案其實不太滿意，因為有一個手動下載圖片，並修改開發程式碼的步驟。

不過也還能接受吧，畢竟只有第一次可能工作量大一點，您如果有更好的方法希望可以提一下建議。

不足之處

仍然有一點不足之處，但是這個不足之處僅僅只針對除我之外的使用者。

因為我自己的面板力求簡潔，所以很多部落格功能我沒有用到，也就沒有在頁面模板中加入這方面的html程式碼。

如果您有需要的話，可以下載腳手架後，修改template資料夾中的三個html模板即可：

• index.html 部落格首頁模板
• read.html 部落格詳情頁面模板
• categoryList.html 分類列表頁

我自己用的是部落格園的blank面板模板，如果您用的是部落格園其他的面板模板的話，可能也需要進行相應修改。

總結

最後吐槽一下，當我改造舊專案時，發現有些引用自部落格園的css路徑變動導致引用css失效。

而且有一次我發現自己部落格裡面的樣式有些奇怪，原因是部落格園的html結構中id還是class來的變動了一個名字。

這些會導致我需要去更新一下受到影響的頁面模板，略顯煩躁。

不過總的來說，問題不大，還是最喜歡部落格園，主要是可以定製面板以及玩出各種新高度，現在還能鍛鍊下自己搭建前端腳手架的能力。

諸位要是對這個腳手架有什麼好的建議，也希望不吝賜教。