微信公众号

如果没有写公众号的需求,本篇略看即可;直接跳过,也是可以的。
本文并无实质内容或对应源码,如果自己需要定义一个公众号主题模板,建议重点理解本文的内容。

微信公众号排版与 Markdown

微信公众号后台编辑器是富文本编辑器。所谓富文本,就是类似 Word 支持多种(花红绿柳般的)文字格式、插图、视频、投票等多种可视化元素的编辑器。
首先,富文本编辑器的开发难度偏高,会产生许多的细节问题需要后续不断改进。希望未来的你不会遇到这种技术需求,如果真有这个需求,且自己是团队的 Leader 或者 Startup 的创始人,那么需要考量跟产品的用户群体质量契合的前提下,是否可以放弃富文本而采用普通平文本或者 Markdown 编辑器。如果不是没有办法,最好不要在技术层面碰这类需求,过于繁杂的细节会降低成就感。

因为考虑自身用户群的特性,微信公众号提供的必然是富文本编辑器,对我们而言也必然是书写体验度不够的。再如何改进,也难以突破这个桎梏,我们可以将其理解为产品本身的物理边界。
作为效率和体验的追求者们,基本选择 Markdown 语法完成写作,因为好的写作 App 可以让你在极佳的写作状态中不被格式干扰,从而处于一种『流』的状态。完成写作之后,再将其发不到微信公众号平台上即可。

公众号需要排版吗

需要!

也同样理解一些朋友,专注于内容本身,不在乎外部如何呈现,一般也限于用上 Markdown 即可。原因有三:

  1. 反正 Markdown 采用的语法不复杂,都是常用的普通段落;
  2. 反正最终 Markdown 套用常用的样式后,不会丑;
  3. 节省时间,不花精力去折腾了。

也同样提供另外几个原因,或许可以考虑花一点时间去尝试与了解下:

  1. 花时间的只是在样式模板上,模板完成了,发布最终格式的时间都是可忽略不计的;
  2. 在文字的基础上,传达一种美学的意图;
  3. 在折腾中,加深对 排版 的理解,以形成自己的见解。
  4. 如果使用现成的样式模板,那基本上也就不花时间了,专注于内容即可。

微信公众号支持的并非全部的 HTML+CSS 属性,有限制的条件下,对于初学者来说看似不友好,其实就结果来看,反倒是一次次闯关的可能,也特别容易遇到 百思不得其解 的情况,想明白了就知道怎么解决了,或许还能推断出是微信公众号本身的限制并想办法绕过去。
等能真正实现自己最终的排版效果时,其实也意味着技艺又往前精进了一步。

现在的你应该对 HTML+CSS 的技术,即使没有了然于胸,也应该能上手写了。面对纯文字的 排版,思考的方式应该跟零技术基础有不同的地方,起码不会只想着在技术层面上如何实现,还会考虑到技术之外的。
这个 排版 也不只是 CSS 的样式,还应包括在书写过程中比如标点符号的应用、段落的书写格式、甚至包括每段字数的要求、长短段落的风格确定、中英文之间的空格 .etc
如果新媒体的内容编辑,是交由一个团队或者多人的,我们应该将排版的要求确定下来,成为可遵循的标准;这样可以保证稳定的文稿输出质量。
反倒如果只一个人,遵守自己的规则就可以了,潜移默化而不强求自己。比如我中英文的 : 会用混,也懒得改,其它地方则比较注重标点符号,会有意识地减少第一人称代词的使用,中英文之间如有必要会保持一个空格。自己并不欢喜别人给定的规则,你或许也曾留意过题目类似《中文排版指南》的文档并觉得可遵守之,而我不以为然。
另外,我们也会遇到关于文字(或图文)排版的现实场景问题,比如考虑到手机小屏幕的阅读,行首不缩进比较美观,而小屏幕场景中,文章的段落感应当比普通纸质版上的更明显才会更友好。
由于电子阅读跟纸质阅读是截然不同的体验,特别是碎片式的电子阅读,会有扫描式跳跃的特点,再如何努力,也是极难做到精读的。所以,在处理文章内容的排版的时候,还需要考虑下文章本身最终视觉上呼吸感的节奏,必要的插图,看似并无实质内容意义,其实也起到了呼吸感调节的作用,对于读者阅读而言,是更好的体验。
以上,个人一些粗浅而琐碎的想法,后续如果你需要处理类似的问题,希望多少能起到抛砖引玉的作用。

