VScode PicGo Github jsdelivr使用图床书写Markdown

VScode是一款强大的编辑器,PicGo是图床工具,Github是代码托管平台,jsdelivr是CDN加速服务。

在写作Markdown文档时,我们经常需要插入图片,直接将图片上传到GitHub可能会遇到一些问题,比如图片大小限制、加载速度慢等,为了解决这些问题,我们可以使用图床服务将图片上传到一个专门用于存储和分发图片的服务器上,然后在Markdown文档中引用这个服务器上的链接,在这篇文章中,我将介绍如何使用VScode、PicGoGithub和jsdelivr来创建一个图床。

一、安装和配置VScode

VScode PicGo Github jsdelivr使用图床书写Markdown

我们需要安装VScode,VScode是一个开源的代码编辑器,支持几乎所有的编程语言,并且有很多插件可以使用,你可以在VScode的官网上下载并安装。

安装完成后,我们需要安装一些有用的插件。"Markdown All in One"插件可以帮助我们更好地编写Markdown文档,"Live Server"插件可以让我们实时预览我们的Markdown文档。

二、安装和配置PicGo

PicGo是一个用于快速上传图片到图床的工具,你可以在PicGo的官网上下载并安装。

安装完成后,我们需要配置PicGo,打开PicGo的设置界面,选择"图床设置",然后添加一个新的图床,在这个新的图床中,我们需要填写以下信息:

名称:这个名称是你在PicGo中识别这个图床的方式,你可以随便填写。

选项:这个选项是你需要填写的图床的API地址,对于jsdelivr,这个地址是https://cdn.jsdelivr.net/gh/你的用户名/仓库名@分支名/

路径:这个路径是你的图片在图床上的存储路径,你需要根据你的需求来填写。

配置完成后,我们就可以使用PicGo来上传图片了,只需要将图片拖拽到PicGo的窗口中,PicGo就会自动将图片上传到我们配置的图床上。

三、使用Github作为图床

VScode PicGo Github jsdelivr使用图床书写Markdown

我们可以使用Github作为我们的图床,我们需要在Github上创建一个新的仓库,我们将这个仓库设置为公开的,这样其他人就可以访问我们的图片了。

接下来,我们需要在我们的Markdown文档中使用Github的链接来引用我们的图片,如果我们的图片名为example.jpg,那么我们可以使用以下的链接来引用我们的图片:

![example](https://cdn.jsdelivr.net/gh/你的用户名/仓库名@分支名/example.jpg)

四、使用jsdelivr作为图床

除了Github,我们还可以使用jsdelivr作为我们的图床,jsdelivr是一个免费的CDN服务,它可以帮助我们更快地加载图片。

我们需要在Github上创建一个新的仓库,我们将这个仓库设置为公开的,并且启用Github Pages功能,这样,我们就可以通过https://你的用户名.github.io/仓库名来访问我们的仓库了。

接下来,我们需要在我们的Markdown文档中使用jsdelivr的链接来引用我们的图片,如果我们的图片名为example.jpg,那么我们可以使用以下的链接来引用我们的图片:

![example](https://cdn.jsdelivr.net/gh/你的用户名/仓库名@分支名/example.jpg)

以上就是如何使用VScode、PicGo、Github和jsdelivr来创建一个图床的方法,希望对你有所帮助。

问题与解答

VScode PicGo Github jsdelivr使用图床书写Markdown

1、Q: PicGo是什么?

A: PicGo是一个用于快速上传图片到图床的工具,它支持多种图床服务,包括Github、七牛云、阿里云等。

2、Q: 为什么我们需要使用图床?

A: 使用图床可以将图片上传到一个专门用于存储和分发图片的服务器上,从而避免直接将图片上传到GitHub可能遇到的问题,如图片大小限制、加载速度慢等。

3、Q: 如何配置PicGo?

A: 打开PicGo的设置界面,选择"图床设置",然后添加一个新的图床,在这个新的图床中,我们需要填写图床的名称、选项(即图床的API地址)和路径。

4、Q: 如何使用Github作为图床?

A: 我们需要在Github上创建一个新的仓库,并将其设置为公开的,我们在Markdown文档中使用Github的链接来引用我们的图片。

原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/432013.html

Like (0)
Donate 微信扫一扫 微信扫一扫
K-seo的头像K-seoSEO优化员
Previous 2024-04-20 07:14
Next 2024-04-20 07:22

相关推荐

  • vscode编写网页制作

    一、如何用代码制作网页要用代码制作网页,首先需要了解HTML、CSS和JavaScript这三种基本的网页技术,HTML(超文本标记语言)用于定义网页的结构;CSS(层叠样式表)用于设置网页的样式;JavaScript用于实现网页的交互功能,接下来,我们将以一个简单的网页为例,介绍如何使用HTML、CSS和JavaScript来制作网……

    2023-11-20
    0500
  • vscode连接远程服务器突然失败

    在现代软件开发中,远程服务器的使用已经成为了一种常态,无论是进行版本控制,还是进行代码调试,或者是运行复杂的计算任务,我们都需要连接到远程服务器,而Visual Studio Code(简称VSCode)作为一款强大的代码编辑器,也提供了丰富的插件和功能,使得我们可以方便地连接远程服务器。1. 安装VSCode我们需要在本地计算机上安……

    2024-01-25
    0170
  • vscode中如何导入第三方库

    在Visual Studio Code(VSCode)中导入第三方库的方法有很多,这里我们主要介绍两种常见的方法:通过Python扩展和通过pip安装。通过Python扩展导入第三方库1、打开VSCode,点击左侧的扩展图标,搜索“Python”,找到官方的Python扩展(作者为Microsoft),点击安装。2、安装完成后,重新加……

    2024-01-17
    0186
  • vscode怎么关闭自动保存

    在VSCode中,自动保存功能是一项非常实用的功能,它可以在你输入代码时自动保存你的更改,有时候你可能会发现这个功能并不是那么方便,比如你可能不希望在你修改文件时自动保存,或者你可能希望手动控制保存的时间,在这种情况下,你可以选择关闭VSCode的自动保存功能,以下是如何关闭VSCode的自动保存功能的详细步骤。1、打开VSCode你……

    2024-01-23
    0420
  • vscode如何关闭自动更新

    在VSCode中,自动更新功能可以帮助用户保持编辑器的最新状态,以便获得最新的功能和修复的错误,有些用户可能希望关闭自动更新,以控制自己的开发环境,本文将介绍如何在VSCode中关闭自动更新功能。1. 了解自动更新我们需要了解VSCode的自动更新机制,VSCode使用Electron框架构建,Electron是一个跨平台的桌面应用程……

    2024-01-22
    0480
  • vscode如何运行html程序

    在VSCode中运行HTML程序,需要先安装Live Server插件,然后右键点击HTML文件,选择"Open with Live Server"。

    2024-01-19
    0233

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

免备案 高防CDN 无视CC/DDOS攻击 限时秒杀,10元即可体验  (专业解决各类攻击)>>点击进入