惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
IT之家
IT之家
博客园 - Franky
Stack Overflow Blog
Stack Overflow Blog
宝玉的分享
宝玉的分享
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
S
SegmentFault 最新的问题
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Last Week in AI
Last Week in AI
H
Help Net Security
V
V2EX
H
Hackread – Cybersecurity News, Data Breaches, AI and More
量子位
博客园 - 叶小钗
J
Java Code Geeks
博客园 - 【当耐特】
月光博客
月光博客
爱范儿
爱范儿
人人都是产品经理
人人都是产品经理
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
一个码字工作者的正确书写发文姿势—— 用MWeb+Markdown Here+...
2016-12-19 · via 少数派

封皮

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

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

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

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

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

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


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

2.我目前的发布流程

我的发布l流程

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

1. 在MWeb中复制Markdown内容;

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

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

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

这里我们会用到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前缀(如下图)

创建存储空间
记录AK|SK

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 样式,后续会单开一篇文章介绍。

Markdown Here 设置

5. 一键发布

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

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

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

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

MWeb主界面
自动上传图片

复制粘贴发布

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

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

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

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

一键渲染前
一键渲染后

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

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


等10分钟再回来,在素材库里,你预览后发现,竟然打上水印了,恭喜你,现在可以群发啦~