前言
要分享的皮膚就是您現在看到的這款，雖然還有不少瑕疵，但是這個皮膚也算是大致完成。
本皮膚完全使用css樣式，無需申請js權限，對移動端的也做了相應處理，也許您可以從其
中得到些借鑒。
當然皮膚其實是次要的，主要是分享一下這個解決方案。
這里是項目地址：cnblogs-skin
2020-1-13更新 2.0版本。
痛點
很多人都會使用博客園的css修改自己博客的樣式，但是說實話其實在修改的過程中會存在不少麻煩。
以我個人作為例子，最開始我使用最原始的方式修改樣式。
同時開兩個頁面，一邊修改樣式，一邊刷新頁面。
這樣導致的問題是操作麻煩，效率低，遇到緩存的情況還要強制刷新。特別是當遇到樣式大改的時候還可能出現樣式沖突。
所以就有了以下的解決方案。
另外:
如果是前端新手或者后端，即使對接下來的解決方案不太了解，也依然可以簡單使用本解決方案制作博客園的皮膚。（前提是懂得基本的webpack，這里是入門教程）
解決方案
這里的解決方案實際上是借助webpack和webpack-dev-server來做一個本地的服務器來解決問題。
關於這部分就不講了，相信很多人都了解怎么做的。
總之通過webpack我們可以實現模塊化開發，通過webpack-dev-server我們可以實時看到樣式修改的效果。（當然這里也用了那個熱加載的插件）
因為博客園可供修改的樣式可以影響到三個頁面：
- 博客列表頁
- 博客分類列表頁
- 博客詳情頁
所以還得借助HtmlWebpackPlugin，生成一個多頁面應用，這樣使得我們在修改皮膚樣式的時候可以隨時切換。
那么為了樣式結構更簡單清晰，處理更方便，也引入了LESS。
並且，為了之后整體樣式風格的改變，將一些常用的顏色定義為變量提取到了color.less中。
雖然本皮膚暫時只有精靈球跳動那一個動畫，但是還是單獨提取了一個animation.less文件用來存放動畫。
最后可以通過執行webpack命令，生成main.css文件，那里就是最后可以使用的樣式了。
坑點及解決方案
- 因為博客園的圖片沒法跨域，所以在本地生成可能存在無法加載一些圖片的問題。
* 解決方案：在chrome下，打開博客園中自己博客的頁面，這樣會加載到那些圖片資源，然后再運行解決方案，此時可以加載到這些圖片 - 因為無法修改博客園原有的html結構，將標題從文字修改成了頭像時，標題文字不會消失，所以需要將標題設為空，而頁面上顯示的標題實際上是寫在樣式里的
* 更好的解決方案：實際上博客園可以定制頁頭和頁尾，我只是單純懶得多寫代碼，所以通過取巧的方式繞過了。 - 記得禁用掉博客園的默認樣式哦，我還以為blank就是什么樣式都沒有，哪知道還是會有樣式。
總結
也會在簡書寫點東西，但是還是更喜歡博客園，因為可定制化更強一點。
完整地寫一個皮膚出來其實還是個很有成就感的事情。
另外：
雖然都是用markdown格式書寫博客，但是有時候在簡書寫的markdown文件，直接復制粘貼過來樣式會表現得比較奇怪。這個以后有時間再修改吧。
最后還有一點小尷尬，因為按照固定的格式去書寫博客才能呈現完美的效果，所以之前一些博客在二級標題和圖片上可能存在樣式問題，不過倒是不影響閱讀。