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

本文字数:2976,大概需要 5.95 分钟。

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

「完」


原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeTest质量开放平台团队的专栏

如何快速优化手游性能问题?从UGUI优化说起

作者Feefi,加入腾讯多年,目前主要从事Unity项目UI开发及优化相关工作,曾获得国际软件设计大赛“成都创业金钥匙”奖。

1002
来自专栏北京马哥教育

学习Vim的四周计划

1512
来自专栏互联网杂技

新鲜出炉! Web开发人员必备资源

摘要:我们将会为Web开发人员提供多个资源。其中包括一个着陆页设计资源、两种降低屏幕刺眼程度的方法、一个用来实现拖曳网页布局的插件、一个用于整理date-pic...

3758
来自专栏JackieZheng

AngularJS in Action读书笔记6(实战篇)——bug hunting

  这一系列文章感觉写的不好,思维跨度很大,原本是由于与《Angularjs in action》有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的...

20110
来自专栏CDA数据分析师

有Bigger | 打造属于自己的 Python 编码环境

一个好的程序员必须善用各种工具提升自己的开发效率,和提升自己的幸福指数。另外,个人觉得vim还是值得自己重新一配的,我的配置过程基本都是在 读spf13的配置,...

2195
来自专栏用户2442861的专栏

如何评价 GitHub 发布的文本编辑器 Atom?

https://www.zhihu.com/question/22867204#answer-31728806

1852
来自专栏Guangdong Qi

iOS 各种图标

2555
来自专栏小轻论坛

这款功能强大的视频压制工具,用了就爱不释手了

为什么今天给大家推荐这个软件呢?因为最近工作需要,每天要处理一百多篇视频加水印的工作,主任老王给我们推荐狸窝全能视频转换器,相信用过的人都知道,软件界面上并不能...

1.3K3
来自专栏美团技术团队

【美团技术团队博客】前端组件化开发实践

前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

6295
来自专栏编程

python编程

使用python编写客户端不是一件很复杂的事情。比如说,基本上不管是mac版本,还是windows版本、linux版本,一般python都默认安装了Tkinte...

26910

扫码关注云+社区

领取腾讯云代金券