一个码字工作者的写作工具 —— MWeb

由于 Markdown 格式简单易用，而且不受限于编辑器等影响，已经是写博客、写日志、写技术文档，亦或是用来写公众号文章的必备了。

也有很多很多关于如何利用 Markdown 和自定义 CSS 来排版公众号文章的，其中以 Jason Ng 的这篇《可能吧公众号的文章是如何排版的？》kenengba.com/post/3507.h…为典型。

其中一句话我很认同：

对我来说，写作必须一气呵成，排版不能中断写作。

写作写作，关注点和注意力应该放在写作内容本身上，至于排版，直接交给「自动化」来处理了。

今天我结合 Jason Ng 这篇文章的思想，和利用 MWeb 来说说我是怎么做到「自动化」排版的。

MWeb —— 好工具

好的工具自然能让我们事半功倍，在 Mac 系统，作为 Markdown 的编辑工具，MWeb 无疑是个佼佼者 (参考：喜欢 MWeb 的 8 个理由 | Matrix 精选sspai.com/post/33855)

我喜欢 MWeb 的理由有两个：图床功能和自定义预览功能。

图床功能

纵观所有 Markdown 编辑软件，貌似只有 MWeb 解决了复制、拖拽本地图片直接上传图床，生成网络链接，这极大方便了将写好的 Markdown 文章发布到任意平台，不用再考虑如何将本地图片先上传图床或者平台的问题了。

具体怎么设置图床功能，可参考以下文章：

为MarkDown写作软件MWeb配置七牛云图床空间 sspai.com/post/43598

一个码字工作者的正确书写发文姿势—— MWeb+Markdown Here+七牛实现一键发布 www.jianshu.com/p/c859ead1b…

自定义预览功能

相信很多 Markdown 都自带了这个功能，以 Mou 为代表。但它们更多的只是支持使用一个 CSS 样式文件。

而 MWeb 却可以使用文件夹，index.html 文件是预览代码的输出文件，具体如下所示：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
		<title>{{title}}</title>
	    <link type="text/css" rel="stylesheet" href="asset/default.css?v=20">
	   	<script type="text/javascript" src="asset/jquery-3.1.1.js"></script>
		{{head}}
	</head>
	<body>
		<div class="markdown-body">
			{{content}}
		</div>
	</body>
</html>

通过这个 HTML 代码，你就可以看出，在 body 中 {{content}} 放的是我们输入文章内容。

我们知道，在公众号正文「开头」和「结尾」我们都会放一些公众号说明，和关注链接等，如：

stormzhang

LinkedIn

这时候我们就可以把自己的开头和结尾内容放在{{content}}前后了：

    <body>
		<div class="markdown-body">
			<section class="body_header">
		        <img src="http://ow20g4tgj.bkt.clouddn.com/logo.jpeg" class="logo">
		        <section class="textword"><span class="text">本文字数：<span id="word"></span>，大概需要 <span id="time"></span> 分钟。</span></section>
		    </section>
			{{content}}
			<hr>
      		<strong>coding01 期待您继续关注</strong>
      		<img src="http://ow20g4tgj.bkt.clouddn.com/coding01_me.GIF" alt="qrcode">
		</div>
	</body>

避免于每次写文章时，反复复制粘贴首尾相同的内容，把注意力更加集中在写作内容本身上。

同时，我们可以在 asset 文件夹下放我们的 CSS 和 JavaScript，这和常规的静态网页开发没什么两样。

在写公众号文章的时候，你会发现只能内联的 CSS 有效，而额外引入的 JavaScript 都无效，所以我们并不能用 JavaScript 来达到制作花哨的网页效果。

但我们可以利用 JavaScript 帮我们操作 DOM，调整输出 HTML 网页内容。

很多文章说利用 Markdown Here 插件来排版，或者利用其他排版工具排好代码块了，但复制到公众号编辑器中保存后，就错行了，

其实在{{content}} 和 </div>是有一个「换行符」和「四个空格」，但在公众号编辑器保存时，「换行符」消失了

所以我们需要利用 JavaScript 为每个换行符替换为<br>，防止丢失。

$('pre>code').each(function(i, block){  
  var text = $(this).html();   
  $(this).html(text.replace(/[\r\n]/g, "<br>"))
});

在我看 Jason Ng 的文章时，他提到给每个 css 自定义标签加上 copyright，其实我们也能做到：

$("*").each(function(i, obj){
  $(this).attr('label', 'coding01 版权所有');
});

当然，如 stormzhang 的文章头部，都会有「阅读本文大概需要2.4分钟」，其实我们可以利用 JavaScript 实时计算文章字数，再计算大概需要阅读多长时间，直接实时变化头部输出内容。

总结

本文只是抛砖引玉，对于写公众号文章的朋友来说，利用好工具，然后制作出一套「自动化」流程，把我们的注意力放回写作本身当中。

至于利用 MWeb 还能做很多很多其它事情，如发布到「印象笔记」、「静态博客」等，都值得大家一试。

最后，没准我会把这篇文字推送给 MWeb 作者，也许下一版可以出一个「一键发布公众号文章」的功能，那也挺不错的。

「完」