Luna教程 | 微信公众号神速排版教程

September 9, 2019 字数 3908 8 min


【0. 前言】

关注我的小伙伴们都知道,我从去年 6 月正式开始周更微信公众号。

但是,你们不知道的是,在过去的整整一年,我每篇文章的写作时间和排版时间几乎是 1:1(每篇文章大约花 2-3 小时写+修改,相应的排版时间也差不多要这么久)。

在排版这件事上花这么长时间的原因,并不是因为我多么追求文章排版的美观(我只追求简洁易读);

而是因为,微信公众号的排版和写作体验实在是太太太太太差了!!!!!

【例 1:撤销】🔙

在微信公众号编辑器里面Ctrl+Z一下,整个页面的字体居然会变的和以前不一样……

【例 2:字体】

微信公众号的文章字体居然是不能自己设置的!!!

微信似乎有一个默认的字体,虽然你复制过来的文字会保持之前的字体,但是如果你在微信公众号里面直接打字,那个字体和你复制过来的字体是不一样的!

而且由于编辑器里面根本没有【字体】这个选项,你都无法重新把所有文字改成一致的字体!!

就算是行距这种简单的事情,也经常有调来调去就是不统一的情况。

【例 3:序号】1⃣️

更可怕的是……如果你复制过来的文章里面有序号(数字或者圆点),千万别在编辑器里面修改,否则你会陷入无限崩溃的(后文会继续说到这个坑)。

【例 4:版本控制】

版本控制很差。

假设你在浏览器里面手滑一下,或者同时使用【订阅号助手】【网页版编辑器】编辑同一篇文章,那……你一定会遇到【改过的东西怎么没了?】这样的情况。

说实话,我这一年,想弃更公众号的念头全部来源于【排版太费时间】,而不是【写作太费时间】。

我猜测也有很多人因为微信公众号奇差的排版体验,而选择用其他平台写作。


【1. 痛点】😾

对于一个【自由时间全靠挤】的博主来说,我只想花最少的时间搞定排版,多分配一点时间给写作以及其他的事情。

没有过微信公众号写作经历的小伙伴们可能很难体会我的痛苦(嘤嘤),我也多次求助于身边的各路朋友(有些有经营公众号的经验),想知道到底怎么才能快速搞定文章排版这件事

做公众号营销的朋友告诉我,用在线编辑器排版,最快大约要 10 分钟一篇,如果改的比较细有可能得花 1-2 小时。

当然,在问他们之前,我也是百度+知乎过很多方案的。

一圈咨询下来,流行的方案不外乎以下几种:

1. 135 编辑器
2. 秀米
3. i 排版

排名不分先后,因为我统统不喜欢。

不喜欢这些在线编辑器的原因如下:

- 我写公众号不是为了营销,打广告,吸引流量,我只是想找个地方写字而已;
- 所以,花里胡哨的排版(比如动图,引导条什么的),我根本不需要啊……
img
img
Figure 1: 秀米编辑器
- 而且,我每次排个版,都要先在某个软件(比如 word)里面写好文章,再导入/复制到编辑器的网站里面去进行排版,排版之后再复制到公众号编辑器(极其浪费时间);

使用在线编辑器的弊端在于,我在写作的时候,是没法最终确定排版样式的。

这就是我排斥一切在线编辑器/插件的根本原因。

【我的理想写作流程】✒️

1. 用自己喜欢的写作软件写文章,最好是 Markdown 语法;
2. 写作的时候可以直接看到最终排版的效果;
3. 写好之后,一键复制粘贴到微信公众号的网页编辑器,而且之前的样式不会被弄乱掉。

【2. 探索之路】🏃‍♀️

【1. Word】🙅🏻‍♀️

Peter 同学的最爱,我的……最不喜欢。

尝试过在 Word 里面写作复制进公众号,但是有字体和行距无法统一的问题。

【2. 公众号官方编辑器】🙅🏻‍♀️

那么,直接在公众号里面写?

首先,每次写都要登录网页(还要扫个二维码);

其次,排版特别麻烦(格式刷什么的还不如 Word);

而且,如果出现同步问题,辛辛苦苦写的字全没了(😿);

最后,看到那个界面完全没有写作欲望(个人喜好 ❤️)。

【3. Boostnote】🙅🏻‍♀️

这个软件是免费开源的,支持 Markdown 语法和自定义 CSS。

White 求职那篇,我开始尝试这个软件,界面如下:

img
img
Figure 2: Boostnote

整体感觉还是挺喜欢的,但是有个致命问题:

写 Markdown 的时候没有快捷键,比如想要加粗,Ctrl+B是没用的,必须自己输入**加粗**才行。
还有就是,对我来说,界面有点复杂……

【4. Markdown Here Extension】🙅🏻‍♀️

https://markdown-here.com/

后来又查到了一个浏览器的插件,叫 Markdown Here,支持直接在文字输入框里面粘贴 Markdown 文档,然后通过自定义的 CSS 一键转换成你想要的样子。

但是,每次改动 CSS 文档,都要重新到那个插件里面去复制粘贴一下,觉得还是有点浪费时间……

img
img
Figure 3: Markdown Here

而且不符合我【写作时所见即所得】的需求。

【5. Md2All 网页编辑器】🙅🏻‍♀️

http://md.aclickall.com/

在进行了多天的网络搜索之后,我发现其实很多人都和我一样,有微信公众号排版的痛点(并且觉得秀米之类的编辑器太复杂了);

