前言 最近本著新年新氣象的想法，想換套新的博客園皮膚。 之前自己做了一套製作皮膚的解決方案，這是當時分享皮膚以及解決方案的博客： "分享一款博客園皮膚及其解決方案" 。 不過在製作新的皮膚過程中，使用這個解決方案時還是遇到了很多問題。 而為了更方便地製作新皮膚，就升級了原先的解決方案，搭建了這套博客 ...
前言
最近本著新年新氣象的想法，想換套新的博客園皮膚。
之前自己做了一套製作皮膚的解決方案，這是當時分享皮膚以及解決方案的博客：分享一款博客園皮膚及其解決方案。
不過在製作新的皮膚過程中，使用這個解決方案時還是遇到了很多問題。
而為了更方便地製作新皮膚，就升級了原先的解決方案，搭建了這套博客園皮膚製作腳手架。
項目地址已從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來的變動了一個名字。
這些會導致我需要去更新一下受到影響的頁面模板，略顯煩躁。
不過總的來說，問題不大，還是最喜歡博客園，主要是可以定製皮膚以及玩出各種新高度，現在還能鍛煉下自己搭建前端腳手架的能力。
諸位要是對這個腳手架有什麼好的建議，也希望不吝賜教。
