Markdown图片批量上传-CSDN为例(免费图床)

1. 目标

在将Markdown格式的文档导入博客或其他网站时,本地图片无法直接导入,需要使用互联网可以访问的图片。

通过以下方法,可以使用Markdown文档中引用的图片批量上传至互联网。

2. 使用GitHub+jsDelivr作为免费图床

可以使用GitHub+jsDelivr作为免费图床,先将图片上传至GitHub的公共项目,再使用jsDelivr的CDN链接访问图片,最后替换Markdown引用的图片地址。

3. GitHub操作步骤

在GitHub中创建一个Public仓库,如下所示。

将创建的仓库克隆到本地,可使用TortoiseGit作为Git客户端,可参考 “TortoiseGit IDEA等配置Git服务器SSH密钥” https://blog.csdn.net/a82514921/article/details/104661707

在本地将Markdown中引用的图片按目录保存好,提交至GitHub中,提交完毕后如下所示。

在GitHub中对上述仓库创建release,如下所示。

没有创建release时的界面:

已经创建过release时的界面:

指定版本号并发布,当提交了新的内容后,需要使用新的版本号(或删除仓库后创建同名仓库继续使用旧的版本号)。

4. 检查jsDelivr的CDN链接内容

查看 https://www.jsdelivr.com/?docs=gh ,通过jsDelivr访问GitHub资源的URL格式如下:

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

如果直接访问 https://cdn.jsdelivr.net/gh/ ,会提示 “ Invalid URL. The URL structure is /gh/user/repo@version/file.js ”。

以上URL需要进行以下替换:

参数说明
https://cdn.jsdelivr.net/gh固定URL
userGitHub用户名
repoGitHub仓库名
versionGitHub仓库发布的release版本号
fileGitHub仓库中的文件路径

可以打开 https://cdn.jsdelivr.net/gh/user/repo@version/ 链接(最后的“/”不能省略),会显示当前relase对应的文件信息,示例如下 。

如果无法正常访问,需要等待一段时间,使jsDelivr对应GitHub的CDN链接可用。

5. 替换Markdown引用的图片地址

假如在Markdown中通过“[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YD7uYOUf-1583417166969)(pic/xx.jpg)]”的形式引用图片,可将目录名替换为jsDelivr的CDN中对应目录的地址。

完成以上操作后,可在CSDN等博客,或其他网站上传Markdown文件,其中引用的图片会被批量获取。

也可当作免费图床使用。

6. 为什么不直接使用GitHub或Gitee

若直接使用GitHub中的仓库的资源文件的raw形式,在CSDN中上传时,CSDN后台服务器无法获取到图片内容。

不直接使用GitHub或Gitee

若直接使用GitHub中的仓库的资源文件的raw形式,在CSDN中上传时,CSDN后台服务器无法获取到图片内容。

使用Gitee中的仓库的资源文件的raw形式,在CSDN中上传时,CSDN后台服务器可以获取到图片内容,但存在使用频率限制。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中使用 Markdown 渲染文档时,如果文档内容比较长,我们需要为用户提供侧边栏目录导航,方便用户快速定位到所需部分。下面是一个简单的方法来实现自动生成 Markdown 文档的侧边栏目录。 首先,我们需要安装 `markdown-it` 和 `markdown-it-toc`: ```bash npm install markdown-it markdown-it-toc --save ``` 然后,在 Vue 组件中引入并使用它们: ```javascript <template> <div> <!-- 目录导航 --> <div v-html="toc"></div> <!-- Markdown 内容 --> <div v-html="html"></div> </div> </template> <script> import MarkdownIt from 'markdown-it' import MarkdownItToc from 'markdown-it-toc' export default { data() { return { markdown: '# 一级标题\n\n## 二级标题\n\n### 三级标题', toc: '', // 目录导航 html: '', // 渲染后的 HTML } }, mounted() { // 解析 Markdown 文档 const md = new MarkdownIt() md.use(MarkdownItToc, { tocFirstLevel: 1 }) const result = md.render(this.markdown) // 生成目录导航 this.toc = md.toc // 渲染 Markdown 内容 this.html = result }, } </script> ``` 在上面的代码中,我们使用了 `markdown-it-toc` 插件来自动生成目录导航,并将导航内容存储在 `toc` 变量中。然后,我们使用 `v-html` 指令将导航和 Markdown 文档内容渲染到页面上。 注意,`markdown-it-toc` 插件需要在解析 Markdown 文档之前使用 `md.use(MarkdownItToc)` 方法来注册。在注册时,我们可以设置 `tocFirstLevel` 属性来指定目录导航的起始层级,默认为 `1`。 最后,我们需要使用 CSS 样式来美化目录导航和 Markdown 内容,以便更好地展示给用户。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值