vscode+gitee+picgo实现稳定图床

本文详细介绍了如何在VSCode中结合Gitee图床和PicGo插件,解决Markdown文档插入图片的问题,包括软件安装、插件配置和私人令牌的获取,以实现跨平台的图片管理与同步。
摘要由CSDN通过智能技术生成

1. 为什么使用vscode+gitee+picgo实现完美图床

  • 之前一直使用Typora写文档, 后来收费就弃用了, 在发现VSCode在添加MarkDown插件后, 使用起来也非常舒适, 之一使用了下来.
  • 当要发布文章时,MarkDown文档是不支持集成图片的, 这就非常难受, 而且在浏览器里边写边上传, 发现不可以一片多用, 换一个平台, 图片就会炸机, 然后就要重新去处理, 真的太麻烦了.
  • 然后就想到了使用图床, 最后发现只有Gitee创建的图床速度又快有稳定, 经过漫长的研究, 就有了这篇奶妈级的教程.

2. 安装VSCode

2.1 安装VSCode软件及相关插件

  1. 进入VSCode软件官网:https://code.visualstudio.com,然后下载VSCode。
    VSCode官网
  2. VSCode安装后,下载中文插件并安装。
    安装中文插件
  3. 安装Markdown插件:
    1. Markdown All in On
    2. Markdown Preview Github Styling
    3. Markdown PDF
    • Alt text
    1. 安装PicGo插件
    • alt text

3. 安装picgo

  1. 进入PicGo官网: PicGo官网

  2. 点击免费下载按钮
    alt text

  3. 找到一个正式版本, 比如现在最高的正式版是2.3.1, 找到这个版本的资源, 然后展开所有资源.
    alt text
    alt text

  4. 现在一般都是64位的系统, 可以下载这个软件.
    alt text

  5. 下载好后, 打开软件安装, 点击下一步.
    alt text

  6. 切换安装盘符和安装文件夹, 我这里是安装在 E:\PicGo, 换好后点击安装.
    alt text

  7. 安装完成后, 点击完成打开PicGo
    alt text

  8. 点击插件设置, 搜索gitee, 然后安装gitee-uploader 1.1.2
    alt text

  9. 点击安装后发生错误, 主要是由于PicGo软件是基于node.js, 用electron-vue开发的客户端, 这里我要去node.js 官网下载安装一下.
    alt text

  10. 打开node.js官网: node.js官网, 下载左边的正式版(LTS版本), 然后按着引导进行安装.
    alt text
    alt text

  11. 勾选我同意, 然后下一步
    alt text

  12. 切换盘符, 我放在E:\nodejs,点击ok, 然后一直点击next
    alt text
    alt text
    alt text
    alt text

  13. 点击Install进行安装.
    alt text

  14. 等待的时候会有个弹窗, 点击是
    alt text

  15. 点击Finish, 到这nodo.js就安装完成了, 然后重启一下PicGo, 右下角右键重启PicGo
    alt text

  16. 再回到插件设置, 搜索gitee, 然后安装gitee-uploader 1.1.2

  17. 安装中, 安装后会显示已完成alt text
    alt text

4. 准备Gitee图床

  1. 首先你要有一个Gitee账号, 没有的可以去官网创建一个. Gitee官网
    alt text

  2. 登陆后点击右上角的 + 号, 新建一个仓库
    alt text

  3. 设置仓库用户名, 比如我这里叫: pic_bed, 仓库设置为 开源 , 然后勾选初始化仓库, 模板文件设置为 ReadMe文件, 最后点击创建按钮.
    alt text

  4. 出现这个页面就说明仓库创建成功了.
    alt text

5. 配置相关设置

  1. 配置PicGo插件
  • alt text

  • repo:用户名/仓库名称,比如我自己的仓库yatok/picture-bed,找不到的可以直接复制仓库的url,复制浏览器的仓库地址,而不是页面左上角显示的,容易出现大小写问题

  • alt text

  • branch:分支,这里写上master

  • token:填入码云的私人令牌

  • path:路径,一般写上img,我默认没填

  • customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间

  1. 获取自己的token , 点击右上角找到设置点击
  • alt text
  • 点击私人令牌, 然后生成新令牌.
  • alt text
  • 选择和我相同的权限, 然后提交, 这里会验证一下账号密码(也就是登录密码).
  • alt text
  • 生成的私人令牌只会显示一次,一定要保存好, 如果丢失的话就需要重新生成.
  • alt text
  • 然后设置为默认图床后点击确定.
  • alt text
  • 测试一下是否有效, 截一张图, 按快捷键: Ctrl+shift+P, 右下角显示上传成功, 可以使用Ctrl+v 把图床的链接粘贴到Markdown文档.
  • alt text
  • 下面这张是获取网络图床显示的图片.
  • 去Gitee仓库看看上传的图片
  • alt text

尾声

  • 到此教程就结束了, 但是学习无止境, 祝大家在知识的海洋中勇往直前.
  • 转载: 请附上本文链接
  • 24
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值