vscode配置picgo的github的图床

vscode+github+picgo 搭建 markdown 图床

一、vscode 配置

1、安装 Markdown All in One 插件

Markdown All in One 插件作为 Markdown 编辑器非常好用,既可以预览,对语法的支持也非常好。

2、安装 markdownlint 插件

这是个功能强大的 Markdown 语法检查器,可以帮助你书写出规范的文档,同时避免书写错误导致文档无法渲染。
markdownlint 制定了很多书写规范,如果不按照它的规范编写文章,则会提示很多错误或警告。

3、安装 picgo 插件

可以下载 picgo 客户端来使用,但是这里直接在 vscode 中下载 picgo 插件也是可以的,只需要配置一下,配置方法在文章后面。

二、GitHub 配置

1、创建一个仓库,必须为public

2、获取 Tokens

① 进入个人设置页面,依次选择 【Developer settings】 –> 【Personal access tokens】,然后点击【Generate new token】来生成新的 tokens,此 token是上传时验证身份用的。

注意:这个【Developer settings】对新手很不友好,不好找.在设置页面的最下方.

② 添加描述,然后将 repo 选上

③ 将生成的字符串保存,关闭页面后将再也无法看到这个字符串了

三、picgo 配置

打开 vscode 的设置界面,搜索”picgo”定位到 picgo,具体配置如图:

配置picgo

  1. current 设置为 GitHub

  2. Branch 是我们仓库的分支,默认为 main

  3. custom url 使我们图片上传的连接,有两种方式可以使用

    1. 原生方式
      使用 GitHub 原生连接,格式为: https://raw.githubusercontent.com/[用户名]/[仓库名]/[分支名]
      我的例子:https://raw.githubusercontent.com/misswenzi/gallery/main
      原生方式有一个弊端就是,国内速度比较慢
    2. cdn 加速方式
      格式为:https://cdn.jsdelivr.net/gh/[用户名]/[仓库名]@[分支名]
      我的例子:https://cdn.jsdelivr.net/gh/misswenzi/gallery@main
  4. cdn 加速的优点是国内访问速度比较快

  5. Token:即 GitHub 中获取的 Tokens

四、测试

进入 vscode,新建一个 .md 文件,windows 下 【ctrl+alt+U】从剪贴板粘贴图片,【ctrl+alt+E】打开资源管理器,选择图片,如果上传成功,则搭建成功!

此时,去 GitHub 对应的仓库下查看,可以看到上传成功的图片。

在 vscode 中插入的图片会上传到 GitHub 的仓库中,如果删除了仓库里面的图片,那你的 Markdown 里面的图片链接就会失效。

20220819100154

首先不提好用不好用,反正我这样配置失败了,还请高人指点!

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2015-2023 Move Jian
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信