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