背景

一直以来,微信公众号排版都是一个重复性高、步骤繁琐、耗时长的苦活。直接复制粘贴到公众号编辑器后,各种字号不一致、段落间间距过短、代码块字号及缩进错乱等问题一直困扰着公众号的小编,不得不每次复制粘贴后花费数十分钟不断调整排版。因此趁着这段时间调研了下微信公众号排版与一般网页间的区别,简单加了一个一键生成排版的功能。

使用方法

在帖子右下角即可看到一键排版按钮(目前仅开放给帖子作者及社区管理员):

点击后会打开新窗口,效果如下:

直接把新窗口中的所有内容全选并粘贴到微信公众号编辑器即可。

由于目前排版风格使用的是社区的排版风格(1-3 级标题 16px+ 蓝色,其它标题 16px+ 橙色,正文字号 14px,代码块字号 10px ),暂不支持自定义风格。后续根据此功能的使用情况再考虑如何增强。

已知问题

由于公众号对于代码着色的 <span> 标签存在不当处理,具有着色效果的代码块在粘贴后,无缩进的行会被自动合并到上一行末尾。不带有着色效果的代码块无此问题。
具体问题描述可查看:https://github.com/testerhome/homeland/issues/49

若大家使用中有其它问题,欢迎回帖或直接在 github 上提 issue ~

原理

公众号编辑器直接粘贴后,部分 css 或部分功能会失效。目前已知的有:

同时公众号网页中有个默认的样式表,这个默认样式表和 chrome 等浏览器的默认样式有一定差异,因此在手机端浏览的效果会和电脑端预览的效果有一定差别。

大部分情况下,排版错乱都和 css 有关。所以解决思路也很简单:新建一个模板,css 针对微信公众号的样式表进行定制,确保样式在手机端浏览正常。

  1. 新建一个 layout 模板,针对微信排版生成具体页面。页面内容直接就是 topic 渲染后的 html 。
  2. 新建一个 css 文件,针对微信内置的 css 样式进行调整,确保微信浏览器浏览效果符合排版需要。

具体代码变更大家可以查看:
https://github.com/testerhome/homeland/commit/c71c425639760e39c34e58f116e737fece428edd
https://github.com/testerhome/homeland/commit/b0433698e16f91d0bcd1445fa45535d8dd47e960

在微信公众平台上用 Markdown 写作
利用 Markdown here 排版微信公众号


↙↙↙阅读原文可查看相关链接,并与作者交流