純MarkDown博客閱讀體驗優化

聲明：如下博客皮膚與博主目前所使用的樣式不一樣，以後有空博主會給出下面方案的具體效果圖與對應代碼。目前本博客使用的是 esofar 開發的開源項目 cnblogs-theme-silence，很是乾淨清爽，且利於定製，有興趣的同窗可在 Github上找到它，或者點擊本博客底部連接直達。

今天鼓搗了一天純MarkDown書寫的博客樣式的美化，事實證實圖表較多的MarkDown撰寫的博文同樣能夠展示出很是漂亮的效果。爲了讓純MarkDown書寫的博客有一個乾淨舒服的閱讀體驗，我主要針對博客的如下幾個方面進行了優化，寫出來與你們一塊兒分享一下個人優化經驗。由於之前從未接觸過CSS，還請各位前輩多多指教！

主題的選擇

首先，本博客的主題樣式是 LessIsMore。該樣式很是簡單，符合咱們乾淨利落的目標，也便於咱們自定義樣式的改造。另外一個不錯的主題是SimpleMemory，也很漂亮，也能夠做爲優化的基本主題。

選擇好主題之後能夠進行大刀闊斧的改動，徹底使用自定義的CSS樣式，也能夠小部分進行更改。不管是大刀闊斧的改革，仍是小部分改動，都須要自定義一部分樣式。樣式的更改須要按照以下步驟：

• 首先點擊博客頂欄的管理

• 在博客園後臺界面中點擊設置。

• 在這裏能夠看到頁面定製CSS的字樣，這裏就是寫自定義CSS的地方。

• 若是要大刀闊斧地改動，那麼就點擊下面的禁用模板默認CSS。不然只須要針對部分Style進行修改便可，即將下面咱們要介紹的幾個css文件包裹在下面這段代碼中便可

<style type="text/css">
...
</style>

禁用模板默認CSS的好處在於能夠徹底自定義，不然在定義了相同元素css的狀況下會優先使用模板的css（若是模板有對該元素定義css的話）展現。建議禁用模板默認CSS。

表格樣式

做爲有大量圖表出現的博文，表格的樣式直接關係到用戶的體驗。因爲主題的底色是白色，藍色做爲配色，因此這裏表格的配色能夠考慮兩種：偏灰色 或 偏藍色。但當表格以藍色做爲基色時，顏色的搭配比較困難，藍色色調做爲表格的底色在純白的背景上會略顯突兀。因此這裏博主選擇了總體偏灰色的配色方案，表格的背景底色爲淺灰，線條爲中等灰，標題欄爲偏暗一些的灰色。

注：樓主沒學過任何設計，搭配全看感受...

下面是一個典型的Markdown中的表格文本。

|標題欄1|標題欄2|
|:--|:--|
|內容11|內容21|
|內容12|內容22|
|內容13|內容23|

在博主的博客中，上述MarkDown代碼的效果以下。

標題欄1	標題欄2
內容11	內容21
內容12	內容22
內容13	內容23

表格的CSS樣式表以下：

#cnblogs_post_body table
{ 
  overflow:hidden;
  border:1px solid #d3d3d3;
  background:#fefefe;
  margin:0 auto;
  width: 95%;
  border-left: 10px;
  border-right: 10px;
  margin:5% auto 0;
  border-radius:5px;
  font-family: "consolas";
}
#cnblogs_post_body table td
{
  border: 0px;
  font-size: 14px;
  text-align: center;
  border-top:1px solid #e0e0e0;
  border-right:1px solid #e0e0e0;
}
#cnblogs_post_body table tr
{
  background: #F7F7F7
}
#cnblogs_post_body table th
{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 15px;
  text-align: center;
  padding-top:5px; 
  text-shadow: 1px 1px 1px #fff; 
  background-color:#e8eaeb;
  border: 0px;
}

其中 table定義了整個表格的樣式，table td定義了每一單元格的樣式，table tr定義了每一行的樣式。

雖然博主在鼓搗博客以前並無學過HTML和CSS，可是這些標籤的英文含義都很是明確，想改進的童鞋能夠了解一些基本的CSS屬性改爲本身想要的背景色/邊框寬度等便可。

表頭排序

有些時候咱們但願讓讀者在閱讀博客中的表格時可以對自定義的表頭進行排序，這一點咱們須要經過 JS 來實現。

首先，開發者要發送郵件到 contact@cnblogs.com 申請 JS 權限。

在申請成功後，點擊管理-設置，在頁面定製CSS代碼一節中添加以下部分：

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(https://files.cnblogs.com/files/SivilTaram/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(https://files.cnblogs.com/files/SivilTaram/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(https://files.cnblogs.com/files/SivilTaram/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

再以後，在頁腳html代碼中添加以下部分：

<script type="text/javascript" src="https://files.cnblogs.com/files/SivilTaram/jquery-sort.js"></script> 
<script>
$(document).ready(function() 
    { 
        $("table").addClass("tablesorter");
        $("table").tablesorter(); 
    } 
); 
</script>

便可完成表頭排序的功能。

三級標題樣式

三級標題在MarkDown中是按照以下定義的：

#一級標題
##二級標題
###三級標題

在博主的博客中，這三種標題的樣式長這個樣子：

一級標題

二級標題

三級標題

三級標題樣式的變動主要是修改#cnblogs_body_post h1/2/3這三個樣式(class)的屬性值，本博客定義三級標題的CSS代碼以下：

#cnblogs_post_body h1{
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #009FAB;
        font-family:  "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 27px;
        font-weight: bold;
        line-height: 24px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}
#cnblogs_post_body h2 {
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #008891;
        font-family:  "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}
#cnblogs_post_body h3{        
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #005359;
        font-family: "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 20px;
        font-weight: bold;
        line-height: 23px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}

引用樣式

在MarkDown中，引用很是簡單，只須要使用>的符號便可。下面是博客中的一個引用效果

這是一個引用塊

看起來還不錯吧？引用塊主要修改#cnblogs_post_body blockquote 樣式的內容，本博客的CSS樣式以下：

#cnblogs_post_body blockquote {
        border-left:3px solid #D7D7D7;
        color:#8F9192;
        border-bottom: 5px;
        margin:10px;
        background: no-repeat scroll right top #F7F7F7;
        padding:10px 10px 5px;
        border:1px dashed #CCC
}

其實搭配CSS樣式沒有特殊的技巧，不少時候須要咱們把本身想象成讀博客的人，這樣的配色/版式很差看，那就換，改，反覆改動後找到一種較爲合適的才肯罷休（或許這叫作強迫症精神也不必定）。若是喜歡博主的博客風格，也能夠直接拿去用：Github連接。