文章 1700 字

速读只需4分钟

1. 前言

刚开始写公众号的时候，最发愁的就是排版问题，因为当时主流的排版工具，例如秀米、135等有 3 个难以忍受的缺点

1. 免费的模板比较杂乱，优质的模板多数需要付
2. 操作比较复杂，通常要在固定的模板中插入文字
3. 操作页面过于花哨，容易分神，不利于专注创作

所以坊间也流传着写作一小时，排版一下午的调侃，在我看来，这属于本末倒置，因为对于读者来说，文字才是公众号的核心价值！但对于作者来说，排版确实是心里难以迈过的一道坎！正如阿禅曾写下过这样的文字：

写文章，应该是一气呵成的，排版，应该是一键转换的！没必要在某些排版器里，按「块」的方式一块一块地复制粘贴文字，那样，会比较闹心。

所以对于排版这个问题，我想一劳永逸地解决它，对于读者，我也想提供一个排版的 B 计划！

2. 我心中的理想型

首先要足够的简洁，因为我的公众号以观点、方法为主，不需要过多的修饰，繁杂的版式反而会喧宾夺主。

其次对于文字的修饰功能一个都不能少，例如引用、标题甚至代码，每类文字都应该被显著的标识，但样式上又得统一、协调与克制。

最后能够实时预览样式，这样写作的时候心里会踏实很多，不然一旦文不对版，后期又得花不少时间去微调。

3. 实现思路

公众号的本质就是网页，所以公众号排版就是对网页内容的修饰！所以我们只需要在能够生成网页的工具中编写文字，然后对生成的网页进行修饰，最后将网页的内容粘贴到公众号里即可～

3.1 所需工具

他们分别是一款 Markdown 编辑器、一个浏览器、两个浏览器插件和一个 AI 助手！

Markdown 编辑器：这里推荐使用Typora，首先它足够的强大，不仅支持了 Markdown 的所有语法，还可以自定义样式。其次它也足够的纯粹，打开页面后只有一个编辑页面，十分适合沉浸式写作。

浏览器：浏览器推荐Chrome，因为它是市面上最主流的浏览器，对网页样式的支持也最为规范。

浏览器插件：它们分别是CSS Peeper与 RGB 颜色选择器，其中 CSS Peeper 可以方便的查看网页的样式，这样方便我们参考其他公众号的排版，RGB 颜色选择器则方便我们获取其他公众号的颜色搭配，当然你也可以直接用浏览器去查看网页的 CSS 源码，虽然门槛更高，但也最为有效。

AI 助手：这里首推ChatGPT，另外国内的通义千问、文心一言等也不错，AI 助手可以回答公众号排版的所有问题，包括上面软/插件的功能介绍，以及 Markdown 与 CSS 的使用规则。

3.2 Markdown 与 CSS

Markdown是一种极其简单的文本编辑规则，零基础上手不用 10 分钟，而 CSS 是网页样式的修饰规则，虽然有一定的门槛，好在本次涉及的内容不多，另外有 AI 助手的加持，够不成拦路虎，下面通过一个表格把涉及到的Markdown 与 CSS 的内容罗列出来

以本文的大标题为例，这里实际使用的是标题2，下面的 CSS 代码详细展示了标题2的修饰过程，其中 /**/中的文字是每一行代码的解释，这几乎是所需 CSS 代码的全部了。

h2
{
/* font-size：设置字体大小为 20 像素 */
font-size: 20px;
  
/* color：设置字体颜色为黑色 */
color: black;
  
/* font-weight：设置字体粗细为粗体 */
font-weight: bold;
  
/* 设置底线的颜色为绿色 */
border-bottom: 6px #43ab80 solid;
  
/* 设置距离上面的段落的高度为 40 像素 */
margin-top: 40px;
  
/* 设置距离页面左侧边界为 14 像素 */
margin-left: 14px;
  
/* 略 */
margin-right: 14px;
  
/* 标题文字再往左移 3 像素 */
padding-left: 3px;
  
/* 略 */
padding-right: 0;
  
/* 标题文字再往下移 7 像素 */
padding-top: 7px;
  
/* 略 */
padding-bottom: 7px;
}

3.3 使用流程

我们把编辑好的 CSS 文件放到 Typora 的主题目录中，然后在菜单中选择我们自定义的主题，这样我们就能够在编辑页面实时的预览排版的样式。当我们写完后，可以将内容导出为 HTML 文件，并将里面的内容复制到公众号的编辑页面即可。

4. 也可以偷懒

如果你觉得下载使用Typora过于麻烦，亦或是不想看CSS的代码，下面几款在线的 Markdown 排版工具也值得一试，这些工具不仅提供了丰富的模板，并且还免费，更有部分工具提供了自定义 CSS 样式的功能。

• 可能吧：https://knb.im/mp/
• 微信 Markdown 编辑器：https://doocs.github.io/md/
• Arya-在线 Markdown 编辑器：https://markdown.lovejade.cn/
• Markdown 官方编辑器：https://markdown.com.cn/editor/
• Mdnice：https://editor.mdnice.com/

当然免费易用的代价是排版样式未必符合自己的口味，将来也存在着不可用的风险，这也是我坚持自排版的原因。

5. 小结

虽然公众号的排版思路比较简单，但要想得到比较满意的样式，还需要大量的调试，例如段落文字的间隔、每种文字的颜色，这差不多花了我一周的零碎时间，现在我终于可以有底气的说：庖丁之刃的排版也是公众号的头部了！

或许你好奇，为什么这篇内容没包含图片的排版？恭喜你发现了彩蛋：下篇文章，我会聊聊如何使用 AI 来实现公众号图片的生成与尺寸调整～