完美的markdown体验——Typora+PicGo图床
码云已经禁止作为图床使用,需要使用其他图床(如各类对象存储)
写这个也是为了解决 markdown 这门标记语言的一个小问题:它不能直接插入图片到.md 文件内,而是通过引用的方式来插入,那么问题来了,若是将文件上传到博客园的时候就会丢失图片链接。
对于这个小瑕疵,有两个解决办法:
1.将图片转码为 base64 编码插入
缺点是看源码的时候非常瞎眼而且非常的卡顿……(三张图就开始卡,Typora:我仿佛承受了不该属于我的压力)
这是一张 60kb 的小图编码出来的 Base64 图片……各位看看就好
先不说这个效果怎么样,光是超长的剪贴板就已经够我喝一壶了,我觉得不行
2.利用图床来进行调用图片链接
这个就是今天的主角了,首先贴个百度百科,看看图床的定义是什么:
图床一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和 cdn 加速三种。
简单来说 要有网,而且不能太菜
我之前试了 GitHub,但是因为一些不可描述的原因,GitHub 的访问速度感天动地,所以我们直接 pass 掉它,选择 Gitee(码云)进行创建免费图床
码云对比 GitHub 有个小小的缺陷,它的图床要求仓库必须是公开的,否则无法访问,所以一些敏感的图片建议不要传上去,ghs 的图片请私发给我,谢谢。
PS:为什么需要 PicGo
想象一下,使用 markdown 编写你的博客时,插入截图是什么流程:将截图保存到本地文件夹->将图片文件上传到网络服务器中->复制图片的网络地址->在 markdown 中输入
![](图片的网络地址)
,这个过程无疑是很繁琐的,而且如果你图片一多,这种过程将会是魔鬼体验。PicGo 是一款免费的图床管理应用,支持拖拽上传,剪切板上传等方式。你可以用它快捷地将图片上传到图床并获得网络链接,而且你可以设置链接格式为 markdown,这就意味着你只要直接粘贴到 markdown 编辑器就可以插入图片了。
1. 必要软件安装
Typora:https://www.typora.io/
Node.js(PicGo 安装插件需要这个玩意支持):https://nodejs.org/en/
安装就不说了,都折腾到这个份上了还不会装我是不信的
注:在安装的时候安装目录千万不能选C:\Program Files\
下的任何地方,如果你不知道安装在哪里的话,选择仅为我安装,否则在设置 Typora 时会出现以下错误:
1 | Copyfailed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe |
2. PicGo 环境配置
首先安装完毕启动 PicGo,点击插件设置
(此处一定要安装完 Node.js 再打开,否则……我不知道,因为我装了)
搜索这个插件点击安装,会给 PicGo 拓展出码云图床的选项。
接下来就是详解每一个参数了
1. repo
此处填写你自己的 gitee 仓库地址作为图床的存储空间,首先注册码云,登录,新建一个仓库,仓库名随意,但是必须要是公开的仓库,这样图片才能被外部访问。我创建的仓库地址为https://gitee.com/anselyuki/PicGo,下文以该地址举例。
要注意勾选公开,使用 readme 文件初始化,以及选择单分支模型才能正常使用
2. branch
这个地方使用默认的 master 就可以,没有必要更改,除非你的图床库还得拿来干别的事
3. token
创建完仓库后,还要创建一个私人令牌,私人令牌是用来允许PicGo
访问并更新你的仓库的,这个时候,你已经明白了 PicGo 的运行原理:PicGo 将图片上传到你的 gitee 仓库,然后返回给你图片的具体地址,这样你用该地址便可以访问到位于仓库的图片了。
创建私人令牌步骤如下:访问新建 Gitee 令牌,在私人令牌描述中写上便于你了解该令牌用处的文字,并勾选需要的权限,PicGo 要使用的私人令牌只需要user_info
和projects
权限,勾选上后提交,gitee 将会返回私人令牌的token
,保存该token
,因为该token
只会出现一次,离开页面过后再不会出现。
4. path
这个一般写 img,能将图片上传到库内的 img 文件夹内,看起来舒服一点,实际上不写也没问题
至此 PicGo 已经设置完毕
3.如何使用?
用截图工具(我自己用的 ShareX,其他工具也是可以使用的)
截图之后,图片将会保存在剪贴板内,按下设定的快捷键即可直接上传至码云
在相册内点击这个按钮即可复制图片链接,应该是这个样子:
在图片上传的页面还可以选择上传之后复制的链接类型,样式可以自己选择。
只需要将其粘贴进 Typora,即可直接获取图片链接,渲染为 markdown 页面。
要注意的是,gitee 支持外部链接的文件大小限制为1M
(我脑子一抽传了张 12MB 的单反照片上去,直接 GG)。
使用 Typora+PicGo 体验更便捷的写博客姿势
如果你使用 Typora 作为博客文章编辑器,我建议你使用 Typora+PicGo 体验更便捷的写博客姿势,如果不是,我建议你使用 Typora 作为你的博客文章编辑器。如果你不听建议,你可以当我没说。
使用 PicGo 有效避免了使用图片时候的上传
->编写markdown代码
的步骤,但是我们能不能把添加到PicGo
这一步也省略掉呢?答案当然是可以,Typora 内置了使用 PicGo 自动上传图片的功能,也就是说,在需要使用图片的时候,你只要直接将图片粘贴到 Typora 就好了,这样就跟使用本地图片的体验毫无差距了。
设置 Typora
点击 Typora 左上角的
文件
->偏好设置
在弹出的界面中定位到
图像
,选择插入图片时
选项为上传图片
,并勾选对网络位置的图片应用上述规则
设置完成如图所示
选择
上传服务
为PicGo(app)
,点击验证图片上传选项
,如果出现如下图所示界面,说明配置已成功,然后你就可以直接在 Typora 中插入图片了,Typora 会自动上传并替换图片地址为网络地址。
如果出现如下错误
1 | Failed to fetch |
在 PicGo 设置里设置一下本地监听即可。