一个码字工作者的正确书写发文姿势—— MWeb+Markdown Here+七牛实现一键发布

封皮

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

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

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

  1. 每在一个平台发布一次,都要重新检查调整一遍排版;
  2. 文章的所有插图,需要在每个平台上重新上传一份。

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

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

2.我目前的发布流程

我的发布l流程

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

  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 语法说明:
http://daringfireball.net/projects/markdown/syntax

Markdown 中文语法说明:
http://zh.mweb.im/markdown-syntax-guide-suggest-version-zh.html

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
  1. 添加对象存储:「登录首页」-->「对象存储」-->「立即添加」;
  2. 创建存储空间:这一步就是为你创建图床的过程。
  3. 为存储空间命名:你需要为你的存储空间取一个名字,可以根据你目前作品/项目名称来命名,比如我目前的专题项目叫「整理我的人生」,那我就命名为「clearmylife」。
  4. 选择存储区域:根据你所在的区域或你面向读者用户的区域选择一个,如果你不知道,那就选择默认的吧。
  5. 访问控制:这个默认为公开空间。填完之后,直接「确定创建」。至此你已经创建了属于你自己的图床。
  6. 另外你还要记录3个信息,因为一会在配置MWeb图床的时候会用到。分别是 Access Key、Secret Key(在页面「个人面板」-->「个人中心」-->「秘钥管理」中有显示,如下图)、图片URL前缀(如下图)
创建存储空间
记录AK|SK
图片URL前缀

4.2 配置MWeb

  1. 下载安装MWeb: 点击MWeb官网 下载MWeb并安装;
  1. 图床设置:点击右上角「分享」,在下拉菜单中选择「把本地图片传至图库...」,点击「新增服务」,会弹出「偏好设置--发布服务」
图床设置

添加本地图片上传服务(图床)

  1. 名称:随心所欲,你自己起个名字就行;
  1. API地址:一定要填写你在七牛上申请存储空间机房对应的API接口。可点击「问号」查看详细内容。如:华东:http://upload.qiniu.com ;华北:http://upload-z1.qiniu.com ;华南:http://upload-z2.qiniu.com
  2. 空间名称:七牛开发者主页-->对象存储-->你刚刚添加的空间名称。
  3. Access Key:「个人面板」-->「个人中心」-->「秘钥管理」中AK位置,上边让你记录过。
  4. Secret Key:「个人面板」-->「个人中心」-->「秘钥管理」中SK位置,上边让你记录过。
  5. 图片URL前缀:「对象存储」-->「更多操作」-->「内容管理」-->「外链默认域名」,或直接复制一张你上传图片的外链,截取前缀即可。
  6. 验证:填完之后,点击「验证」,如果完全按照上述步骤,你一次就能通过!至此,恭喜你,你已经成功了99%了。
设置

4.3 配置Markdown Here

  1. 在Chrome上安装Markdown Here插件:
  1. 安装完后在Chrome浏览器右上角会出现Markdown Here插件图标,右键点击图标,选择选项,修改「基本渲染CSS样式」
  2. 如果对于CSS并不了解,我建议你,先拿来主义,先尝试,再研究。比如说,先拿来李笑来老师的版本吧 https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2 复制Github上的代码粘贴至下图基本渲染CSS中。
  3. 注:如何根据自己的审美修改Markdown Here CSS 样式,后续会单开一篇文章介绍。
Markdown Here 设置

5. 一键发布

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

  1. 在MWeb上全身心写一篇文章(图片直接贴,是不是感觉很爽?),写完后,点击「分享」-->「把本地图片传至图库...」
  2. 在「选择本地图片自动上传服务」的对话框中,点击「上传图片」。此时你文中的图片就全部上传至你的七牛图床上了。
  3. 图片上传完后,你会看到远程那一行会显示图片远程连接地址。
MWeb主界面
自动上传图片

复制粘贴发布

  1. 点击上图「复制Markdown」(这个Markdown中本地图片链接已经完全转化为了远程图片链接);
  2. 然后打开打开微信公众号后台素材库的编辑器,粘贴。(不止是微信公众号哦,知乎,新浪微博发表头条,简书这些个通吃);
    3.Ctrl+Alt+M 一键渲染CSS样式;
一键渲染前
一键渲染后

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

这时候你应该迫不及待地准备预览发布了。

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

等半小时回来,在素材库里,你预览后发现,竟然打上水印了,恭喜你,现在群发吧~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 原文地址:码字必备:18 款优秀的 Markdown 写作工具 | 2015 年度盘点 现在是 2015 年底,自...
    袁俊亮技术博客阅读 16,544评论 6 66
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,045评论 25 707
  • 我们醒来的时候黎明正挣扎着与阴霾搏斗光明的碎片就飘落在我们肩上远处红色的旗帜在风中摇曳于是我们笑着跑着把这奄奄一息...
    Biobot阅读 151评论 0 0
  • 那一年,那一天,闵家洞 为地主高原人躲过一劫 那一望无涯的旋马藤 那前川挂着的飞泻瀑布 掩映着空旷的洞穴 掩映着地...
    闽洞秋沙阅读 127评论 0 0