分享一個博客園皮膚制作腳手架

前言

最近本著新年新氣象的想法，想換套新的博客園皮膚，

之前自己做了一套制作皮膚的解決方案，這是當時分享皮膚以及解決方案的博客：分享一款博客園皮膚及其解決方案，

不過在制作新的皮膚程序中，使用這個解決方案時還是遇到了很多問題，

而為了更方便地制作新皮膚，就升級了原先的解決方案，搭建了這套博客園皮膚制作腳手架，

專案地址已從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://www.cnblogs.com/mtxcat/p/"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來的變動了一個名字，

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

不過總的來說，問題不大，還是最喜歡博客園，主要是可以定制皮膚以及玩出各種新高度，現在還能鍛煉下自己搭建前端腳手架的能力，

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

標籤：其他

上一篇：javascript當中prototype用法

下一篇：我的寒假學習計劃