码字工作者的发文姿势—— 用MWeb+Markdown Here+七牛轻松实现多平台发布

1.对于写作你最头疼什么

对于大多数码字工作者来说，随时随地记录灵感，构思文章，集中书写，其实是一件令人感到享受的事儿。当这一切都完成，为了能够有更广泛的读者阅读，需要在不同平台上发表的时候，问题就来了。

在不同的平台上发表之时，最痛苦的两件事情莫过于：

1. 每在一个平台发布一次，都要重新检查调整一遍排版；

2. 文章的所有插图，需要在每个平台上重新上传一份。

这？！好想shi有没有？…尤其是微信公众号，不知道大家有没有遇到过，用Chrome浏览器，在上传图片时经常会遇到没有响应的时候，面对这种情况，你所付出的时间成本，以及精神成本，不言而喻。

那有没有一种自动化的方法，当编辑完一篇文章后，不用再一次一次地解决排版问题，以及图片上传问题，直接可以一键发表到不同的内容平台？今天就给大家介绍一套我自己践行的方法，让你从此迎娶高富帅/白富美，实现财富自由，走上人生巅峰。喂，醒一醒…… 总之，是让工具来解放你的生产力，你就有更多的时间用于学习思考。

2.我目前的发布流程

我目前的发布流程只需三步：

1. 在MWeb中复制Markdown内容；

2. 粘贴到浏览器中各大平台编辑器中；

3. 按住 CTRL + ALT + M 一键排版，点击发布。

图片无需一次次重传，10秒钟轻松搞定多平台发布，是不是很心动？别急！我们一步一步来学习。在正式操作之前，我想现针对一些基本概念和原理进行一些科普。

3. 关于Markdown及图床的一些科普

这里我们会用到Markdown、MWeb、图床、七牛、Markdown Here，这些都是啥，有什么作用，下面分别来向大家一一介绍。

3.1 为什么使用Markdown？

学过一些HTML、CSS基础的同学一定清楚，CSS的出现是为了使内容和样式相分离，如果要改样式只需改动CSS即可。同样Markdown出现的根本目的也是使书写内容与实际展现样式相分离，书写者只需更专注于书写本身，只需通过Markdown标记语言来分清文章层次结构，而无需把过多精力浪费在重复的排版中。

首先Markdown是一门标记语言，不要害怕，你一分钟就能入门，学习成本极低，而一旦熟悉了这种语法规则，会有一劳永逸的效果。如果你想了解更多请自行搜索。但我强烈建议你直接下载一个Markdown编辑器上手实践就行。语法学习强迫症患者可阅读如下链接。

创始人 John Gruber 的 Mardown 语法说明

Markdown 中文语法说明

3.2 Markdown的编辑器

市面上的Markdown编辑器成千上万，单是在少数派上搜索Markdown就能搜出一大堆。过去也使用了几款市面口碑好的，比如Ulysses、Bear、DayOne…花高价买了Ulysses的Mac版和iOS版，在这个颜值即正义的时代，我不得不承认，这些工具都好正。但让我一直头疼的是图片编辑和发布的问题。即使在编辑器里的样式万般妩媚动人，到最后发布的时候依然面临需要借助其他工具解决图片发布的闹心问题，操作体验真心不够自动连贯。（注：之前用图床工具iPic，单就工具来说不错，只是整体写作发布流程还是不够流畅。）

有一天图片问题甚至影响到我写作的时候，我开始想，这个问题肯定有很多人早就遇到过，那肯定有一些解决方案，MWeb的偶遇解决这一难题，虽然其颜值可能比Ulysses和Bear在某些方面要低一些，但其对于码字工作者实际使用场景、流程、功能的把握已经远远超过其他。

3.3 图床

文章中插图的问题怎么解决？如果写一篇文章，不用每次在不同的平台发表时还要重新再上传一遍图片，不光是上传图片的问题，你还要每次发布时都在原文中修改一遍图片链接呢，最好的解决方式就是把图片都上传到一个公有服务器，这样所有平台发表的文章原文就可以一样了，图片链接地址就是公有服务器上的图片外链。图床就是专门存储这些图片的空间，说白了就是一个图片服务器。

图床的话因为之前并没有用过太多，知乎了一下发现七牛评价最高，所以就直接注册了七牛，并且MWeb提供对七牛的支持，至少现在感觉还不错哦。

3.4 Markdown Here

在早先，我在使用了一段Mardown时间后，虽然Markdown在编辑器中都够完美展现排版效果，但怎样真正用到自己的写作发文过程中，是我一直面临的问题。直到有一天看到李笑来老师的一篇 Markdown Here教程才明白，哦，原来Markdown是这么玩的。Markdown解决了内容与样式相分离的问题，那样式这块，Markdown Here提供了便捷的解决方案。

