/wx-article-starter

对微信公众平台的文章使用Markdown进行高级排版的样板文件

Primary LanguageCSS

在微信公众平台上用Markdown写作

为什么?

Markdown写作是我挺喜爱的一种方式,毕竟纯文字的方式写作会受到的干扰最少了,不用担心排版的问题,不用担心字体的问题,一切都是已经预置好了,当然配合CSS的强大可定制特性更是可以让效果随心所欲了,这里便是利用这一特性进行定制的。

话说,在这里简单补充一句,Markdown凭借其简单的语法,更易于学习和输入的特性,近年来赢得了大量专业写作人士的喜爱,如果写作是你生活中不可缺少的一部分,而你却尚不了解Markdown,那现在就是时候去了解一下了。

好的,回到这里,如果你决定继续读下去,说明你已经有要使用Markdown写作的觉悟了,我们继续探讨微信公众平台的情况。

为了两个目的,一是我的文章可以不但用于微信公众平台发送,还可以发至博客或其他更多的地方而不需要重新排版,并继续拥有丰富的版面效果,二是可以方便的写作,于是毫无疑问,本来就已经是我写作工具的Markdown定然当选了。

微信公众平台有一些限制使得一般普通的复制粘贴Markdown生成的文章都会有些欠缺,通过网络搜寻后发现无人解决,故亲自上阵解决之,这里便将步骤和情况的共享出来了,方便大家参考和使用。

如何使用?

前置条件

  • pandoc 请从官网下载安装

方法一

  • 获取项目文件:
$ git clone https://github.com/wizicer/wx-article-starter.git
  • 添加你自己的Markdown文件,并以.md作为扩展名
  • 执行build.bat生成html文件
  • 打开该文件并将其拷贝粘贴至微信公众平台的编辑窗口

方法二

  • Fork该项目
  • 将该项目下载至本地
  • 添加你自己的Markdown文件,并以.md作为扩展名
  • 执行build.bat生成html文件
  • 打开该文件并将其拷贝粘贴至微信公众平台的编辑窗口

如何修改样式?

以下具体步骤对于不需要修改样式的用户可以忽略

微信公众平台作为众多消息分发的一个终端,有其特殊性,我发现的限制如下(可能不完全,会不断补充的):

  • 过滤掉<div>/<a>标签(即不可全页背景,不可有链接)
  • 预置了一个css文件,会将未明确写明的css样式变化掉

在了解以上限制的基础上,就好做了,按如下步骤:

  • 准备一份使用Markdown生成的文档
  • 关键步骤:下载了一份微信的预置css存为override.css,并link到页面上
  • 将我们自己创建的style.css也链接进来,我是选取我以前使用的Markdown的样式
  • 调整style.css文件,并在浏览器中预览,直到效果满意为止

其实关键点就在微信预置的那个css文件。

注意:本文将会不断迭代更新,获取最新版本请查看网页版