Picgo + Gitee 配置图床
<h2 id="背景">背景</h2><blockquote>
<p>最近发现上传到GitHub的图片出现问题，导致之前的博客的图片都显示不了，然后上网查了下，应该是DNS的问题，网上也有很多这方面的处理方案，有兴趣的可以去网上找找。下面介绍下picgo工具以及使用Gitee做图床。</p>
</blockquote>
<br>
<h2 id="picgo介绍">picgo介绍</h2>
<h3 id="应用概述">应用概述</h3>
<blockquote>
<p>picgo是一款功能实用、操作简捷的图床工具，图床工具简单来说就是本地图片上传自动转换成链接的一款工具。</p>
</blockquote>
<p>picgo 本体支持如下图床：</p>
<ul>
<li>七牛图床 v1.0</li>
<li>腾讯云 COS v4\v5 版本 v1.1 & v1.5.0</li>
<li>又拍云 v1.2.0</li>
<li>GitHub v1.5.0</li>
<li>SM.MS V2 v2.3.0-beta.0</li>
<li>阿里云 OSS v1.6.0</li>
<li>Imgur v1.6.0</li>
</ul>
<p>Tips: 本体不再增加默认的图床支持。你可以自行开发第三方图床插件。</p>
<h3 id="特色功能">特色功能</h3>
<ol>
<li>支持拖拽图片上传</li>
<li>支持快捷键上传剪贴板里第一张图片</li>
<li>Windows 和 macOS 支持右键图片文件通过菜单上传 (v2.1.0+)</li>
<li>上传图片后自动复制链接到剪贴板</li>
<li>支持自定义复制到剪贴板的链接格式</li>
<li>支持修改快捷键，默认快速上传快捷键：<code>command+shift+p</code>（macOS） | <code>control+shift+p</code>（Windows\Linux）</li>
<li>支持插件系统，已有插件支持 Gitee、青云等第三方图床</li>
</ol>
<p>Tips:</p>
<ul>
<li>请确保你安装了 Node.js， 并且版本 >= 8。</li>
<li>默认上传图床为SM.MS。picgo上传之后，会自动将上传成功的URL复制到你的剪贴板，支持5种复制格式。</li>
<li>Mini窗口只支持Windows（圆形）和Linux（方形），macOS可以使用顶部栏图标。（因为Windows和Linux的任务栏不支持拖拽事件）</li>
</ul>
<h3 id="插件版">插件版</h3>
<ul>
<li>vs-picgo：picgo 的 VS Code 版（前面的博客就是使用此插件配置GitHub图床的）。</li>
<li>flutter-picgo：picgo 的手机版（支持 Android 和 iOS ）。</li>
</ul>
<br>
<h2 id="环境">环境</h2>
<h3 id="准备">准备</h3>
<ol>
<li>nodejs 环境</li>
<li>picgo 客户端</li>
<li>picgo 的Gitee上传插件</li>
<li>git、Gitee 账号和一个公开仓库</li>
</ol>
<h3 id="安装">安装</h3>
<h4 id="安装nodejs">安装nodejs</h4>
<ul>
<li>
<p>nodejs中文官网</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208111500547.png" alt="202208111500547" title="202208111500547" loading="lazy"></p>
<p>由于本人使用的是Ubuntu，所以下面介绍下Linux中安装nodejs（源码包需要编译再安装，而使用“二进制文件（x64）包”少这一步，所以我们使用后者）</p>
<pre><code class="language-sh"># 进入 “Downloads” 目录
cd ~/Downloads
# 下载nodejs
wget -c https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz
# 解包
tar -xf node-v16.16.0-linux-x64.tar.xz
# 配置软连接
sudo ln -s ~/Downloads/node-v16.16.0-linux/bin/npm /usr/lcal/bin/
sudo ln -s ~/Downloads/node-v16.16.0-linux/bin/npx /usr/lcal/bin/
sudo ln -s ~/Downloads/node-v16.16.0-linux/bin/node /usr/lcal/bin/
## 由于 nodejs 只是在安装 picgo 和安装 picgo插件 时需要， 后续picgo使用不需要。
## 所以本来不需要 nodejs 环境的博友可以和我一样，安装完 picgo客户端 和picgo插件 后就删了
# 验证
在终端中输入：
npm -v
npx -v
node -v
</code></pre>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208111557281.png" alt="202208111557281" title="202208111557281" loading="lazy"></p>
</li>
</ul>
<h4 id="安装-picgo-客户端">安装 picgo 客户端</h4>
<ul>
<li>
<p>picgo仓库地址</p>
</li>
<li>
<p>picgo-2.3.0，目前的最后一个稳定版本</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208120958783.png" alt="202208120958783" title="202208120958783" loading="lazy"></p>
</li>
</ul>
<p>下面介绍下Linux版本 picgo的安装与配置</p>
<ul>
<li>
<p>下载</p>
<pre><code class="language-sh">wget -c https://github.com/Molunerfinn/picgo/releases/download/v2.3.0/picgo-2.3.0.AppImage
</code></pre>
</li>
<li>
<p>安装</p>
<p>由于是 AppImage 文件（类似Windows下的 EXE文件）， 所以授权后直接执行即可运行。</p>
<p>为方便使用，我们可以将 AppImage 文件放入 <code>系统变量PATH</code> 中，如下：</p>
<ol>
<li>
<p>授权</p>
<pre><code class="language-sh">sudo chmod u+x picgo-2.3.0.AppImage
</code></pre>
</li>
<li>
<p>查看系统变量 PATH</p>
<pre><code class="language-sh">echo $PATH
</code></pre>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121434670.png" alt="202208121434670" title="202208121434670" loading="lazy"></p>
</li>
<li>
<p>移动到 PATH</p>
<pre><code class="language-sh"># 如上图所示，我们选用 “/usr/local/bin/”
sudo mv ~/Downloads/picgo-2.3.0.AppImage /usr/local/bin/
</code></pre>
</li>
<li>
<p>制作 desktop entry 图标（可选）</p>
<ul>
<li>参考文章：用 AppImage文件创建快捷图标和软连接</li>
</ul>
<p>打开后差不多长这样:</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121653118.png" alt="202208121653118" title="202208121653118" loading="lazy"></p>
</li>
</ol>
</li>
</ul>
<h3 id="配置">配置</h3>
<h4 id="下载并安装git">下载并安装Git</h4>
<ul>
<li>
<p>Git官网下载页 按照自己的系统版本下载，然后安装即可。</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121540746.png" alt="202208121540746" title="202208121540746" loading="lazy"></p>
</li>
</ul>
<h4 id="注册登录gitee账号">注册/登录Gitee账号</h4>
<ul>
<li>
<p>Gitee首页 按照要求自行注册即可。登录后如下：</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121549790.png" alt="202208121549790" title="202208121549790" loading="lazy"></p>
</li>
</ul>
<h4 id="创建一个gitee-公开仓库">创建一个Gitee 公开仓库</h4>
<blockquote>
<p>创建公开仓库的原因是让别人可以浏览你的图片，否则别人没有浏览图片的权限。</p>
</blockquote>
<ol>
<li>
<p>创建一个仓库，作为图床</p>
<ul>
<li>
<p>按照提示填写信息即可。仓库名随便取，如： picgo</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121614029.png" alt="202208121614029" title="202208121614029" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p>将仓库配置为“开源”</p>
<ul>
<li>
<p>由于创建仓库的时候只能选择 “私有” 仓库，所以此步配置 “开源” 操作如下：</p>
</li>
<li>
<p>进入仓库 -> 基本信息 -> 拉到最下面 -> 选择 “开源” 并勾上所有条约 -> 点击 “保存”</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121622302.png" alt="202208121622302" title="202208121622302" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p>生成 Token</p>
<blockquote>
<p>Token用于picgo操作Gitee repository，生成Token操作如下：<br><br>
快捷进入： https://gitee.com/profile/personal_access_tokens/new</p>
</blockquote>
<p>或者根据下列步骤进入：</p>
<ul>
<li>
<p>点击头像 -> 设置 -> 私人令牌 -> 生成新令牌 -> 只勾上 “projects” 权限 -> 提交， 如图所示：</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121648087.png" alt="202208121648087" title="202208121648087" loading="lazy"></p>
</li>
<li>
<p>保存 Token 串</p>
</li>
</ul>
<p>Tips： 创建成功后，会生成一串token，这串token之后不会再显示，所以第一次看到的时候，就要好好保存。</p>
</li>
</ol>
<h4 id="配置picgo">配置picgo</h4>
<ol>
<li>
<p>安装 Gitee 上传插件</p>
<blockquote>
<p>因为官方默认不支持gitee图床，所以需要单独下载插件（安装插件需要 <code>nodejs</code> 环境）</p>
</blockquote>
<p>启动 picgo -> 进入“插件设置” -> 搜索 “gitee” -> 点击插件图片的“安装”即可，本文使用 <code>gitee-uploader</code> 插件来进行演示，其他插件自行测试</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121703315.png" alt="202208121703315" title="202208121703315" loading="lazy"></p>
<p>Tips： 插件装完后，重启生效</p>
</li>
<li>
<p>配置 Gitee 插件</p>
<p>进入“图床设置” -> gitee， 依次填入相关配置如下所示，填写如下：</p>
<ul>
<li>
<p><code>*repo</code>： 用户名/仓库名（必填）</p>
</li>
<li>
<p><code>branch</code>: 分支名（默认: master）</p>
</li>
<li>
<p><code>*token</code>: 私人令牌（必填）</p>
</li>
<li>
<p><code>path</code>: 上传路径，仓库里的图片保存路径</p>
</li>
<li>
<p><code>customPath</code>: 定制路径</p>
</li>
<li>
<p><code>customUrl</code>: 图片定制URL</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121705053.png" alt="202208121705053" title="202208121705053" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p>其他配置（可选）</p>
<blockquote>
<p>下面的配置都是可选，大家可以根据自己的使用习惯来。</p>
</blockquote>
<ul>
<li>
<p>快捷键配置</p>
<p>默认是 <code>Ctrl+shift+p</code>，有自己习惯的，或者快捷键冲突可以在此修改</p>
</li>
<li>
<p>自定义链路格式</p>
<p>picgo 预设的链接格式有以下几种：</p>
<pre><code class="language-md">- Markdown: 
- HTML: <img src="https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png"/>
- URL: https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png
- UBB: https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png
- Custom: 此选项就是使用本项配置的自定义格式
</code></pre>
<p>默认格式： $url ，即上传后复制的URL为： https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png</p>
<p>由于本人是用来做 Markdown文章的图床，而Markdown预设的链接格式中没有文件名，vscode 的 <code>Markdown All in One</code> 会编译警告</p>
<p>故使用自定义链路格式，格式配置： <code></code></p>
<ul>
<li>
<p><code>$url</code>: 表示文件名的占位符</p>
</li>
<li>
<p><code>$fileName</code>: 表示 URL 的占位符</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121751148.png" alt="202208121751148" title="202208121751148" loading="lazy"></p>
<p>修改后的自定义链路格式效果： <code>!(https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png "202208051649953")</code></p>
</li>
<li>
<p>Tips:配置好 <code>自定义链路格式</code> 后别忘了去 “上传区” 中的链路格式选上 <code>Custom</code> 来使用</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208121755102.png" alt="202208121755102" title="202208121755102" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p>开机自启</p>
</li>
<li>
<p>时间戳重命名</p>
<p>开启效果： 上传图片文件名会自动改成上传时的时间戳</p>
</li>
<li>
<p>开启上传提示</p>
</li>
<li>
<p>上传后自动复制URL</p>
<p>开启效果： 上传完制自动复制图片URL，直接粘贴即可</p>
</li>
<li>
<p>选择显示的图床</p>
<p>默认是 “图床设置” 下显示所有图床的，由于我只准备用 <code>gitee</code> 图床，故将其他的图床都取消了<br>
效果： 图床设置下只显示 <code>gitee</code> 图床</p>
</li>
</ul>
</li>
</ol>
<br>
<h2 id="测试">测试</h2>
<h3 id="上传测试">上传测试</h3>
<ol>
<li>
<p>上传图片</p>
<p>常用方式：</p>
<ul>
<li>将图片拖动到 “上传区” 里，或者拖动到 “mini窗口” 中</li>
<li>快捷键： <code>Ctrl+shift+p</code>。复制图片或者截图，然后使用快捷键上传；</li>
</ul>
</li>
<li>
<p>测试URL</p>
<p>在浏览器地址栏粘粘U，查看是否显示URL，如：<br>
https://gitee.com/librarookie/picgo/raw/master/img/202208051649953.png</p>
</li>
</ol>
<p><br>****</p>
<h2 id="faq">FAQ</h2>
<h3 id="xclip-no-found">xclip no found</h3>
<ul>
<li>
<p>如果你和我一样是Ubuntu系统，那你上传可能会遇到这个错误 <code>xclip no found</code>.</p>
</li>
<li>
<p>之所以上传失败，是因为需要先将图片复制到剪切板中，而这借助了 <code>xclip</code></p>
<pre><code class="language-sh"># 安装xclip
sudo apt install xclip
</code></pre>
</li>
</ul>
<h3 id="转移github图床上的图片到-gitee图床">转移GitHub图床上的图片到 Gitee图床</h3>
<blockquote>
<p>如果博友和我一样是从 GitHub图床 转到 gitee图床的，那以前的GitHub上面的图片可以通过下面的方法转移并使用</p>
</blockquote>
<ol>
<li>
<p>获取 GitHub图床库的URL</p>
<ol>
<li>
<p>进入 GitHub图床库，如：librarookie/picgo</p>
</li>
<li>
<p>依次点击仓库首页的 <code>Code -> https -> 复制</code>， 复制内容如： https://github.com/librarookie/picgo.git</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208160923995.png" alt="202208160923995" title="202208160923995" loading="lazy"></p>
</li>
</ol>
</li>
<li>
<p>同步图床数据</p>
<ul>
<li>
<p>同步 GitHub 中的图床库到 Gitee 图床库，步骤如下：</p>
<p><code>仓库设置 -功能设置 -同步 -仓库远程地址（用于强制同步）</code>, 然后将 GitHub仓库URL填入，保存</p>
<p><img src="https://gitee.com/librarookie/picgo/raw/master/img/202208160916507.png" alt="202208160916507" title="202208160916507" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p>更新文章中的图片URL</p>
<ol>
<li>
<p>打开文章，搜索 GitHub图床图片</p>
<p>GitHub图床图片URL格式前面部分都是一样的，由于之前我上传的时候配置了jsDelivr 加速访问：</p>
<p>所以图片URL类似： https://cdn.jsdelivr.net/gh/GitHub用户名/图床仓库名/二级文件夹/图片名称</p>
<p>如下所示：</p>
<pre><code class="language-md">https://cdn.jsdelivr.net/gh/librarookie/picgo/images/baidu.png
</code></pre>
</li>
<li>
<p>替换图片URL</p>
<p>由于浏览器无法替换，故将博文复制到本地文本编辑器中，并将图片URL替换为 Gitee图床图片URL</p>
<p>URL格式： https://gitee.com/Gitee用户名/图床仓库名/raw/分支名/二级文件夹/图片名称</p>
<p>如下所示：</p>
<pre><code class="language-md"># 图片baidu.png
https://cdn.jsdelivr.net/gh/librarookie/picgo/images/baidu.png-> https://gitee.com/librarookie/picgo/raw/main/images/baidu.png
</code></pre>
</li>
<li>
<p>批量替换（Linux）</p>
<blockquote>
<p>如果你也像我一样，文章在本地有备份（本地文章目录 <code>$BLOG_HOME/</code>） ，又刚好使用的 Linux 系统，那下面操作能帮你节省一些时间</p>
</blockquote>
<ol>
<li>
<p>查找（grep）</p>
<pre><code class="language-sh"># 用法
grep -rn "目标字符串" ./
# 栗子
grep -rn "https://cdn.jsdelivr.net/gh/librarookie/picgo/images" $BLOG_HOME/
</code></pre>
</li>
<li>
<p>替换</p>
<pre><code class="language-sh"># 用法
sed -i "s/目标字符串/替换字符串/g" `grep -rl 目标字符串 ./`
# 栗子
sed -i "s#https://cdn.jsdelivr.net/gh/librarookie/picgo/images#https://gitee.com/librarookie/picgo/raw/main/images#g" `grep -rl https://cdn.jsdelivr.net/gh/librarookie/picgo/images $BLOG_HOME/`
</code></pre>
</li>
</ol>
<p>参数解释：</p>
<ul>
<li>grep:
<ul>
<li><code>r</code> : 搜索子目录，即当前./下的所有子目录</li>
<li><code>n</code> : 打印行号</li>
<li><code>l</code> : 查找到匹配字符串的文件名 （注意， 是含有匹配字符串的文件,也就是含有原文本的文件）</li>
</ul>
</li>
<li>sed:
<ul>
<li><code>i</code> : 直接修改文件内容</li>
<li><code>#</code> : 由于替换串中带 <code>/</code> ，所以使用 <code>#</code> 代替 <code>/</code> ，（也可以使用其他的符号代替）</li>
</ul>
</li>
</ul>
</li>
</ol>
<p>Tips:</p>
<ul>
<li>由于图片是从 GitHub仓库同步过来的的，所以Gitee仓库中的图片URL中的 <code>分支名</code> 和 <code>二级文件夹</code> 和 GitHub仓库一致；</li>
<li>Gitee仓库必须是开源仓库，不然其他网站的图片显示不了；</li>
<li>图片的扩展名好像有影响，推荐使用png格式进行上传测试；</li>
</ul>
</li>
<li>
<p>验证图片</p>
<p>可以将图片放到其他平台查看即可（个人观点：将图片URL放置到浏览器的无痕模式中访问即可）</p>
</li>
</ol>
<br>
<br>
<p>Via</p>
<ul>
<li>https://picgo.github.io/picgo-Doc/zh/guide/</li>
</ul><br><br>
来源：https://www.cnblogs.com/librarookie/p/16592410.html
頁:
[1]