如何排版微信公众平台的文章?

微信公众平台的图文编辑能力个人觉得就是一超级大BUG,但是还是看到不少图文消息的排版十分美观,他们是如何做到的?
关注者
27001
被浏览
1410294

本文发布于半撇有道儿(banpie),转载请注明出处,谢谢。

更新日志:

  • 20161029: 把Markdown Here 的自定义CSS代码开源了,基本修复了Markdown渲染无法实现两端对齐的问题。
  • 20151229: 网友补充道目前的新版微信公众后台里,已经不支持插件转换了,我自己尝试了一下,还是支持的!

一、视频版(更直观):

【完整课程】微信公众号排版高级指南 - 半撇私塾 - 项目制的在线新媒体大学

【公开课程】新媒体自习室 - 半撇私塾 - 项目制的在线新媒体大学

二、代码版(更粗暴)

Markdown Here 自定义CSS代码传送门BPteach/CM310-Wechat-Advance-Layout-Exercise-Files


三、文字版(更全面)


增长骇客的目标是构建一个自动化的营销机器,我觉得对于新媒体排版来说,核心的指南就是构建一个自动化排版的机器。要实现这个机器的构建,需要三个部件:

  1. 公众号排版设计规范;
  2. Markdown 语法基础;
  3. Markdown here 渲染排版;

3.1 公众号排版设计规范



3.2 Markdown 语法基础


我觉得用markdown书写,然后渲染一下,文章结构清晰而且简洁。


今天教你如何在“简陋编辑器”的现有条件下,利用Markdown+扩展插件来优化微信文章的排版

Markdown是一个极其优美、简洁的书写语言(不是编程哦!)。一旦使用,极易上瘾!


3.2.1 Markdown是什么:(下文引用自简书:Markdown——入门指南)

Markdown 是一种轻量级的「标记语言」,目前也被越来越多的写作爱好者,撰稿者广泛使用。请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,学习成本很低,且一旦熟悉这种语法规则,会有一劳永逸的效果。

Markdown简洁的语法代替排版,而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。它使我们专心于码字,用「标记」语法,来代替常见的排版格式。例如此文从内容到格式,甚至插图,键盘就可以通通搞定了。


3.2.2 使用Markdown语言写作的好处:

  • 纯文本,所以兼容性极强,可以用所有文本编辑器打开
  • 让你专注于文字而不是排版
  • 格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书等
  • 结构清晰,排版美观,易读性强

3.2.3 Markdown简明语法

  • 标题:对于文章的标题1、标题2,你只需要在文字前面加上对应数量的#号,Markdown会自动渲染出格式。
  • 列表:在 Markdown 下,列表的显示只需要在文字前加上 - 或 * 即可变为无序列表,有序列表则直接在文字前加1. 2. 3.符号,再在符合和文字之间加上一个字符的空格即可。
  • 引用:如果你需要引用一小段别处的句子,那么就要用引用的格式。你只需要在引用的文本前面加上一个 > 和空格即可,例如:

更多Markdown语法,点击查看Markdown——入门指南。(上图转载自简书)



3.3 Markdown here 渲染排版;

  • 在Chrome上安装markdown here插件
  • 右键点击“选项”,在配置渲染CSS中自定义代码(高级,可选)
  • 在微信公众后台使用Markdown语言写作
  • 按住快捷键Ctrl+Alt+M,对Markdown文章进行渲染

至此,什么引用符号、标题样式、分割符、代码栏等样式就一一具备了。拿去得瑟吧!