Gitee图床+PicGo+Typora便捷在博客中使用图片

时间 2020-03-08

标签 gitee picgo+typora picgo typora 便捷博客使用图片繁體版

原文原文链接

为何要使用图床

在hugo中，图片是以/static为基准目录的，例如，设baseUrl为https://focksor.gitee.io/，图片文件存放位置是static/img/gitee/123.jpg，那么，编译完成后页面图片引用的地址就是https://focksor.gitee.io/img/gitee/123.jpg，则在Markdown要引用此图片应该用![图片说明](/img/gitee/123.jpg)，可是这样带来的问题是，在写做的时候没法看到图片，要通过hugo编译以后才能看到文档图片，这样的写做显然是不友好的。node

图床指存储图片的服务器，使用图床存储文档中的图片，那么在使用图片的时候只要写上图片所在的网络地址就行了，这样比较使用静态图片体验显然要好不少。下面介绍Gitee+PicGo的方法来使用gitee做为图床。git

为何须要PicGo

想象一下，使用markdown编写你的博客时，插入截图是什么流程：将截图保存到本地文件夹->将图片文件上传到网络服务器中->复制图片的网络地址->在markdown中输入![](图片的网络地址)，这个过程无疑是很繁琐的，并且若是你图片一多，这种过程将会是魔鬼体验。github

PicGo是一款免费的图床管理应用，支持拖拽上传，剪切板上传等方式。你能够用它快捷地将图片上传到图床并得到网络连接，并且你能够设置连接格式为markdown，这就意味着你只要直接粘贴到markdown编辑器就能够插入图片了。shell

安装PicGo

访问PicGo的官方文档以了解PicGo的基本安装和使用方法。若是不想读文档的话，访问PicGo Releases直接下载你的操做系统对应的安装包并完成安装。npm

注：在安装的时候安装目录千万不能选C:\Program Files\下的任何地方，若是你不知道安装在哪里的话，选择仅为我安装，不然在设置Typora时会出现如下错误：api
failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
以下图所示
服务器

安装npm

因为PicGo的插件须要使用npm进行安装，若是你的电脑上没有安装npm，那么你是没法安装PicGo插件的，而咱们接下来要使用一个额外的插件得到gitee支持，因此在此以前先完成npm的安装。markdown

访问node.js的官网，根据官网的指导下载并安装node.js，确认安装成功：网络

PS C:\Users\focks> npm -v
6.13.4

设置PicGo用Gitee做为图床

运行PicGo，单击插件设置，在搜索中输入github，安装搜索结果中的github-plus，以下图所示。app

在等待安装完成的过程当中，移步gitee并建立一个仓库，仓库名随意，可是必需要是公开的仓库，这样图片才能被外部访问。我建立的仓库地址为https://gitee.com/focksor/giteePagesImgs，下文以该地址举例。

建立完仓库后，还要建立一个私人令牌，私人令牌是用来容许PicGo访问并更新你的仓库的，这个时候，你已经明白了PicGo的运行原理：PicGo将图片上传到你的gitee仓库，而后返回给你图片的具体地址，这样你用该地址即可以访问到位于仓库的图片了。

建立私人令牌步骤以下：访问新建Gitee令牌，在私人令牌描述中写上便于你了解该令牌用处的文字，并勾选须要的权限，PicGo要使用的私人令牌只须要user_info和projects权限，勾选上后提交，gitee将会返回私人令牌的token，保存该token，由于该token只会出现一次，离开页面事后再不会出现。

回到PicGo，点击图床设置->githubPlus，在设置中填入repo和token，并选择origin为gitee，便可完成设置。其中，repo要填入owner/repoName，例如，仓库地址为https://gitee.com/focksor/giteePagesImgs，则repo填入的内容为focksor/giteePagesImgs。

上传和管理图片

单击上传区，选择连接格式，使用点击上传或剪贴板图片上传，PicGo会自动上传图片并将符合连接格式的连接复制到剪贴板，你只要按下Ctrl+v便可粘贴图片的连接。

单击相册，你能够看到你上传的全部图片，你能够对全部图片进行复制连接，修改图片URL与删除操做，并能够批量复制或批量删除。

要注意的是，gitee支持外部连接的文件大小限制为1M（不过我也没试过）。

使用Typora+PicGo体验更便捷的写博客姿式

若是你使用Typora做为博客文章编辑器，我建议你使用Typora+PicGo体验更便捷的写博客姿式，若是不是，我建议你使用Typora做为你的博客文章编辑器。若是你不听建议，你能够当我没说。

使用PicGo有效避免了使用图片时候的上传->编写markdown代码的步骤，可是咱们能不能把添加到PicGo这一步也省略掉呢？答案固然是能够，Typora内置了使用PicGo自动上传图片的功能，也就是说，在须要使用图片的时候，你只要直接将图片粘贴到Typora就行了，这样就跟使用本地图片的体验毫无差距了。

设置Typora

点击Typora左上角的文件->偏好设置
在弹出的界面中定位到图像，选择插入图片时选项为上传图片，并勾选对网络位置的图片应用上述规则
设置完成如图所示
选择上传服务为PicGo(app)，点击验证图片上传选项，若是出现以下图所示界面，说明配置已成功，而后你就能够直接在Typora中插入图片了，Typora会自动上传并替换图片地址为网络地址。

若是出现以下错误，请参考安装PicGo
failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
若是出现如下错误，点击PicGo界面左侧的PicGo设置->设置Server，并按下图设置
Failed to fetch