Markdown Here设置界面内可以配置你希望文本渲染成的CSS样式。你可以个性化定制你的CSS。关于自定义Markdown Here CSS样式的问题，以后我另开专题来介绍。
接下来重点来了，要实现一键发布的梦想，只要完成以下前期配置操作就可以啦。

4. 工具配置 Step by Step

4.1 注册七牛并创建图床

1. 注册登录：七牛云开发者平台官网 https://portal.qiniu.com/signin ；

2. 添加对象存储：「登录首页」→「对象存储」→「立即添加」；

3. 创建存储空间：这一步就是为你创建图床的过程。

4. 为存储空间命名：你需要为你的存储空间取一个名字，可以根据你目前作品/项目名称来命名，比如我目前的专题项目叫「整理我的人生」,那我就命名为「clearmylife」。

5. 选择存储区域：根据你所在的区域或你面向读者用户的区域选择一个，如果你不知道，那就选择默认的吧。

6. 访问控制：这个默认为公开空间。填完之后，直接「确定创建」。至此你已经创建了属于你自己的图床。

7. 另外你还要记录3个信息，因为一会在配置MWeb图床的时候会用到。分别是 Access Key、Secret Key（在页面「个人面板」→「个人中心」→「秘钥管理」中有显示，如下图）、图片URL前缀（如下图）

4.2 配置MWeb

1. 下载安装MWeb：点击MWeb官网下载MWeb并安装；

2. 图床设置：点击右上角「分享」，在下拉菜单中选择「把本地图片传至图库…」，点击「新增服务」，会弹出「偏好设置—发布服务」

按照下述步骤来添加本地图片上传服务（图床）

1. 名称：随心所欲，你自己起个名字就行；

2. API地址：一定要填写你在七牛上申请存储空间机房对应的API接口。可点击「问号」查看详细内容。如：华东：http://upload.qiniu.com ；华北：http://upload-z1.qiniu.com ；华南：http://upload-z2.qiniu.com 。

3. 空间名称：七牛开发者主页→对象存储→你刚刚添加的空间名称。

4. Access Key：「个人面板」→「个人中心」→「秘钥管理」中AK位置，记录过。

5. Secret Key：「个人面板」→「个人中心」→「秘钥管理」中SK位置，记录过。

6. 图片URL前缀：「对象存储」→「更多操作」→「内容管理」→「外链默认域名」，或直接复制一张你上传图片的外链，截取前缀即可。

7. 验证：填完之后，点击「验证」，如果完全按照上述步骤，你一次就能通过！至此，恭喜你，你已经成功了99%了。

4.3 配置Markdown Here

1. 在Chrome上安装Markdown Here插件:

2. 安装完后在Chrome浏览器右上角会出现Markdown Here插件图标，右键点击图标，选择选项，修改「基本渲染CSS样式」

3. 如果对于CSS并不了解，我建议你，先拿来主义，先尝试，再研究。比如说，先拿来李笑来老师的版本吧 https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2 复制Github上的代码粘贴至下图基本渲染CSS中。

注：如何根据自己的审美修改Markdown Here CSS 样式，后续会单开一篇文章介绍。

5. 一键发布

能跟着一步一步操作到这里，不容易，原谅我的啰嗦。
接下来就是见证奇迹的时刻啦！

1. 在MWeb上全身心写一篇文章（图片直接贴，是不是感觉很爽？），写完后，点击「分享」→「把本地图片传至图库…」

2. 在「选择本地图片自动上传服务」的对话框中，点击「上传图片」。此时你文中的图片就全部上传至你的七牛图床上了。

3. 图片上传完后，你会看到远程那一行会显示图片远程连接地址。

复制粘贴发布

1. 点击上图「复制Markdown」（这个Markdown中本地图片链接已经完全转化为了远程图片链接）；

2. 然后打开打开微信公众号后台素材库的编辑器，粘贴。（不止是微信公众号哦，知乎，新浪微博发表头条，简书这些个通吃）；

3.Ctrl+Alt+M 一键渲染CSS样式；

一下是渲染前后的样式对比：

6. 为什么微信公众号图片没显示

这时候你应该迫不及待地准备预览发布了。当你按照上述步骤操作后，文章保存预览都可以清晰看到图片，但发到手机上却看不到，别急，由于微信后台还要将你的这些图片重新上传到微信的服务器，先压缩，再打水印，需要一些时间。