分享一個博客園皮膚製做腳手架

前言

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

以前本身作了一套製做皮膚的解決方案，這是當時分享皮膚以及解決方案的博客：分享一款博客園皮膚及其解決方案。

不過在製做新的皮膚過程當中，使用這個解決方案時仍是遇到了不少問題。

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

項目地址已從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來的變更了一個名字。

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

不過總的來講，問題不大，仍是最喜歡博客園，主要是能夠定製皮膚以及玩出各類新高度，如今還能鍛鍊下本身搭建前端腳手架的能力。

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