Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
面对一篇微信公众号的文章，大家可能觉得没什么不寻常，但如果你有看到作者创作时使用的排版工具，便知道一篇文章排版工作的「不易」了。
比如说一篇文章的标题、引言、小标题、段落、引导等等，通常需要在浏览器插件、第三方浏览器等方式逐个插入模板来调整实现。虽然看似方便，但是日复一日重复这些操作，是十分枯燥无味的。
近期因为工作需要我捡起这活，在被「折磨」好一段时间后，发现真的做不来这种重复的工作，于是决定花时间解决它。当然我也并非标新立异，只是觉得一个内容工作者，应该把更多的时间留在内容上，重复的排版工作交给程序执行不是更香吗？
公众号排版样式的自动化
微信公众号的文章并非长篇大论，绝大多数也不是专业文献，所以它最常见的排版样式一般是一级标题、二级标题、正文、引用、图片、加粗等等。
这么一看，很容易联想到专门给写作者用排版语言：Markdown。它的好处是能让你通过键盘就能完成特定的格式排版工作，十分快捷高效。当然了，它也并非复杂的编程语言，可能你只需花 10 分钟就能轻松掌握。
比如说：写一级标题只需在文字前面加一个 # 号，引用段落样式只需在文字前加 > 号，文字加粗则在文字两边分别加两个 * 号：
如上图所示，通过 Markdown 写作，我们解决了内容排版样式自动化。但最重要的问题是：微信公众号编辑器不支持 Markdown，我们该如何同步自动化排版好的内容呢？
Markdown 转富文本
在网页查看代码不难发现，微信公众号编辑器其实源于百度 FEX 前端团队的开源的 ueditor 富文本编辑器项目，所以想要解决上面的问题，我们就需要将 Markdown 转为富文本。
Google 搜索后，其实很快能在开源项目/软件中看到有很多优秀的实现方法（世界可真美好！），比如 markdown-here、mdnice、typora等等。通过以上这些服务/软件，在 Markdown 创作且排版好的内容便可以轻松转为富文本，并支持直接粘贴到公众号编辑器中，让排版样式得以保留。
主题 CSS 样式的修改
解决前面的问题后，其实还需要对 Markdown 主题 CSS 样式进行修改。毕竟上述服务的默认主题样式都太普通，并不完全适合自己的公众号。
CSS（层叠样式表），是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
Markdown 主题 CSS，其实就是决定 Markdown 编辑器里标题、字号、间距、颜色等排版样式的呈现，所以只要我把此前的排版习惯配置到 CSS 生成主题，便相当于一劳永逸地完成了排版工作，完全不需要再每次手动调整排版，即在 Markdown 软件边写作边排版。
如果你负责的是品牌类公众号的内容创作，也可以直接把品牌的颜色/特征运用起来并写入 CSS，让排版风格更具独特性和不可模仿性，即既不普通也不像第三方编辑器那般俗套。
在多款服务/软件尝试后，我最终选择使用的服务是 mdnice。除了能更好的实现上述两个需求，它还拥有稳定的图床，在其创作图文并茂的内容粘贴到微信公众号编辑器时都能完美显示（多数服务虽然也有图床可上传图片，但粘贴到公众号编辑器总会提示失败，需要手动逐个重新上传）。另外值得称赞的是它编辑界面主要分为三个区域，分别是：Markdown输入区、主题效果预览区、主题 CSS 区，让创作者能实时知道最终的排版效果：
微信公众号排版的建议
毫无疑问，内容重于排版，但好的排版，能让内容看起来更「舒服」。
在我看来，一个及格的排版需要考虑到使用设备、使用场景，所以微信公众号排版想达到及格线，就必须做到：
- 使用减压的排版：因为手机的屏幕比例相对细长，宽松舒适的排版会更利于阅读；
- 设计清晰的层级：手机阅读一般是纵向滑动，合理的层级设计，能让读者阅读时明确自己看到了什么位置。
针对这两个问题，我是这样做的：
说明：关于微信公众号排版，少数派作者 @马马马马马马克思 曾在《第八章 | 微信公众号排版的建议》有详细的讨论过，作者的观点和我基本一致，所以下方内容会稍有重复。
使用减压的排版
微信公众号的阅读时间是碎片化的。如果不能为读者提供一个舒适的阅读环境，减小读者的阅读压力或阅读成本，那往往就不会有把文章看完的意愿。
我会建议从这 4 个方向解决问题：
1. 留白的页距、字距、行距、段落间距
在平面设计中，留白的意义在于给予设计呼吸的空间，提供布局上的平衡。留白区域的环绕与陪衬，良好的衬托出中心区域的表现。
而在阅读场景的留白，不仅可以更突出内容，还可以为读者减压，增强读者能持续阅读下去的耐心。
实际效果可以看看下方的对比：
从横向角度看，我给文章提供了更宽的页边距，让内容和屏幕边缘不再紧密挨凑，而是有了明显留白，让视觉上有了休息的空间。所以在自定义 CSS 样式时，我推荐将 margin 左右边距设置 6px。
而在字距上则推荐将 letter-spacing 设置为 0.5px，略微调宽的字距能让字体相对不过于紧凑，减少阅读压力。
而从纵向角度看，我调整了行距和段落间距，其中我觉得最重要的是段落间距。因为考虑到手机滚动阅读的操作、从上到下的阅读习惯，段与段之间间距需要更加明显，方便阅读的定位。
段落间距调整后，行距也需要随之调整，让段落之间和行之间的间距悬殊控制的合理的范围内。目前我在自定义 CSS 样式里，将 margin 上下边距设置 11px，行高 line-height 设置为 25px。
2. 使用两端对齐
为了能使上述提到的页距效果最大化，我建议在正文使用两端对齐。倘若不使用，很容易造成文字的行尾形成不规则的锯齿状，通篇下来，会让阅读压力明显提升。
不过两端对齐也有个弊端，当遇到中英文、数字公式等内容时，两端对齐会为了「盲目」对齐，导致字间距被过渡放大，阅读起来也十分难受。我建议遇到这种状况时，可以选中该段路文本直接使用普通的居左对齐。
3. 使用合理的字号
字号大小，是读者最能感知排版的存在，也是决定文章横向空间中显示字符数量的主要因素。
出版行业里有个术语叫 CPL，即较优的每行字符数（character per line），行业普遍采用的较为理想的数据是：每行字数在 40～50 个左右。
而在手机上，如果考虑到屏幕比例的细长和排版边距的调整，微信公众号文章的每行理想字数是 21 个左右，所以我推荐在自定义 CSS 样式里，将字体大小调整为 14～15px。至于多层级的标题大小，可以根据实际需要进行调整，但尽可能确保大小相差不要过大。
4. 不使用绝对的色值
白纸黑字，在白色纸上写上黑色的字，看起来理所应当。可实际上，在电子屏幕阅读时，如果白色背景色采用纯黑的字体时，对比会十分强烈，不仅给人一种沉重感，还会造成不小的视觉疲劳。
解决的方法其实也很简单，不使用绝对的黑（即#00000），而是使用那些看起来像黑色但又不是纯黑的颜色，我自己比较倾向使用 #333333 来解决上述问题。
利用 Markdown 进行层级设计
合格的层级设计，能让用户清楚知道自己阅读到了哪里，不会觉得有看着看着迷路的错觉。我一般会用这两个方法避免：
1.不同层级不同样式
从我个人的习惯看，一篇文章的层级通常会有 2～3 个。想让层级更清晰，你可以使用模板、字体大小、位置、颜色等各种方法区分。
但我实在是觉得第三方编辑器模板插入麻烦，而且样式很俗套；专门设计的标题规范图片，每次插入又很麻烦，于是我选择在 CSS 主题中分别对它们的样式进行了简单的自定义：
2.小节间插入较为明显的分割线
在每个小节结束时插入分割线，可以让读者明显感受到上下的内容将会有不同，而且也能告诉读者已经读完了一节内容。
不过微信公众号编辑器自带的分割线就是一条无法调整页距的线条，特别影响整体的视觉美观。所以我也在 CSS 主题中调整了分割线的页边距，并且添加了向中间过渡的渐变，让视觉看起来更舒服：
3.合理的加粗提醒
对于微信公众号文章的重点内容提醒，很多写作者经常会选中好几句连续的文字加粗换个亮色，虽然确实让他们和普通的文字产生明显的不同，但我觉得如果在一段文字里，有连续加粗换个亮色的重要句子，那就说明这段文字里就压根没有重点。
重点是指主要的，而不是指相对主要的。我在自定义的 CSS 样式里，为标重点做了两个形式：
- 使用代码块，标注重要的专有名词 （因为我的创作上不涉及使用代码块写代码，所以和代码块本身的用法不存在冲突）
- 使用纯黑加粗，区别于正文的非绝对黑色333333 （只对真正重要的句子加粗）
以上就是我对微信公众号排版自动化的尝试，对我个人工作而言，确实帮我提升了不少效率，至少让繁琐重复的排版调整工作离我远了不少，希望也能对屏幕前的你有所帮助！最后感谢 mdnice 开发者开发的服务，真的超赞。
> 下载少数派 客户端、关注 少数派公众号，了解更妙的数字生活 🍃
> 想申请成为少数派作者？冲！
© 本文著作权归作者所有，并授权少数派独家使用，未经少数派许可，不得转载使用。