經過自定義樣式優化博客界面

園子裏的模板很是豐富，但距本身的指望，老是差一點點。加上我使用的是Windows Live Writer 2009寫博客（2011的某些功能我沒法接受，退回到習慣的舊版），因此寫博客快則快矣，界面就有點不忍直視了。如前兩天寫的一篇博文：

不管是標題，仍是各級子標題、代碼、例子，佈局，感受都是亂糟糟的，打開頁面，實在沒有閱讀下去的興趣。

因而研究了一下究竟怎樣來優化博客界面，對如下方面進行了修改：

• 每一個段落加上首行縮進
• 標題、子標題樣式修改
• 代碼樣式修改
• 增長閱讀目錄
• 增長回到頂部

最後的結果好多了：

 

過程當中有些地方的確是反覆嘗試屢次才找到位置的，怕時間一久我記不起這些細節。因此趁熱先記錄一下。

整體思路

首先，自定義模板的思路被否決了。由於個人目標只是想讓博客內容頁面稍微整齊點而已，本身設計模板要付出的代價實在過高了，因此放棄。

通過摸索，對於界面優化大體的思路是：

  1）儘可能簡單，不要作太多的複雜設置；

  2）仍然可使用wlw寫博客，界面代碼主要在服務器上設置。

整個過程有點相似於內容和界面分離：在wlw中，按照正常的標籤寫內容，在服務器上，再根據模板和自定義樣式進行渲染：

客戶端：

提交後，查看的效果：

 

模板中的關鍵樣式

研究頁面的html代碼，找到一些關鍵的ID和Class，未來就是經過對它們設定自定義樣式來修改界面：

.postTitle：標題，不過目錄頁中也會用到這個樣式，因此須要防止干擾

#cb_post_title_url：內容頁面標題連接的ID

#cnblogs_post_body：內容主體

#cnblogs_post_body h1：一級標題

#cnblogs_post_body p：全部內容中的段落

其餘自定義的樣式，能夠用#cnblogs_post_body後跟自定義樣式的方式來限定，如我對「回到頂部」div的自定義樣式，就能夠經過#cnblogs_post_body .bm來控制。

後臺設定樣式

在後臺-設置中，添加自定義樣式便可

通過實驗，這些樣式的優先級每每高於模板樣式，所以，只要可以準確的定位選擇符，就能夠較好的修改界面。

另外，建議作好註釋。

wlw客戶端的操做：

  1）正文：正常寫，保證是P標籤便可

  2）子標題：使用h1標籤

  3）目錄，使用列表，指向標題前面的一個div，內有「回到頂部」連接

<li><a href="#bm_all">常見字符串操做</a> </li>、

  4）在每一個子標題前面，都有連接，做用是：一、做爲書籤；二、回到頂部

<div class="bm"><a href="#top" name="bm_all">回到頂部</a></div>

  5）代碼樣式我採用自定義方式，因此每次粘貼代碼，須要切換到源代碼視圖進行 

  6）一些輸出結果，實例文本等，也能夠用代碼方式顯示。只要用<pre>包住便可

  7）實踐發現，使用wlw反覆修改都沒事，但若是用博客園自帶編輯器修改後，代碼格式會更改，所以須要注意