采用的工具与技术

其实很简单,就是 Markdown + HTML + CSS 的组合。
如果你使用 MarkEditor,那么使用 导出 --> 微信公众号主题 的主题生成器或者在生成了主题的基础上再自定义,具体的帮助参考 App 内的说明,或者 ME (MarkEditor 的简称) 线上的帮助。简单来说,就是在 ME 内调整微信公众号排版的 CSS 样式,如果初始时,样式的 Debug 不方便,可以 ME 内视窗 > 预览于 Web 浏览器,在浏览器上再进行 Debug。
如果使用免费的 Markdown.app,那么务必先在 MarkEditor 的试用版上,在工作目录的设置上,自定义 模板相关的内容,这些设置项在 Markdown.app 中也会生效。前提是 Markdown.app 内确保所有文章直接位于工作目录之下,使用这个特殊码: M6PrULW2PM9KC7rGfblmlleYVNA0oHa+J7QoiJ1yst3E6iBjOaA3b2dvxuWk3hZxJwrOifWNXNwgm0hwiuDgXPKjke4u3dWy 可以解锁 Markdown.app 内的文件列表功能。
MarkEditor 与 Markdown.app 的 Markdown 解析为 HTML 的引擎跟市面上常见的并不一样,有更细腻的扩展,自定义 CSS 样式的时候,可控程度也会高出不少。
如果使用其它 Markdown 写作 App,可以使用 Markdown Here 的浏览器插件,它能完成 Markdown 的解析,并加入对应的 CSS 样式进行渲染,然后将最终的富文本格式复制到粘贴板中。

一些建议

重点是 Debug

一般定制微信公众号模板是在已有的模板基础上,然后根据实际视觉风格,一块一块进行再调整。
由 HTML+CSS 渲染后,其实也就成了富文本格式,粘贴到微信公众号的后台,这个时候可以看到效果是否完全呈现了。当然,最终需要在手机设备上预览,才能确定视觉效果是否真正达成。
重点是 Debug,而且不只是 Debug HTML+CSS,更重要的是确认微信公众号页面上正文内容的样式是否正确,如果不正确,需要在源头调整,再复制粘贴。你还会发现, Debug 微信公众号后台的页面,跟之前 Debug 其它页面的时候略微有点不一样,因为这时 HTML 页面内通过 iframe 这个 DOM 标签,嵌入了另一个 HTML 页面。

微信公众号的格式,因为有其封闭性,并且还是处于持续更新的状态中,可以预见你会遇到一些细节问题,这时候就要灵活应对了。比如一个 body 上的样式突然不被公众号后台识别了,那就换个思路,将每个段落 (P标签) 进行样式的对应;比如一个列表的样式曾经可用,突然就不能用了,实在找不到思路,可以先用微信公众号自己的编辑器处理,然后使用 Chrome 浏览器对其 Debug,找到其 HTML 结构发生了什么变化……

可以参考别人的设计

可以多翻翻,或者多收藏一些自己觉得阅读、排版、布局不错的文章,然后分析,并最终形成自己想要的排版布局与配色方案。
如果一时间拿不定主意,就多看多收藏,然后一边写代码一边试,你会更清晰自己想要的排版,以及 行高颜色缩进间距填充边框线条背景色 这些常见属性如何配合能更匹配自己的偏好。慢慢地,这些细节上的调整就会被自己内化,以后也就不需要再从别人现成的设计中获取灵感了。

微信公众号 HTML、CSS 上的小贴士

  1. 微信公众号内的 CSS 规则,不都是标准的,需要自定义的话,第一次调试会花一些时间。
  2. 背景色如果要用全白,防止被过滤,使用#fefefe这个色值。
  3. padding 多数时候比 margin 会更容易起作用,后者很容易被过滤掉。
  4. section 这个标签的样式应用比较多,相对不容易被微信过滤掉。
  5. 由于微信公众号会对列表进行重新的构造,直接定义 ul、ol 的样式会无效,所以要额外定义样式在其父对象 .md_block_section_for_ul 或者 .md_block_section_for_ol 之上。