Luna教程 | 微信公众号神速排版教程
【0. 前言】
关注我的小伙伴们都知道，我从去年 6 月正式开始周更微信公众号。
但是，你们不知道的是，在过去的整整一年，我每篇文章的写作时间和排版时间几乎是 1:1（每篇文章大约花 2-3 小时写+修改，相应的排版时间也差不多要这么久）。
在排版这件事上花这么长时间的原因，并不是因为我多么追求文章排版的美观（我只追求简洁易读）；
而是因为，微信公众号的排版和写作体验实在是太太太太太差了！！！！！
【例 1：撤销】🔙
在微信公众号编辑器里面Ctrl+Z一下，整个页面的字体居然会变的和以前不一样……
【例 2：字体】
微信公众号的文章字体居然是不能自己设置的！！！
微信似乎有一个默认的字体，虽然你复制过来的文字会保持之前的字体，但是如果你在微信公众号里面直接打字，那个字体和你复制过来的字体是不一样的！
而且由于编辑器里面根本没有【字体】这个选项，你都无法重新把所有文字改成一致的字体！！
就算是行距这种简单的事情，也经常有调来调去就是不统一的情况。
【例 3：序号】1⃣️
更可怕的是……如果你复制过来的文章里面有序号（数字或者圆点），千万别在编辑器里面修改，否则你会陷入无限崩溃的（后文会继续说到这个坑）。
【例 4：版本控制】
版本控制很差。
假设你在浏览器里面手滑一下，或者同时使用**【订阅号助手】和【网页版编辑器】编辑同一篇文章，那……你一定会遇到【改过的东西怎么没了？】**这样的情况。
说实话，我这一年，想弃更公众号的念头全部来源于【排版太费时间】，而不是【写作太费时间】。
我猜测也有很多人因为微信公众号奇差的排版体验，而选择用其他平台写作。
【1. 痛点】😾
对于一个**【自由时间全靠挤】**的博主来说，我只想花最少的时间搞定排版，多分配一点时间给写作以及其他的事情。
没有过微信公众号写作经历的小伙伴们可能很难体会我的痛苦（嘤嘤），我也多次求助于身边的各路朋友（有些有经营公众号的经验），想知道到底怎么才能快速搞定文章排版这件事。
做公众号营销的朋友告诉我，用在线编辑器排版，最快大约要 10 分钟一篇，如果改的比较细有可能得花 1-2 小时。
当然，在问他们之前，我也是百度+知乎过很多方案的。
一圈咨询下来，流行的方案不外乎以下几种：
1. 135 编辑器
2. 秀米
3. i 排版
排名不分先后，因为我统统不喜欢。
我不喜欢这些在线编辑器的原因如下：
- 我写公众号不是为了营销，打广告，吸引流量，我只是想找个地方写字而已；
- 所以，花里胡哨的排版（比如动图，引导条什么的），我根本不需要啊……
Figure 1: 秀米编辑器
- 而且，我每次排个版，都要先在某个软件（比如 word）里面写好文章，再导入/复制到编辑器的网站里面去进行排版，排版之后再复制到公众号编辑器（极其浪费时间）；
使用在线编辑器的弊端在于，我在写作的时候，是没法最终确定排版样式的。
这就是我排斥一切在线编辑器/插件的根本原因。
【我的理想写作流程】✒️
1. 用自己喜欢的写作软件写文章，最好是 Markdown 语法；
2. 写作的时候可以直接看到最终排版的效果；
3. 写好之后，一键复制粘贴到微信公众号的网页编辑器，而且之前的样式不会被弄乱掉。
【2. 探索之路】🏃♀️
【1. Word】🙅🏻♀️
Peter 同学的最爱，我的……最不喜欢。
尝试过在 Word 里面写作复制进公众号，但是有字体和行距无法统一的问题。
【2. 公众号官方编辑器】🙅🏻♀️
那么，直接在公众号里面写？
首先，每次写都要登录网页（还要扫个二维码）；
其次，排版特别麻烦（格式刷什么的还不如 Word）；
而且，如果出现同步问题，辛辛苦苦写的字全没了（😿）；
最后，看到那个界面完全没有写作欲望（个人喜好 ❤️）。
【3. Boostnote】🙅🏻♀️
这个软件是免费开源的，支持 Markdown 语法和自定义 CSS。
White 求职那篇，我开始尝试这个软件，界面如下：
Figure 2: Boostnote
整体感觉还是挺喜欢的，但是有个致命问题：
写 Markdown 的时候没有快捷键，比如想要加粗，Ctrl+B是没用的，必须自己输入**加粗**才行。
还有就是，对我来说，界面有点复杂……
【4. Markdown Here Extension】🙅🏻♀️
后来又查到了一个浏览器的插件，叫 Markdown Here，支持直接在文字输入框里面粘贴 Markdown 文档，然后通过自定义的 CSS 一键转换成你想要的样子。
但是，每次改动 CSS 文档，都要重新到那个插件里面去复制粘贴一下，觉得还是有点浪费时间……
Figure 3: Markdown Here
而且不符合我**【写作时所见即所得】**的需求。
【5. Md2All 网页编辑器】🙅🏻♀️
在进行了多天的网络搜索之后，我发现其实很多人都和我一样，有微信公众号排版的痛点（并且觉得秀米之类的编辑器太复杂了）；
所以有人就写了个开源的项目，只要把 Markdown 的文本放进去，就可以通过 CSS 来一键排版。
这个网页，怎么说呢，还是挺有用的，提供了一些适合公众号写作的 CSS 模板（我现在用的模板就是基于其中的一个模板改的），但这是个在线工具，不符合我的需求。
Figure 4: Md2All
其实 Boostnote、Markdown Here 以及 Md2All 的理念是我认同的，但是我执着地想要找到一款最适合我的软件，能让排版的耗时几乎=0。
经过漫长的探索之路，我对自己的需求更加明确了。
我的理想写作软件直接用 Markdown 写文章+使用 CSS 排版，实时展示效果。
【3. 终极解决方案】💯
一个月之前，我结合之前所有的排版经验，摸索出来了一套适合自己/懒人的写作排版方案。
这个方法，说来特别简单（非常纳闷，为啥没有人告诉过我这么简单的排版方式，也几乎搜不到相关的教程）。
我曾经私下问过一些排版比较简洁的公众号运营者，请教他们是如何进行快速排版的，但是没有一个人回复我……💔
我觉得知识就应该分享，虽然我到现在还是不知道别人到底怎么排版，但是接下来我会详细讲解一下我的快速排版方法 🚀。
如果你准备/正在进行公众号写作，并且像我一样喜欢多花点时间在内容上，**下面的方法请务必要看！！！**✨
【Typora + CSS】🎉
首先，你只需要一个软件，就是 Typora（https://www.typora.io/）。
Typora 有 windows 版本和 mac 版本，满足不同操作系统用户的写作需求。
没有手机版，我本身也不习惯在手机上写作，所以对我来说无所谓。
而且，所有的文档都是以.md 的形式存在你的硬盘上的，你可以用任何一个 markdown 软件打开这个格式的文档。
价格：完全免费 🆓，没有所谓的 Pro 版本，所以不会三天两头地提醒你升级付费。
界面：是我用过的写作软件中最简约的一款，打开它之后，你只需要专注内容，不需要考虑其他。
Figure 5: Typora
【1. 你需要懂点 Markdown 语法】
Markdown 是用一些特殊符号进行文本标记的语言。别怕，这不是编程语言，特别简单，特别好用。
本文不展开讲 Markdown 语法，想学的直接看 Typora 官方文档即可。http://support.typora.io/Markdown-Reference/
几个我常用的快捷键（mac 用户请把 ctrl 替换为 cmd）：
1. 标题（从 1 级到 6 级） -> Ctrl+数字（比如Ctrl+1）。
2. 加粗 -> Ctrl+B
3. 斜体 -> Ctrl+I
4. 引用 -> > + 空格
5. 小圆点 -> - + 空格
有了快捷键加持，写作体验爽到飞起。
【2. 找到 CSS 文件的存放位置】
CSS 就是用来定义你这个文档到底长啥样的，比如一级标题的字体多大，什么颜色。
Typora 有一个文件夹专门用来放 CSS 文档，CSS 文档的名字会显示在 Theme 这个菜单里面，你只要选择不同的 Theme 就可以改变整个文档的排版效果了（一键排版，So easy！）。
Figure 6: Themes
想要找到存放 CSS 的文件夹的位置，请点击File -> Preference。
Figure 7: Preference
然后Appearance -> Open Theme Folder
Figure 8: Appearance
恭喜你，找到 CSS 文件的存放位置啦！（下图的wechat.css就是我的微信公众号排版文件）
Figure 9: Theme Folder
【3. CSS 文件】
最后，你还需要有一个适合微信公众号排版的 CSS 文件，以及，了解微信公众号排版的一些坑。
CSS 文件可以直接用 Md2All 里面提供的模板，稍微改改就行。
【4. 我踩过的坑】🕳️
【坑 1：图片】
微信公众号是不支持图片复制粘贴的，也就是说，你在 Typora 里面放的图片，复制进官方编辑器之后，全部会消失（是不是很坑）。
Figure 10: Typora 里面的图片显示正常 👌
Figure 10-0: 微信公众号里面没有图片了 😢
【解决方法】
通过微信公众号的图片功能上传图片（如果想给自己省点麻烦，就根据文章的使用顺序，用 1,2,3,4 的编号来给图片文件命名）。
Figure 10-1: 上传之前先编号
PS：有些教程会建议把图片传到七牛之类的图床网站，但我个人暂时没尝试过（而且，这种方式的弊端在于，图床链接一旦挂掉，你的文章就。。。。悲剧了）
Figure 10-2: 挂掉的图床链接无处不在
【坑 2：序号】
我是一个比较喜欢用 1,2,3 或者小圆点来梳理文章逻辑的人，但是微信公众号偏偏对序号非常不友好！！
比如我现在的 CSS 里面把序号设为蓝色，在 Typora 显示的样子和我想象的一样。
Figure 11: Typora 里面序号显示正常 👌
但是，复制粘贴到微信公众号会变成这个样子（不光颜色没了，字体以及大小都和我其他的内容不一样，强迫症的我完全接受不了！）：
Figure 12: 微信公众号的序号样式会乱掉 😢
【解决方案】
既然你不支持序号的自定义样式，那我就不用了呗。
我把 5 级标题的格式定义成了我想要的蓝色加粗样式，每次想要用序号的时候，就直接 Ctrl+5，然后写个数字就 ok 了~（是不是很聪明呀哈哈）
1. 这样
2. 我就
- 不怕啦！
Figure 13: Typora 序号显示正常 👌
复制进微信公众号的效果（完全一样）：
Figure 14: 微信公众号序号显示正常 🍺
【5. 结语】
我使用 Typora+CSS 的方法进行排版已经有一个多月啦，从 White 求职记那篇开始进行摸索，到现在已经熟练掌握这项排版技能了。
大家可以发现，我之前的文章是风格是这样的（比较不统一，因为每次都是手动排版，好浪费时间啊！！！）：
PS: 下图右上方那篇是用 135 编辑器排的，耗时至少 4 小时……
Figure 15: 手动排版效果（不一致）
采用了最新研究成果之后是这样的（是不是看起来舒服多啦~~~）：
关键是，现在我几乎不花时间在排版这件事上（除了传图片），哦吼吼吼~~~~😸
Figure 16: 现在的高效率排版（一致）
如果你没有公众号的话，就记得下载个 Typora 吧，超级好用，我之后会另外写文章说这个软件。
对了，别忘了学一下 Markdown 的语法哦~
Talk to Luna
Support Luna
