纯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连接。