(29) 试着学 Hexo - 奇淫技巧 - 快速上传你的图片到 imgur

前言

接下来来讲讲如何透过 VSCode 快速上传图片到 imgur 吧！

imgur

前面章节「(9) 试着学 Hexo - 图片空间的挑选」有讲到 imgur 很好用，但有一些问题，也就是关於「他们不允许你使用「热连结」的方式外连，也就是直接复制图片连结」这件事。

但是老实讲...我有莫约两千多张图片都是放在 imgur，所以...哎，不是。

如果你不在乎图片的死活，其实 imgur 真的是一个很好用的免费老牌图空东西，而我本身在撰写部落格时也会混着用，这个章节原本也打算与前一篇混在一起，但是因为太长了...所以只好将这个章节独立出一篇来讲，因为接下来将会搭配一个很好用的 VSCode 套件来直接透过上传到 imgur 并自动生成图片连结（超方便）

你可以下方官方图片看到有多方便

Imgur API

首先先开启 Imgur 并注册登入帐号，然後点这个网址来申请 Imgur API

然後填写图片红框栏位。

• Application name：随便想，最好自己可以认得
• Authorization type：OAuth 2 authorization without a callback URL

送出之後就会得到 Client ID 与 Client secret，这两个东西请务必复制留下来。

如果你不小心遗失的话，你就只好摸摸鼻子重新申请了，如果你是单纯忘记 Client ID，则可以透过 Setting -> Applications 查看

vscode-imgur

接下来就是替 VSCode 安装套件，透过 VSCode 上传图片到 imgur，所以要去扩充套件中搜寻「vscode-imgur」，然後安装插件。

安装完毕之後我们要设定一下刚刚再 imgur 申请的 Client ID 与 Client secret，否则会无法透过 VSCode 上传到 imgur。

而设定的方式是打开 VSCode 的 settings.json，在新版 VSCode 进入方法是左下角齿轮>然後右上角第二个图片

接下来将下方程序码填入即可

"vscode-imgur.client_id": "imgur 的 client_id",
"vscode-imgur.client_secret": "imgur 的 client_secret",
"vscode-imgur.preferUserUpload": true,

这样子就完成罗~

但是其实这边有一个最後一个设置要跑，也就是关於初次上传的部分，你先去找一个图片随便找，然後按下右键复制图片（你没看错），然後回到 VSCode 中按下组合按键 Ctrl + Alt + v，这时候你应该会看到这个视窗

接下来你就先停在这个视窗，因为你要回到刚刚我们没关闭的 Imgur 画面，这时候应该会跳出提示说，有人要透过 vscode-imgur，你只需要按下允许按钮，然後画面就会出现一组 PIN Code，这一段就是要贴回 VSCode 中的，那当你贴回去之後，你图片以後就可以直接上传到 Imgur 罗~

其他类似的套件

最後的最後，你可能会发生还有其他类似的套件

• PicGo
• Markdown Image
• Imgur-uploader

因为我个人只有使用过 vscode-imgur，所以才没介绍其他套件，但是我稍微看了一下 Markdown Image 也相当不错，所以你如果不喜欢我使用的这个套件，你也可以考虑上面其他三种唷~

而 Imgur 的设置流程应该大同小异哩~

那麽铁人赛文章就到这边结束了，不知不觉剩下两篇了...