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

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

其中一句话我很认同:

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

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

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

MWeb —— 好工具

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

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

图床功能

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

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

  1. 为MarkDown写作软件MWeb配置七牛云图床空间 https://sspai.com/post/43598
  2. 一个码字工作者的正确书写发文姿势—— MWeb+Markdown Here+七牛实现一键发布 https://www.jianshu.com/p/c859ead1b493

自定义预览功能

相信很多 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://bimage.coding01.cn/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://bimage.coding01.cn/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 作者,也许下一版可以出一个「一键发布公众号文章」的功能,那也挺不错的。

「完」

Copyright © coding01 2018 all right reserved,powered by Gitbook该文件修订时间: 2020-02-01 22:20:20

results matching ""

    No results matching ""