vscode使用COS作为图床编写markdown文档
时间:2022-07-27
本文章向大家介绍vscode使用COS作为图床编写markdown文档,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
工作中很多人使用 vscode 来编写 markdown 文件,但插入图片时很不方便,本文介绍如何在 vscode 中使用腾讯云对象存储 COS 作为图床编写文档,其中会使用 PicGo 插件。
一、配置腾讯云 COS 存储桶
登录腾讯云控制台后访问存储桶管理页面,我们在这里创建一个存储桶。
在这个页面时要注意以下几点:
- 名称为存储桶的名字,在配置时使用,此例用 test,系统会自动加上您的 appid 生成完整的桶名。
- 所属地域这个选择后,请求的域名会随之变化,比如说选择了“广州”后,访问域名会变成*.cos.ap-guangzhou.myqcloud.com
- 如果做图床,一般选择公有读私有写。
二、配置密钥
使用插件自动上传图片需要配置一个密钥供插件使用。访问https://console.cloud.tencent.com/cam/capi,新建密钥。生成的密钥如下图:
三、安装 PicGo 插件
在 vscode 上搜索并安装 PicGo 插件,如下图:
四、配置插件
在设置中搜索 PicGo,并进行配置。
主要配置如下:
- Picgo › Pic Bed: Current,选择"tcyun",即腾讯云。
- Picgo › Pic Bed › Tcyun: App ID,设置为您的 App ID,为一串数字。
- Picgo › Pic Bed › Tcyun: Area,您的存储桶所在区域,在创建存储桶时提供,如“ap-guangzhou”
- Picgo › Pic Bed › Tcyun: Bucket,存储桶的名称,一般是桶名+“-”您的 appid,如“test-1251603849”
- Picgo › Pic Bed › Tcyun: Custom Url,文件访问的 url,这里直接填请求域名,如本例是“https://test-1251603849.cos.ap-guangzhou.myqcloud.com”
- Picgo › Pic Bed › Tcyun: Secret ID,在上面生成密码时生成
- Picgo › Pic Bed › Tcyun: Secret Key,在上面生成密码时生成
- Picgo › Pic Bed › Tcyun: Version,使用默认的 v5 就行了
最后生成的配置在 settings.json 是:
"picgo.picBed.tcyun.area": "ap-guangzhou", "picgo.picBed.tcyun.bucket": "test-1251603849", "picgo.picBed.tcyun.secretKey": "NYaRkz1t***********D7pUzcU7", "picgo.picBed.tcyun.secretId": "AKIDtawf************HpElsKd", "picgo.picBed.current": "tcyun", "picgo.picBed.tcyun.appId": "1251603849", "picgo.picBed.tcyun.path": "test/vsautouplods/", "picgo.picBed.tcyun.customUrl": "https://test-1251603849.cos.ap-guangzhou.myqcloud.com",注意: picgo.picBed.tcyun.path 没有办法在配置表单中配置,可能是插件的 bug,文件会直接上传到桶的根目录,如要设置子目录,就需要手工修改 settings.json 文件。
五、使用方法
- 使用剪贴板中的图片
使用剪切功能在剪贴板上生成一个图片,在 md 文档中按 Option+Command+U(mac)或者 Ctrl+Alt+U(windows)组合键,会自动在文档中生成图片的 markdown 格式的 URL,如下图:
- 使用 finder 或者 explore 上传一个图片
在 md 文档中按 Option+Command+E(mac)或者 Ctrl+Alt+E(windows)组合键,会打开一个 finder 或者 explore 窗口让您选择一个图片,确认后自动在文档中生成图片的 markdown 格式的 URL。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JBrowse安装配置的一些教程
- 对不起,网上找的Redis分布式锁都有漏洞!
- 打卡群刷题总结0722——颜色分类
- 为什么Python没有main函数?
- 构建对象检测模型
- OpenCV4.4 + YOLOv4 真的可以运行了…..
- 基于分类任务的信号(EEG)处理
- 面试:如何决定使用 HashMap 还是 TreeMap?
- 有理有据:一篇来自前端同学对后端接口的吐槽!
- 【从0到1学算法】选择排序
- 【从0到1学算法】大O表示法
- 锦囊篇|一文摸懂AsyncTask
- 在Substrate链上跑Solidity ERC20智能合约
- 【Nginx】实现负载均衡、限流、缓存、黑白名单和灰度发布,这是最全的一篇了!
- 对称二叉树