引入

​ 在我们日常使用Typora进行md文档编写是,有的时候无法避免的需要插入图片、视频、音乐等多媒体文件。但是Typora默认是引入文件在本机的绝对地址,那么我们在使用hexo框架将md文档转换成html文件部署到服务器时,由于md文档中多媒体文件的引用路径是本机绝对地址,但是在服务器上并没有这些文件,就会出现图片、视频,音乐加载失败的尴尬场面。

​ 那么有的小伙伴说了,我把md所引用的本机文件都复制到服务器上,在把md文档上引用的文件路径刚才服务器上文件的路径,这样不就好了吗? 是的,这样是好了,但是当你的md文档中引用了很多文件时,这种方法效率实在太低。

​ 这时Typora老手就要说了,我可以设置Typora把引用的文件统一放在md文档的./${filename}.assets目录下。然后把这个文件上传到html文件的同目录下不就好了吗? 是的,这样也能够实现,但是当一个页面引用的文件太多时,服务器的IO压力也会很大,由于博主的服务器是阿里云的1核2G的学生机,实在折腾不起。所以最好的方法就是将这些文件存在另一台服务器上,即我们今天的主角 —-七牛云图床。

image-20200730203408911

图床一般是指储存图片的服务器,同时允许外链到其他网站。
今天的教程我们使用的是七牛云的对象存储作为图床。

准备

  • 七牛云账号 *1

搭建图床

创建对象存储管理

这一步可以参考我之前的那篇博文:如何上传文件至七牛云,需要拿到存储空间名AKSK,还有测试域名。有域名的小伙伴绑定了自己的域名也可以使用自己的域名。

⚠️ 警告:测试域名只能使用30天!! 绑定自己的域名时一定要绑定二级域名,否则会冲突!!

配置PicGo

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具

PicGo 支持如下图床:

  • 七牛图床 v1.0
  • 腾讯云 COS v4\v5 版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS V2 v2.3.0-beta.0
  • 阿里云 OSS v1.6.0
  • Imgur v1.6.0

下载PicGo

由于PicGo的下载地址是在github,国内下载速度感人,考虑到可能部分小伙伴可能不会科学上网。所以这里我准备了截止本博文发布时PicGo最新的2.3.0版本的全部安装包,需要的小伙伴可点击下方的百度云下载进行下载。

链接: https://pan.baidu.com/s/1xhDx4q0lTydSubHR_pRgWQ 密码: 6536

配置PicGo

以我的Mac os系统为例,安装后打开PicGo,可能小伙伴点击软件启动图标后找不到软件在哪,其实它在我们的状态栏上。

image-20200730220059601

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

image-20200730220215310

进入PicGo设置, 点击设置Server,然后开启Server,监听地址127.0.0.1,监听端口36677

⚠️警告:重点检查监听端口端口是否是36677!!!

我之前就是由于PicGo初始的监听端口不是36677,结果始终上传图片失败。

image-20200730220631642 image-20200730220842484

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

image-20200730221410457

AssessKey 必填

登录七牛云后,可以悬浮在右上角点击头像,进入密钥管理,就可以看到了AK码了。

image-20200730222127546image-20200730222211414

SecretKey 必填

同上,即AK码下面的SK码。

设定储存空间名 必填

点击七牛云侧边栏的对象存储菜单,进入空间管理就可以看到存储空间名。

image-20200730222727147

设定访问地址 必填

点击七牛云侧边栏的CDN菜单,进入域名管理就可以看到我们的域名了。

image-20200730223021355

确认存储区域 必填

这里我们填写我们的存储区域对应的地域简称,其对应关系如下。

⚠️注意:这里是填写地域简称!! 别直接填华南、华北等存储区域名!!!

50533009-e5189100-0b5c-11e9-9812-438576990828

设定网址后缀 选填

​ 网址后缀,例如?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,最后点击验证图片上传选项

image-20200730224131760

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

image-20200730224458839

最后看下效果

4b77fc64-0a18-4219-a635-2ee1996f69d4

34242310-b5056510-e655-11e7-8568-60ffd4f71910

结语

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