所以有人就写了个开源的项目,只要把 Markdown 的文本放进去,就可以通过 CSS 来一键排版。

这个网页,怎么说呢,还是挺有用的,提供了一些适合公众号写作的 CSS 模板(我现在用的模板就是基于其中的一个模板改的),但这是个在线工具,不符合我的需求。

img
img
Figure 4: Md2All

其实 Boostnote、Markdown Here 以及 Md2All 的理念是我认同的,但是我执着地想要找到一款最适合我的软件,能让排版的耗时几乎=0。

经过漫长的探索之路,我对自己的需求更加明确了。

我的理想写作软件直接用 Markdown 写文章+使用 CSS 排版,实时展示效果。


【3. 终极解决方案】💯

一个月之前,我结合之前所有的排版经验,摸索出来了一套适合自己/懒人的写作排版方案。

这个方法,说来特别简单(非常纳闷,为啥没有人告诉过我这么简单的排版方式,也几乎搜不到相关的教程)。

我曾经私下问过一些排版比较简洁的公众号运营者,请教他们是如何进行快速排版的,但是没有一个人回复我……💔

我觉得知识就应该分享,虽然我到现在还是不知道别人到底怎么排版,但是接下来我会详细讲解一下我的快速排版方法 🚀。

如果你准备/正在进行公众号写作,并且像我一样喜欢多花点时间在内容上,下面的方法请务必要看!!!

【Typora + CSS】🎉

首先,你只需要一个软件,就是 Typora(https://www.typora.io/)。

Typora 有 windows 版本和 mac 版本,满足不同操作系统用户的写作需求。

没有手机版,我本身也不习惯在手机上写作,所以对我来说无所谓。

而且,所有的文档都是以.md 的形式存在你的硬盘上的,你可以用任何一个 markdown 软件打开这个格式的文档。

价格:完全免费 🆓,没有所谓的 Pro 版本,所以不会三天两头地提醒你升级付费。

界面:是我用过的写作软件中最简约的一款,打开它之后,你只需要专注内容,不需要考虑其他

img
img
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!)。

img
img
Figure 6: Themes

想要找到存放 CSS 的文件夹的位置,请点击File -> Preference

img
img
Figure 7: Preference

然后Appearance -> Open Theme Folder

img
img
Figure 8: Appearance

恭喜你,找到 CSS 文件的存放位置啦!(下图的wechat.css就是我的微信公众号排版文件)

img
img
Figure 9: Theme Folder

【3. CSS 文件】

最后,你还需要有一个适合微信公众号排版的 CSS 文件,以及,了解微信公众号排版的一些坑。

CSS 文件可以直接用 Md2All 里面提供的模板,稍微改改就行。


【4. 我踩过的坑】🕳️

【坑 1:图片】

微信公众号是不支持图片复制粘贴的,也就是说,你在 Typora 里面放的图片,复制进官方编辑器之后,全部会消失(是不是很坑)。

img
img
Figure 10: Typora 里面的图片显示正常 👌
img
img
Figure 10-0: 微信公众号里面没有图片了 😢

【解决方法】

通过微信公众号的图片功能上传图片(如果想给自己省点麻烦,就根据文章的使用顺序,用 1,2,3,4 的编号来给图片文件命名)。

img
img
Figure 10-1: 上传之前先编号

PS:有些教程会建议把图片传到七牛之类的图床网站,但我个人暂时没尝试过(而且,这种方式的弊端在于,图床链接一旦挂掉,你的文章就。。。。悲剧了

img
img
Figure 10-2: 挂掉的图床链接无处不在

【坑 2:序号】

我是一个比较喜欢用 1,2,3 或者小圆点来梳理文章逻辑的人,但是微信公众号偏偏对序号非常不友好!!

比如我现在的 CSS 里面把序号设为蓝色,在 Typora 显示的样子和我想象的一样。

img
img
Figure 11: Typora 里面序号显示正常 👌

但是,复制粘贴到微信公众号会变成这个样子(不光颜色没了,字体以及大小都和我其他的内容不一样,强迫症的我完全接受不了!):

img
img
Figure 12: 微信公众号的序号样式会乱掉 😢

【解决方案】

既然你不支持序号的自定义样式,那我就不用了呗。

我把 5 级标题的格式定义成了我想要的蓝色加粗样式,每次想要用序号的时候,就直接 Ctrl+5,然后写个数字就 ok 了~(是不是很聪明呀哈哈)

1. 这样
2. 我就
- 不怕啦!
img
img
Figure 13: Typora 序号显示正常 👌

复制进微信公众号的效果(完全一样):

img
img
Figure 14: 微信公众号序号显示正常 🍺

【5. 结语】

我使用 Typora+CSS 的方法进行排版已经有一个多月啦,从 White 求职记那篇开始进行摸索,到现在已经熟练掌握这项排版技能了。

大家可以发现,我之前的文章是风格是这样的(比较不统一,因为每次都是手动排版,好浪费时间啊!!!):

PS: 下图右上方那篇是用 135 编辑器排的,耗时至少 4 小时……

img
img
Figure 15: 手动排版效果(不一致)

采用了最新研究成果之后是这样的(是不是看起来舒服多啦~~~):

关键是,现在我几乎不花时间在排版这件事上(除了传图片),哦吼吼吼~~~~😸

img
img
Figure 16: 现在的高效率排版(一致)

如果你没有公众号的话,就记得下载个 Typora 吧,超级好用,我之后会另外写文章说这个软件。

对了,别忘了学一下 Markdown 的语法哦~


Talk to Luna


Support Luna