纯MarkDown博客阅读体验优化

2022-07-21 12:51:46

声明：以下博客皮肤与博主目前所使用的样式不同，之后有空博主会给出下面方案的具体效果图与对应代码。目前本博客使用的是 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链接。

码农公寓