首页 > 其他分享 >vscode+gitee+picgo实现稳定图床

vscode+gitee+picgo实现稳定图床

时间:2024-03-02 22:34:30浏览次数:27  
标签:插件 vscode 点击 gitee 图床 PicGo Gitee 安装

目录:

目录

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

为什么要选择VSCode+PicGo+Gitee
主要是平时写文章的平台,要么是收会员费用,要么是本站图片链接只能在本站网站访问,换一个平台,图片就裂了,图片问题困扰我很久,也是经过很多试用,最终选定这个工具组合,之前图片仓库使用的是Github,但是在国内,Github的访问速度简直感人!所以后来就把Github替换成了Gitee,Gitee在国内,访问速度快多了,之前的写文章使用的是Typora,但是现在收费了,就改用VSCode。

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

尾声

  • 到此教程就结束了, 但是学习无止境, 祝大家在知识的海洋中勇往直前.
  • 转载: 请附上本文链接

标签:插件,vscode,点击,gitee,图床,PicGo,Gitee,安装
From: https://www.cnblogs.com/LXHYouth/p/18049377

相关文章

  • VScode 配置php调试环境变量. phpstudy + nginx+ php7.4, 解决无法断点问题
    参考大佬的帖子https://www.cnblogs.com/hfdp/p/17028596.htmlhttps://blog.csdn.net/qq_61739597/article/details/132433472 (远程调试)踩坑经验我从phpstudy添加好网站才进行配置.当配置好之后,一直没有断点下来. 非常郁闷找不到问题. 写了一个demo,php文件,通过......
  • VSCode编写多线程程序碰到 mutex 和 thread 未定义的报错问题
    硬件:ThinkBook16G5+IRH系统:Win11家庭中文版22H2如果碰到在线安装MinGW-w64失败的问题可以参考以下链接在线安装MinGW-w64失败下载mingw-std-threads文件夹目前MinGWGCC缺少标准的C++11线程类,该库补充实现有关thread和mutex的内容https://github.com/mega......
  • lunix vscode笔记
    笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死......
  • 如何使用 vscode 搭建 Django Restful API 开发环境 All In One
    如何使用vscode搭建DjangoRestfulAPI开发环境AllInOnevscode+Django(Python)demos(......
  • 使用vscode进行markdown编辑
    使用vscode进行markdown编辑从官网下载vscode下载地址如果下载的是安装程序,在安装过程中请勾选右键用vscode打开文件、文件夹选项,这样方便以后直接对文件夹和文件进行使用。因为我这里下载的是压缩包,不用安装直接用解压后文件夹中的Code.exe,导致对文件或文件夹右键时没有用vs......
  • 记录 Ubuntu20.04 配置 vscode/gcc/g++ 和 java17
    换源问题在网上找的教程,基本都是安装好Ubuntu后立刻更换软件下载源,但20.04版本我换源之后非常慢,并且后续安装软件时出现依赖问题无法解决等等,我试了清华源和自动选择最佳服务器都不行,最后只能重装。vscode参考:Ubuntu20.04下安装VSCode(配置C/C++开发环境)建议用sudosnapinstal......
  • VSCode SSH连接服务器
    使用场景:本地VSCode通过SSH访问(远程)服务器通过SSH连接远程服务器:sshuser@hostname(SSH默认端口为22),然后提示需要输入登录密码参考:https://code.visualstudio.com/docs/remote/ssh后续TODO:generateSSHkey参考资料:https://zhuanlan.zhihu.com/p/294933020......
  • 基于VsCode platformio的stm32开发环境搭建
    基于VsCodeplatformio的stm32开发环境搭建背景VsCode作为当下流行的编辑器,且不单单是一个编辑器里面集成了很多插件,使用这些插件可以完成很多功能。STM32开发环境除了KEIL与IAR,其实还有很多其他的开方方式,ST官方提供了很多的开发软件,基于Eclipse也可以搭建一套,使用VsCode配合......
  • VSCode+Vim 开发
    VSCode+Vim开发一、安装及配置vim插件0.安装vim拓展1.拷贝配置到settings.json中settings.json在"文件"->"首选项"->"设置"->"文本编辑器"{"vim.easymotion":true,"vim.incsearch":true,"vim.useSystemCl......
  • 修改VSCODE默认模板(live template)
    1.问题在使用VSCDOE编写html文件时,对于使用的语言这一块,公司统一要求但是VSCODE默认的是,这就需要我们每次都手改一下,非常麻烦,结合IDEA里面使用livetemplate的经历我就在思考能否修改VSCODE的相关配置文件达到同样的效果呢?首先我找到了这个参考:如何修改vscode模板这里要求我......