浅谈微信公众号排版（三）———— 高级进阶

此篇将把之前写的小工具放出来方便大家排版。
接着上一次的说，上一篇的推送我介绍了微信公众号的排版原理。今天我会根据这个原理来教大家写一个自己的专属排版工具（以及花式排版），还会教大家如何看别人是如何排版的。我会详细地说一下 JavaScript 版本的实现过程。

来个花式的吧！

首先说明一下，我现在还没有搞定如何直接将后缀名是「md」的文件（也就是 Markdown 文件）直接进行渲染。所以我们下面所有的内容都是基于我上一篇所说的编辑器生成的 HTML 文件。

输出的 HTML 文件看一下源代码就可以发现其实就那些标签，但是这些标签都是不带 CSS 的。所以我们要把所有的标签全部替换成带有 CSS 文件的。这里用到的是十分古老的 jQuery 框架。

在 jQuery 中，它提供了几个函数，一个是each，这个可以找到你 HTML 文件里的全部的某个标签，另一个叫做replaceWith，这个函数可以替换标签为其他的内容。具体我们来看一个例子。

现在很多微信公众号都喜欢在最开始加一个「完整阅读需要 5 分钟」这种。具体是怎么实现的呢，我把我实现的和大家说一下。我事先说明我的肯定不是最合理的，但是是可以用的。我举我自己用的排版方式给大家说明。

现在我想实现这种效果。

首先我现在要替换 h1 标签，因为我用的编辑器 h1 标签默认是题目。当我看了很多人的时间之后我发现，其实 分钟 = 总的字数 / 600。那么我们怎么实现呢，老样子，看看这种效果的代码是什么样的，然后复制过来。

然后我们开始写代码。这个地方它用了 section 标签 + p 标签，还配上了文字。看上去复杂，其实不复杂，还是 HTML 的操作。那么开始写代码了（所有代码我都会发布出来，这里就直接贴图了，浏览效果会好点）。

我解释一个地方，里面的 $(this).text() 这句话。这句话的意思是获取到这个标签里的文字，因为我们在标签里写的有文字，不能替换把文字也替换了，所以要获取到它。所以整个代码的意思就是，我把之前的标签全部替换成新的标签，把数字进行计算填进去。这里通过 js 代码获得到我填的数字，然后用它去除 600，得到的数字就是需要阅读的分钟数了。

所有的花式排版最终会化为一个问题，这个东西的 CSS 是什么样的呢？

来看别人的排版吧！

首先我想说明，别人如何排版也是有版权的，这是需要注意的。

浏览器都自带了调试功能，非常简单，选择你想看的标签内容，然后右键选择调试。

然后浏览器下方就会出现它的标签了。

花式排版推荐

其实有很多的排版是很好的，比如可能吧，整个系列没有他的文章启发是写不出来的。