分享一款博客園皮膚及其解決方案

前言

要分享的皮膚就是您如今看到的這款，雖然還有很多瑕疵，可是這個皮膚也算是大體完成。

本皮膚徹底使用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文件，直接複製粘貼過來樣式會表現得比較奇怪。這個之後有時間再修改吧。

最後還有一點小尷尬，由於按照固定的格式去書寫博客才能呈現完美的效果，因此以前一些博客在二級標題和圖片上可能存在樣式問題，不過卻是不影響閱讀。