COPY博客園CSS樣式

0. 背景：

今天偶然發現一個博客很好看，而後發現地址欄竟然時cnblog，也就是博客園的，本覺得是博客園有一個這麼漂亮的皮膚，因而去皮膚裏面尋找，未果。發現後臺有相似於‘頁面定製CSS代碼’的字樣，猜想多是本身DIY的。因而打算嘗試一下看能不能COPY成本身的。

1. 任務：

- COPY狂奔的蝸牛的博客樣式

2. 嘗試過程：

2.1 肯定狂奔的蝸牛用的什麼模板

未果

2.2 肯定後臺‘頁面定製CSS代碼’會不會是一個單獨的文件

F12查看請求的資源裏面有沒有css/js的文件,經過對比發現蝸牛的博客裏面多了87977.css、pace.min.js、customization.min.js幾個文件。

猜想是單獨的引用文件。

2.3 肯定如何引用這三個文件

開始把css代碼添加到頁面定製CSS代碼裏面，同時選中禁用模板默認CSS，

結果發現博客排版錯位。

經過查看副標題源代碼

發現樣式根本就不同，我覺得必需要一樣的模板，這時候我參考了另外一篇文章。那篇文章用的是LessIsMore的模板，查看副標題源代碼，再查看本身的換成LessIsMore模板的源碼,發現如今有了Subtitle這個CSS屬性。當我嘗試找出Sutitle定義在那個文件的時候我發現了這個，

這意味着我能夠確認蝸牛用的是什麼模板了。回頭一看原來也是LessIsMore。
選好新的樣式，從新保存，發現樣式仍是不同，嘗試取消選中的禁用模板css樣式，顯示正常。

2.4 補全js引用

確認模板，不勾選禁用默認CSS樣式以後要作的是添加另外兩個js代碼。以前折騰的時候在這裏添加了一句話，在源代碼裏面這樣子顯示。

查看蝸牛源代碼，

發現一樣的地方引用了pace.min.js。因而確認一個js是頁頭引用，另外一個是頁腳引用。

大功告成

3. PS

- 折騰發現customization.min.js是響應式佈局用到的，當窗口縮小的時候會自動隱藏側邊欄。
- 發現F12對學習CSS會頗有用，當時查看加載js資源文件的時候還用過F12的加載時間進度來判斷這兩個文件是何時加載的，從而猜想大致是在那個文件引用。固然這是在本身沒有發現F12查看樣式直接就能夠看到css出處的時候乾的事。
- 由於是COPY，兩個js代碼文件仍是蝸牛的地址，要想變成本身的就把兩個js文件分離出來經過後臺上傳到本身的文件裏。而後把引用地址改爲如今剛上傳的。
- 主頁的圖片修改也是這樣子
- 寫到這裏你也發現我不懂CSS了吧

4. 接下來的任務

- 看懂那個css文件，看懂那兩個js文件

5. 引用資料

共享一下個人自定義CSS博客皮膚（2012.3）