Gitee图床+PicGo+Typora便捷在博客中使用图片
<p>## 为什么要使用图床</p><p>在hugo中，图片是以<code>/static</code>为基准目录的，例如，设baseUrl为<code>https://focksor.gitee.io/</code>，图片文件存放位置是<code>static/img/gitee/123.jpg</code>，那么，编译完成后页面图片引用的地址就是<code>https://focksor.gitee.io/img/gitee/123.jpg</code>，则在Markdown要引用此图片应该用<code></code>，但是这样带来的问题是，在写作的时候无法看到图片，要经过hugo编译之后才能看到文档图片，这样的写作显然是不友好的。</p>
<p>图床指存储图片的服务器，使用图床存储文档中的图片，那么在使用图片的时候只要写上图片所在的网络地址就好了，这样比较使用静态图片体验显然要好很多。下面介绍Gitee+PicGo的方法来使用gitee作为图床。</p>
<h2 id="为什么需要picgo">为什么需要PicGo</h2>
<p>想象一下，使用markdown编写你的博客时，插入截图是什么流程：将截图保存到本地文件夹->将图片文件上传到网络服务器中->复制图片的网络地址->在markdown中输入<code></code>，这个过程无疑是很繁琐的，而且如果你图片一多，这种过程将会是魔鬼体验。</p>
<p>PicGo是一款免费的图床管理应用，支持拖拽上传，剪切板上传等方式。你可以用它快捷地将图片上传到图床并获得网络链接，而且你可以设置链接格式为markdown，这就意味着你只要直接粘贴到markdown编辑器就可以插入图片了。</p>
<h2 id="安装picgo">安装PicGo<span id="安装PicGo"></span></h2>
<p>访问PicGo的官方文档以了解PicGo的基本安装和使用方法。如果不想读文档的话，访问PicGo Releases直接下载你的操作系统对应的安装包并完成安装。</p>
<blockquote>
<p>注：在安装的时候安装目录千万不能选<code>C:\Program Files\</code>下的任何地方，因为PicGo无法解析这一路径，如果你不知道安装在哪里的话，选择<code>仅为我安装</code>，否则在设置Typora时会出现以下错误：</p>
<pre><code>failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
</code></pre>
<p>如下图所示<br>
<img src="https://gitee.com/focksor/giteePagesImgs/raw/master/image-20200305223924770.png" alt="image-20200305223924770" style="zoom: 67%"></p>
</blockquote>
<h2 id="安装npm">安装npm</h2>
<p>由于PicGo的插件需要使用npm进行安装，如果你的电脑上没有安装npm，那么你是无法安装PicGo插件的，而我们接下来要使用一个额外的插件获得gitee支持，所以在此之前先完成npm的安装。</p>
<p>访问node.js的官网，根据官网的指导下载并安装node.js，如果你不想访问的话，点击此处下载，确认安装成功并更换镜像源：</p>
<pre><code class="language-powershell">PS C:\Users\focks> node -v
v12.16.1
PS C:\Users\focks> npm config set registry https://registry.npm.taobao.org
</code></pre>
<h2 id="设置picgo用gitee作为图床">设置PicGo用Gitee作为图床</h2>
<p>运行<code>PicGo</code>，单击<code>插件设置</code>，在搜索中输入<code>github</code>，安装搜索结果中的<code>github-plus</code>，如下图所示。</p>
<img src="https://gitee.com/focksor/giteePagesImgs/raw/master/安装github-plus.png" style="zoom: 67%">
<p>在等待安装完成的过程中，移步gitee并创建一个仓库，仓库名随意，但是必须要是公开的仓库，这样图片才能被外部访问。我创建的仓库地址为https://gitee.com/focksor/giteePagesImgs，下文以该地址举例。</p>
<blockquote>
<p>作为图床的仓库，一定不能勾掉管理界面的<code>在线编辑 是否允许仓库文件在线编辑</code>选项，否则使用PicGo管理的时候会导致操作被403 Forbidden。</p>
</blockquote>
<p>创建完仓库后，还要创建一个私人令牌，私人令牌是用来允许<code>PicGo</code>访问并更新你的仓库的，这个时候，你已经明白了PicGo的运行原理：PicGo将图片上传到你的gitee仓库，然后返回给你图片的具体地址，这样你用该地址便可以访问到位于仓库的图片了。</p>
<p>创建私人令牌步骤如下：访问新建Gitee令牌，在私人令牌描述中写上便于你了解该令牌用处的文字，并勾选需要的权限，PicGo要使用的私人令牌只需要<code>user_info</code>和<code>projects</code>权限，勾选上后提交，gitee将会返回私人令牌的<code>token</code>，保存该<code>token</code>，因为该<code>token</code>只会出现一次，离开页面过后再不会出现。</p>
<img src="https://gitee.com/focksor/giteePagesImgs/raw/master/20200301221540.png" style="zoom: 67%">
<p>回到PicGo，点击<code>图床设置->githubPlus</code>，在设置中填入<code>repo</code>和<code>token</code>，并选择<code>origin</code>为gitee，即可完成设置。其中，<code>repo</code>要填入<code>owner/repoName</code>，例如，仓库地址为https://gitee.com/focksor/giteePagesImgs，则<code>repo</code>填入的内容为<code>focksor/giteePagesImgs</code>。</p>
<img src="https://gitee.com/focksor/giteePagesImgs/raw/master/20200301221628.png" style="zoom: 67%">
<h2 id="上传和管理图片">上传和管理图片</h2>
<p>单击<code>上传区</code>，选择链接格式，使用<code>点击上传</code>或<code>剪贴板图片上传</code>，PicGo会自动上传图片并将符合链接格式的链接复制到剪贴板，你只要按下<code>Ctrl+v</code>即可粘贴图片的链接。</p>
<p>单击<code>相册</code>，你可以看到你上传的所有图片，你可以对所有图片进行<code>复制链接</code>，<code>修改图片URL</code>与<code>删除</code>操作，并可以<code>批量复制</code>或<code>批量删除</code>。</p>
<p>要注意的是，gitee支持外部链接的文件大小限制为<code>1M</code>（不过我也没试过）。</p>
<h2 id="使用typorapicgo体验更便捷的写博客姿势">使用Typora+PicGo体验更便捷的写博客姿势</h2>
<p>如果你使用Typora作为博客文章编辑器，我建议你使用Typora+PicGo体验更便捷的写博客姿势，如果不是，我建议你使用Typora作为你的博客文章编辑器。如果你不听建议，你可以当我没说。</p>
<p>使用PicGo有效避免了使用图片时候的<code>上传</code>-><code>编写markdown代码</code>的步骤，但是我们能不能把<code>添加到PicGo</code>这一步也省略掉呢？答案当然是可以，Typora内置了使用PicGo自动上传图片的功能，也就是说，在需要使用图片的时候，你只要直接将图片粘贴到Typora就好了，这样就跟使用本地图片的体验毫无差距了。</p>
<h3 id="设置typora">设置Typora<span id="设置Typora"></span></h3>
<ul>
<li>
<p>点击Typora左上角的<code>文件</code>-><code>偏好设置</code></p>
</li>
<li>
<p>在弹出的界面中定位到<code>图像</code>，选择<code>插入图片时</code>选项为<code>上传图片</code>，并勾选<code>对网络位置的图片应用上述规则</code></p>
</li>
<li>
<p>设置完成如图所示</p>
<p><img src="https://gitee.com/focksor/giteePagesImgs/raw/master/image-20200305231145911.png" alt="image-20200305231145911" loading="lazy"></p>
</li>
<li>
<p>选择<code>上传服务</code>为<code>PicGo(app)</code>，点击<code>验证图片上传选项</code>，如果出现如下图所示界面，说明配置已成功，然后你就可以直接在Typora中插入图片了，Typora会自动上传并替换图片地址为网络地址。</p>
</li>
</ul>
<p><img src="https://gitee.com/focksor/giteePagesImgs/raw/master/image-20200305225831200.png" alt="image-20200305225831200" loading="lazy"></p>
<blockquote>
<p>如果出现如下错误，请参考安装PicGo</p>
<pre><code>failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
</code></pre>
<p>如果出现以下错误，点击PicGo界面左侧的<code>PicGo设置</code>-><code>设置Server</code>，并按下图设置</p>
<pre><code>Failed to fetch
</code></pre>
<img src="https://gitee.com/focksor/giteePagesImgs/raw/master/image-20200305230217533.png" alt="image-20200305230217533" style="zoom: 67%"></blockquote><br><br>
来源：https://www.cnblogs.com/focksor/p/12402471.html
頁:
[1]