引入
在我们日常使用Typora进行md文档编写是,有的时候无法避免的需要插入图片、视频、音乐等多媒体文件。但是Typora默认是引入文件在本机的绝对地址
,那么我们在使用hexo框架将md文档转换成html文件部署到服务器时,由于md文档中多媒体文件的引用路径是本机绝对地址,但是在服务器上并没有这些文件,就会出现图片、视频,音乐加载失败的尴尬场面。
那么有的小伙伴说了,我把md所引用的本机文件都复制到服务器上,在把md文档上引用的文件路径刚才服务器上文件的路径,这样不就好了吗? 是的,这样是好了,但是当你的md文档中引用了很多文件时,这种方法效率实在太低。
这时Typora老手就要说了,我可以设置Typora把引用的文件统一放在md文档的./${filename}.assets目录
下。然后把这个文件上传到html文件的同目录下不就好了吗? 是的,这样也能够实现,但是当一个页面引用的文件太多时,服务器的IO压力也会很大,由于博主的服务器是阿里云的1核2G的学生机,实在折腾不起。所以最好的方法就是将这些文件存在另一台服务器上,即我们今天的主角 —-七牛云图床。

图床一般是指储存图片的服务器,同时允许外链到其他网站。
今天的教程我们使用的是七牛云的对象存储
作为图床。
准备
- 七牛云账号 *1
搭建图床
创建对象存储管理
这一步可以参考我之前的那篇博文:如何上传文件至七牛云,需要拿到存储空间名
、AK
,SK
,还有测试域名
。有域名的小伙伴绑定了自己的域名也可以使用自己的域名。
⚠️ 警告:测试域名只能使用30天!! 绑定自己的域名时一定要绑定二级域名
,否则会冲突!!
配置PicGo
PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具
PicGo 支持如下图床:
七牛图床
v1.0腾讯云 COS v4\v5 版本
v1.1 & v1.5.0又拍云
v1.2.0GitHub
v1.5.0SM.MS V2
v2.3.0-beta.0阿里云 OSS
v1.6.0Imgur
v1.6.0
下载PicGo
由于PicGo的下载地址是在github,国内下载速度感人,考虑到可能部分小伙伴可能不会科学上网。所以这里我准备了截止本博文发布时PicGo最新的2.3.0版本的全部安装包,需要的小伙伴可点击下方的百度云下载
进行下载。
配置PicGo
以我的Mac os系统为例,安装后打开PicGo,可能小伙伴点击软件启动图标后找不到软件在哪,其实它在我们的状态栏上。

鼠标放置在该图标上,然后右键
,打开详细窗口
就可以看到如下界面。

进入PicGo设置
, 点击设置Server
,然后开启
Server,监听地址127.0.0.1
,监听端口36677
⚠️警告:重点检查监听端口端口是否是36677
!!!
我之前就是由于PicGo初始的监听端口不是36677,结果始终上传图片失败。


确定后进入图床设置
,这里我用的是七牛云图床
,所以我以七牛云为例,其他类型的图床也是同理,差别不大。具体可参考PicGo官方教程。

AssessKey 必填
登录七牛云后,可以悬浮在右上角点击头像
,进入密钥管理
,就可以看到了AK码了。
SecretKey 必填
同上,即AK码下面的SK码。
设定储存空间名 必填
点击七牛云侧边栏的对象存储
菜单,进入空间管理
就可以看到存储空间名。

设定访问地址 必填
点击七牛云侧边栏的CDN
菜单,进入域名管理
就可以看到我们的域名了。

确认存储区域 必填
这里我们填写我们的存储区域对应的地域简称,其对应关系如下。
⚠️注意:这里是填写地域简称
!! 别直接填华南、华北等存储区域名!!!

设定网址后缀 选填
网址后缀,例如?imgslim等。
指定存储路径 选填
自定义存储路径,比如img/
那么如果我设置的访问地址是https://www.baidu.com,我们上传的图片名是emoji.gif。那么我们最终上传成功后的url路径就是https://www.baidu.com/img/emoji.gif。
好啦,到这里我们PicGo的配置就完成了。接下来我们设置下Typora。
配置Typora
打开Typora,进入偏好设置
,点击图像
,设置插入图片时上传图片
,勾选第1,2,4选项。上传服务选择PicGo.app
,最后点击验证图片上传选项
。

若是验证成功则会出现如下提示框。验证失败请首先检查你的PicGo服务器的端口号是否为36677 !!!

最后看下效果
结语
Typora配置了图床后方便了很多,本站里所有博文的图片就是全部用typora自动上传的,复制粘贴图片至Typora即可。哦,对了,若是百度云的链接过期了,可以留言或者发邮件给我,我看到了会补上的。好了,这就是全部内容啦,如果觉得对你有帮助,就留下你的评论吧。