做公众号，学会排版，写一篇很「美」的文章！
继续我们「做公众号」系列的文章，今天讲讲如何学会给文章排版，写一篇很「美」的文章！如果你是第一次看到这篇文章，这是这个系列之前的两篇文章：
我们这些略懂一些 SEO 的草根站长（😳）都知道，一篇文章的内核都是内容，写的好的内容，读起来如沐春风，非常舒服，但是承载内容的页面的如果没有布局和排版，广告位横飞，混乱不堪，使得明明很好的内容，变得一点阅读的兴趣都没有。
对于做公众号的人来说也是一样的，学会排版也是非常重要的一个技能，一些公众号文章，排版清晰，文字间距适当，读起来毫无压力。而一些公众号的文章，文字密密麻麻，也没有任何段落章节划分，完全没有读下去的勇气。😅
如果你已经阅读过我「做公众号」系列的文章，你一定对我这两篇文章的排版还算是不错吧，段落章节都非常清晰，图片和字体都做了一些小的设计，我今天就讲解一下我是如何给公众号排版的。
文字
一篇文章，最重要的是文字，使用什么字体，行距多少合适呢？都会对阅读造成非常大的影响。
如果你仔细看，就会发现我文章的文字都比较细，这个主要是为了方便阅读，现在手机的分辨率都很高，对于细的字体也会渲染得不错，使用比较细的字体让文章整体效果看起来会清爽很多。
下面就是我使用的字体列表：
body{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, "Open Sans", "Helvetica Neue", "sans-serif"; }除此之外，我还把字体颜色设置纯黑色，因为字体比较细，所以看起来不会那么黑，然后行距设置为 1.6，字体设置为 16px，这样一眼看上去就非常清晰：
body{ color: #000000; font-size: 16px; line-height: 1.6; }作为对比，如果行距设置为 1，字体设置为 14px 的，会显示成什么样呢？不多打一段文字了，就拿这段文字来设置了，大家看看，是不是立刻看起来密密麻麻的感觉，阅读感明显就差了不止一个档次吧！
通过对比，是不是很明显感觉到不同文字的样式对阅读影响非常大。😁
一级子标题
接着我觉得一篇文章最重要的是标题，我们写技术类文章，喜欢通过子标题将文章划分得更加清晰，用户也能够首先通过一二级子标题大概知道文章的脉络和重点。
当然除了技术类文章，其他类型的文章也可以通过这类子标题划分的模式让用户清晰知道自己读到那里，对于作者，也能让自己将文章写得更有逻辑和条理。
如上所示，我是给一级子标题颜色设置成青蓝色，并且加上大概 10 像素颜色淡一些的线，同时这条线向上推了一些，放到标题后面形成阴影的感觉，然后二级子标题的颜色设置成草绿色，阴影的感觉同样处理，如下所示：
二级子标题
之前我试过子标题下面加一条线，但是感觉不是那么好看，经过各种测试和比较，终于改成现在这个样子，感觉明显一下高级多了。😄
大家觉得呢？
此外一般来说文章有一二级子标题就已经足够了，如果文章有三级子标题，当然也可以按照同样的方式设置，颜色根据自己喜好选择即可。
图片
图片算是第三重要吧，我目前只是做了简单的一些设置，效果先看上面两种子标题样式比较的图片，我把文章中的图片都设置了 6px 半径的阴影效果，这样图片有点发光的效果，比较好看。😊
你觉得呢？
因为我写技术文章比较多，很多截图，有些截图，可能边缘是白色，可能会和内容混了，这个阴影效果处理的方式也可以明显把这种截图明显区别开。
当然图片还有一些相册，多张图片的样式等，可能需要处理，我暂时还没有用到，如果之后我要处理了，我也会再加上去。
表格
除了「文字」、「标题」和「图片」这三大件之外，技术类的文章可能还会比较多用到表格，我针对微信公众号，也特别优化了一下表格的显示，算是一个 bonus 的功能吧：
如上所示，如果没有回车，都会一行显示，除了第一列之外，其他列支持滚动，这样在手机上看的时候，在保持表格优雅的同时，让用户不仅能够快速预览表格内容，也可以看完表格内容。
代码
最后技术性的文章的怎么可能少的了代码呢，所以代码样式是非常重要的，我也是做了一些优化，如上面文字样式代码的样式效果，怎么样？我再去搞一段 PHP 代码给大家演示一下：
add_action('plugins_loaded', function(){ // 所有插件都已经加载
if(!did_action('wpjam_loaded')){ // 确保已加载 WPJAM Basic 插件
return;
}
$fields = [
'seo_title' => ['title'=>'SEO标题', 'type'=>'text', 'class'=>'large-text', 'placeholder'=>'不填则使用标题'],
'seo_description' => ['title'=>'SEO描述', 'type'=>'textarea'],
'seo_keywords' => ['title'=>'SEO关键字','type'=>'text', 'class'=>'large-text']
];
wpjam_register_post_option('seo', [
'title' => 'SEO设置', // 自定义选项标题
'context' => 'side', // 显示在文章编辑页的侧边
'list_table' => true, // 后台文章列表页也支持弹窗设置
'page_title' => 'SEO设置', // 文章列表点击弹窗的标题
'fields' => $fields
]);
});怎么样，效果很不错吧。你对写一篇很「美」的文章有什么看法，欢迎在公众号的留言来发表你的看法。
哦，对了，我是把这些样式都写在了「我爱水煮鱼」博客主题中，写公众号的时候，在 WordPress 后台写好，然后直接一键复制到公众号即可，非常快捷，并且样式也全带过去了。当然了，你也可以在公众号后台，把自己常用的样式保存为模板，下次直接直接使用模板来写文章，也是可以的。😄
最后再说一句：「我爱水煮鱼」博客主题我放在了「WordPress 果酱」的知识星球，你加入之后即可获取。
