三步完美解决Markdown图床问题

写在前面

<blockquote> 用过 Markdown 的朋友一定会深深爱上这种优雅的写作方式，比起惨不忍睹的 Word 简直要帅气得多了。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233331.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233331.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233331.png 2x" /> 作为一个 Markdown 的忠实爱好者，试过 Mac 上很多 Markdown软件后，最终留下了 Bear 和 Typora 这两款软件，Bear 的好处自不必说，但有一点让人不爽的是：导出 md 格式文件时，图片无法显示。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233731.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233731.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914233731.png 2x" /> 这时不得不说一下 Typora，它优雅、简洁、轻便，让人一看就有一股写作的冲动。 再搭配一个免费图床，保证分享 Markdown 文件给别人时，也可以看到图片。 这里我找到的解决方案是：七牛云(免费10G) + PicGo + Typora 只需三步，就可以把本地的图片传到服务器，在 Typora（或其他Markdown软件）里显示出来。 <h3>注册七牛云 <ol> <li>搜索七牛云 → 点击注册有礼 → 点击申请个人账户 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235452.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235452.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235452.png 2x" /> <li>填写注册信息 注意：个人网站随便填一个，可以是自己社交账号的网址；填写真实姓名，后面需要实名认证。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235658.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235658.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180914235658.png 2x" /> <li>按要求实名认证，大概需要 3 天左右 <h3>配置储存空间 <blockquote> 实名认证审核成功后，你需要在七牛云新建配置一个储存空间，这将存储你的图片。 <ol> <li>点击对象存储 → 点击新建存储空间 → 填写配置信息（如图） <ul> <li>存储空间名称可以自己命名 <li>存储区域选一个离自己近的即可 <li>访问控制公开 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915000723.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915000723.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915000723.png 2x" /> <li>填写好之后，在内容管理这里可以上传自己的图片 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001241.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001241.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001241.png 2x" /> <li>上传完成后，可以在这里复制外链。 但每次添加个本地图片都要打开七牛云也太难过了，所以 PicGo 来了。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001425.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001425.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915001425.png 2x" /> <h3>下载配置 PicGo <ol> <li>下载安装 PicGo 公众号回复「picgo」，获取下载链接。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002041.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002041.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002041.png 2x" /> <li>打开PicGo → 选择打开详细窗口 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002233.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002233.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915002233.png 2x" /> <li>点击图床设置 → 点击七牛图床 → 填写配置信息 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003037.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003037.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003037.png 2x" /> <ul> <li>AccessKey 和 SecretKey 可以从右上角头像的个人中心，密钥管理复制获得。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003542.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003542.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003542.png 2x" /> <li>储存空间名和你设置的保持一致。 <li>访问地址在空间概况里获取（记得前面加<code>http://）。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003753.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003753.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915003753.png 2x" /> <li>其他选项参考图片。 <h3>最后 一系列烦人的操作完成后，你就体验一下添加图片的新姿势了！我比较喜欢第一种。 <h4>第一种方式 步骤：使用快捷键复制图片 <code>cmd+c → 上传图片到七牛云 <code>control+shift+p → Markdown 里粘贴图片 <code>cmd+v <ul> <li>上传图片的快捷键可以在这里修改 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005446.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005446.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005446.png 2x" /> <li>上传好图片自动复制了 Markdown 格式的链接，你只需粘贴即可。当然，也可以在这里修改。 <img src="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005659.png" srcset="https://images.hive.blog/768x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005659.png 1x, https://images.hive.blog/1536x0/http://peqw8k8k4.bkt.clouddn.com/qiniu/20180915005659.png 2x" /> <h4>第二种方式 步骤：拖拽图片到状态栏的图片 → Markdown 里粘贴图片 <code>cmd+v 因为图标太小，我不是很喜欢。 自此，大功告成！