前言
准备工作
要实现上述的单次插图一键排版发文,首先你需要准备下面的几个关键工具:
1. 一台Mac(因为我们下面使用的编辑器是Mac Only)。
2. MWeb,这是一款国产的Markdown文本编辑器,也是我本人目前的主力码字工具,非常可惜目前只有Mac版(可在某宝数码荔枝上面买到正版,建议买正版支持作者)。
3. 一个七牛云的账号,直接到qiniu.com免费注册即可,每个账号有10G的免费存储空间,对于一般的公众号足够用。
4. 花10分钟时间学习Markdown的基本语法。一般而言我觉得会3级标题和加粗的标记就已经足够了。至于Markdown到底是什么,语法规则是怎么样的,不在本文的讨论范畴之内,网上有大量的小白教程,我相信你可以自行解决。
1.设置七牛云图床
这个步骤略微繁琐,但是你按照我下面的方法按步骤来操作即可,一劳永逸:
首先用你在准备工作中已经注册号的七牛账号登录进入七牛云的管理控制台页面,这时候你需要做的第一件事是添加服务,如下图所示,七牛云提供很多形式的云服务,这里我们选择“对象存储”,点击立即添加:
进入如下页面,这里我们只需给我们要添加的空间自定义一个名字,区域选“华北”(也可以选其他,但是为了接下来解释方便起见我们选华北),访问控制选择“公开空间”,然后点击“确定创建”。这样,我们就创建了一个图床存储空间,并来到如下界面,
我们需要在这里把上面图中测试域名下面的这个域名记录下来,然后点击页面右上角的个人面板,找到“密钥管理”,点击进入:
来到密钥管理界面后,我们看到了AK和SK这两行长长的密码,把它们分别记录下来:
至此,我们已经收集完成了所有必须的图床接口信息,这时候让我们再次回到刚刚打开的MWeb图床添加窗口,将刚才收集到的关键信息逐一填写进去:
Name和Bucket Name,直接填写你刚刚为你的七牛云空间设定的名字就可以。API URL,选择http://up-z1.qiniup.com(对应我们刚才设置的华北区域)。Access Key和Secret Key就是我们刚刚记录下的两长串密码,对应填入即可。最后填入Image URL Prefix,也就是我们刚刚记录下的那串域名,填入的时候需要在前面加上http:// 。下面的Image URL Suffix直接留空不用填。在最下面选项打对勾。然后点Validate按钮进行测试,这时候会跳出一个文件选框,你随便从电脑上选一个图片文件上传,如果跳出了下面的Success对话框,说明你的设置成功了:
2.为MWeb设定Markdown的CSS渲染样式
如果你已经熟悉了Markdown的一些基本常识,就知道Markdown跟富文本最基本的区别就是写作的时候仅仅对文字用一些脚本符号进行相关的标记,并不会进行任何格式的渲染,这样有助于写作者更加高效集中的完成写作任务,而后面美化和格式化的任务,则需要交给CSS了,CSS具体是什么我在这里不解释,你可以把它当成一个皮肤的概念,只不过这个皮肤是由一些代码规则组成的。准备好一套CSS脚本,对你写好文本中的Markdown标记进行渲染,就能达到一键美化排版的神奇效果。所以,接下来我们要做的工作就是要为MWeb设定一套日后用于发布微信公众号的CSS渲染样式。
再次进入MWeb的首选项,点击Themes,进入如下界面:
在这个界面找到 Preview CSS这一栏,点击旁边的Edit按钮,这时候会打开一个包含CSS文件的文件夹,我们需要做的就是把这个名为sample-css的CSS文件编辑成为我们日后想要渲染成的样子,跟我在之前两篇文章里提到的Markdown Here的渲染CSS其实是一个道理,如果你已经在使用Markdown Here并且已经有一套自己的渲染CSS脚本的话,那么这里只需要把那套脚本复制粘贴到这个CSS文件,替换掉原有的格式即可。如果你还没有的话,那么可以使用这套由半撇私塾制作的微信公众号CSS模板,也是我个人目前正在使用的一套模板,你可以通过下面的链接进入Github找到模板的源码:
https://jarodise.com/css
基本上这套代码可以直接拿来使用,如果你觉得一些地方不满意的话也可以在这个基础上进行简单的修改,例如字号,颜色什么的,不过这个可能需要你有一点HTML/CSS的基础,其实也不是很难。
完成了这一步,前期设置工作就大功告成了,这部分工作你只需要做这一次,一劳永逸。接下来编辑与发布的工作就很轻松了。
3.编辑与发布
我们在MWeb里可以非常优雅地使用Markdown方式进行文本的写作,并且可以使用拖拽的方式进行插图, 比如我下面用Markdown写了一篇示例文章,用Markdown标记了一级标题,二级标题和引用等格式,并且添加了一张图片,如下图所示:
那么我们如何将在MWeb里面编辑好的文章发布到微信公众号和知乎等平台呢?首先,我们需要将插到文章的图片上传到之前设置好的七牛图床上,这一步非常关键,因为没有这一步,我们就无法实现一次插图,多平台发文的便利,这也是我们今天介绍这个发文流程的最核心意义所在。
图文编辑好后,首先点击MWeb窗口右上角的发布按钮,出现下拉菜单后找到“Upload Local Images to”这一项,如下图所示:
点击后进入如下图所示的图片上传页面:
这个界面有几个注意事项,首先最上面的选框应该是我们刚刚在七牛图床设置步骤已经设置好的那个图床服务。确认之后就可以点击“Upload Images”按钮进行上传了,上传的过程中你会发现每张图片后面的Remote字样后随着图片上传进程会出现一串网址,这就是你的图片在云端的地址了。上传完成后,每一张插图都应该对应一个云端的网址。
发布时候你只需要将这个预览界面的图文复制,然后粘贴到相应平台的编辑器窗口即可。经我本人测试,这个方法目前适用于微信公众号,知乎/知乎专栏,新版豆瓣日记,今日头条等多个平台。
结语
之所以写这篇教程,是因为有太多的自媒体从业的朋友跟我抱怨,每次排版插图发布流程比码字还要浪费时间。相信学会了今天这篇教程里面的方法,你在日后的自媒体编辑工作中一定可以事半功倍,把更多的精力放在内容创作上面。
本文系Jarod Zhang原创,如需转载请联系作者授权。坚持原创不易,你的打赏和转发是我继续创作的最大动力。
数字游民部落致力于推广目前在全世界日益流行的数字游民(Digital Nomad)生活方式,和Lifestyle Design的方法和理念。
微信公众号:数字游民部落
领取专属 10元无门槛券
私享最新 技术干货