社区管理 社区帖子添加 “一键生成微信公众号排版” 功能

陈恒捷 for testerhome管理委员会 · 2017年05月01日 · 最后由 debugtalk 回复于 2017年06月23日 · 1379 次阅读
本帖已被设为精华帖!

背景

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

使用方法

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

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

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

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

已知问题

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

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

原理

  • 排版错乱原因分析:

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

  • 超链接全部失效(但 css 格式不会丢失)
  • div 标签全被干掉
  • 代码块中若存在类似 </span>\n<span>\n 为换行符,实际上效果为换行,不会看到 \n 这个符号),中间的 \n 会被干掉

同时公众号网页中有个默认的样式表,这个默认样式表和 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 排版微信公众号

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 3 条回复 时间 点赞
恒温 将本帖设为了精华贴 05月01日 16:37

实用技巧,很不错

感谢分享!

在使用的过程中,如果觉得字体 14px 比较小,可以在生成的页面中修改 CSS 中的字号,然后再复制到公众号。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册