Typora图片自动上传

前言

现存问题

习惯使用markdown的人应该都Typora非常简洁高效，但导入文件的时候，只会把文件保存在本地计算机，文件中保存的是本地的绝对路径，当在本地写好文档上传当各个技术博客平台时，还需要手动的上传一遍，图片多的时候无疑是一个很大的工作量。

解决方案

Typora 编辑器在新版本上(≥ 0.9.9.32 on macOS or 0.9.84 on Windows / Linux) 增加了一个 上传图片 的功能，通过第三方app或脚本在插入图片时将图片上传到网络，然后文档中会直接插入图片的图床链接。

接下来介绍Typora如何通过PicGo来自动/手动上传图片到自建github图床。

图床就是一个你在网络上存放图片的地方，很多公司都提供了这样一个地方让你存放图片，比如微博，，七牛云等，但这些毕竟是公司资源，说不定哪天就不能访问了。所以，自己构建一个图床就显得比较重要了。

创建图床

GitHub + PicGo + jsDelivr 的方式是目前比较主流的方式。

1. GitHub 用来存放图片，目前投入微软怀抱，后台硬，不会随便倒闭
2. PicGo 是一个用于快速上传图片并获取图片 URL 链接的工具，通过该链接访问网络图片资源
3. jsDelivr 是用于开源项目的免费公共CDN(Content Delivery Network，即内容分发网络)，用来加速GitHub的访问速度

创建GitHub repository

image

生成GitHub Token

进入个人设置 Settings -> Developer settings -> Personal access tokens -> Generate new token

image

在Note中填好描述，z选择一个合适的过期时候后，勾选repo，然后点击Generate token生成一个Token

image

注意这个Token只会显示一次，所以，需要保存下来

image

配置PicGo

下载安装PicGo后，打开GitHub图床配置窗口

image

• 设定仓库名：按照 用户名/图床仓库名 的格式填写

  eg: fxding2019/PictureBed
  

• 设定分支名：master

• 设定Token：填写之前在GitHub生成的Token

• 指定存储路径：填写想要储存的路径，如 BlogImg/，这样就会在仓库下创建一个名为BlogImg 的文件夹，图片将会储存在此文件夹中。

  注意：BlogImg/ 不要写成 BlogImg
  

• 设定自定义域名：图片上传后，PicGo 会按照 自定义域名+储存路径+上传的图片名 的方式生成访问链接，并放到粘贴板上

  eg: https://cdn.jsdelivr.net/gh/fxding2019/PictureBed
  

  因为我们要使用 jsDelivr 加速访问，所以自定义域名可以设置为 https://cdn.jsdelivr.net/gh/用户名/图床仓库名，上传完毕后，就可以通过 https://cdn.jsdelivr.net/gh/用户名/图床仓库名/储存路径/上传的图片名 加速访问我们的图片了。存储路径为BlogImg/, 所以通过https://cdn.jsdelivr.net/gh/chenshifangcheng/PictureBed/BlogImg/上传的图片名 来加速访问。

• 点击确定以及设置为默认图床

• 打开时间戳重命名

  上传图片时，如果多次上传同一张图片的话，文件名会一样，导致文件已存在而报错，在上传图片时使用时间戳不会因为文件名重复而报错。

  image

• 测试上传

  拖动图片进入上传区后自动上传图片，并在github repository中自动创建目录存放图片

  image

Typora设置自动上传

进入文件 -> 偏好设置 -> 图片，在插入图片时区域，下拉框选择上传图片，勾选如下三项

image

点击验证图片上传选项测试上传效果

image

至此，直接把图片粘贴到Typora时，就会转换为github图床的路径。