需求描述

由于我平常写博客时都是使用的Typora,而使用Typora时最棘手的一个问题就是图片管理问题,由于Markdown中图片和内容是分离的,图片的保存方式无非是本地存储或者使用图床,对于经常写博客的同学来说,使用图床才是更好的选择,而我使用的就是 Typora + picGo + 蓝空图床 的组合套装来管理博客中的图片

但是这套组合依旧有个小问题,就是图片本地存储和远程存储只能二选一,要么保存到本地目录中,要么上传到图床,对于经常写博客的我来说,图片的管理,备份,迁移是个大问题。

image-20241015144505201

小孩子才做选择,我希望写的每一篇文章,文章内的图片即能保存到以文章名称命名的本地文件夹里,又能正常使用图床,这样即便图床崩了,也有一份本地备份,而本地备份又能将图片和文章一起备份,比如上传到GitHub, 方便数据恢复。

还有一个重要的原因是,在没有搭建博客之前我习惯把文章发表到博客园上,所以作为白嫖党的我就顺理成章地使用了博客园的图床,但是由于博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,不愿加入太多广告而导致经营困难,一直在倒闭的边缘徘徊

image-20241015145827783

了解更多详情可参考

程序员都用过的博客园,弹尽粮绝、命悬一线,要坚持不下去了

求救信:救下园子,保住这块开发者的天地

救园行动——赞助商计划

会员力量:非常感谢成为终身会员的园友

秋天希望的田野,九月最后的救园:终身会员计划

救园最后7天:「坚持你所相信的,相信你所坚持的」

风雨过后见彩虹:救园成功

园子商业化的烦恼:吐槽阿里云,得罪了用户

在这里,我对之前薅博客园羊毛的行为表示歉意,同时呼吁更多的有志之士加入到拯救园子的行动中来,共同为开发者打造一个纯净的技术交流社区贡献一份力量。

救园方式:

言归正传,对于之前使用到博客园图床的文章来说就需要批量备份并迁移,如果每篇文章都单独手动处理,工作量将是巨大的。

为此,我专门写了个工具来帮助我管理博客中的图片。

工具使用

工具获取及配置说明详见:

Gitee: https://gitee.com/an_shiguang/markdown-image-backup-tool

GitHub: https://github.com/Shiguang-coding/MarkdownImageBackupTool

工具可直接从 GiteeGitHub上获取,下面我来演示下具体如何使用

图片批量下载或复制到本地

  • 对于本地存储的图片 -> 复制并保存到指定目录
  • 对于图床存储的图片 -> 下载并保存到指定目录

1、指定Markdown文件所在的目录及输出目录

1
2
3
4
// 指定Markdown文件所在的目录
String markdownFolderPath = "D:\\Desktop\\test";
// 指定图片备份的目标目录
String outputFolderPath = "D:\\Desktop\\back";

这里我把原文件放到 D:\Desktop\Test目录下,一篇文章使用的是图床存储,两篇文章使用的是本地存储

图片备份目录我这里设置为D:\\Desktop\\back,最终会为每篇文章单独生成与文章同名的目录保存到这里

下面三篇文章图片数量依次是: 两张、四张、五张

image-20241015153602637

本地存储图片路径格式:

可以是绝对路径,也可以是相对路径

例如,使用Typora保存的图片,如果没有配置指定目录,默认输出目录为:

C:/Users/shiguang/AppData/Roaming/Typora/typora-user-images

image-20241015154247933

图床存储图片路径格式:

直接引用图片URL路径地址

image-20241015154653558

2、配置是否将图床图片路径替换为本地图片路径

1
2
// 是否将图床图片路径替换为本地图片路径
boolean replaceImageBedWithLocal = false;

如果设置为true,则会生成一篇同名文章到目标目录并将文章中的图片路径替换为本地图片路径

另外,由于本地存储的文件可能使用的绝对路径,图片及文章一起备份时可能会使图片失效,所以如果文章中引用的图片地址使用的是绝对路径时,也会生成一篇同名文章到目标目录并将文章中的图片绝对路径替换为相对路径。

不将图床路径替换为本地路径效果

直接运行Main方法,日志输入如下:

可以看到保存的图片数量与我们的预期是吻合的

image-20241015175858750

检查目标目录的文件生成情况,可以看到有个单独的logs目录,各个文章同名的目录(存储每篇文章所引用更的图片),以及所有新生成的需要转换图片路径的文章。

image-20241015175930331

日志文件:

logs目录下记录的是每篇文章路径替换的记录日志

image-20241015161431434

对于第一篇文章,由于我们即没有将图床路径替换为本地路径,也没有将本地路径替换为图床路径,也没有将本地绝对路径转为相对路径,所以目录内没有任何日志文件

image-20241015161627762

对于剩余了两篇文章,由于文章中引用的图片路径格式为本地资源绝对路径,所以需要将绝对路径替换为相对路径,生成记录将绝对路径替换为相对路径替换详情的日志文件absolute_to_relative.txt、记录文章替换前后内容的日志文件content_log.txt

image-20241015180951306

absolute_to_relative.txt

image-20241015181525392

content_log.txt:

替换前内容

image-20241015181618117

替换后内容

image-20241015181650180

图片文件:

每篇文章引用的图片都单独保存在了与文章同名的目录内

image-20241015161934788

Markdown文件:

对于第一篇文章,由于我们即没有将图床路径替换为本地路径,也没有将本地路径替换为图床路径,也没有将本地绝对路径转为相对路径,所以不需要生成Markdown文件

对于剩余了两篇文章,由于文章中引用的图片路径格式为本地资源绝对路径,所以需要将绝对路径替换为相对路径,也就需要生成相应的Markdown文件

image-20241015181808841

将图床路径替换为本地路径效果

我们设置 replaceImageBedWithLocal = true,将文章中图片的图床路径改为本地路径

1
2
// 是否将图床图片路径替换为本地图片路径
boolean replaceImageBedWithLocal = true;

执行日志如下

image-20241015182247232

由于需要将文章中图片的图床路径替换为本地路径,所以需要生成Markdown文件,记录将图床路径替换为本地路径替换详情的日志文件 imagebed_to_local.txt,记录文章替换前后内容的日志文件content_log.txt

日志文件:

输出的日志文件如下所示

image-20241015183216954

imagebed_to_local.txt:

image-20241015183407969

content_log.txt:

替换前

image-20241015183505608

替换后

image-20241015183541089

Markdown文件:

将文章中引用的图床路径替换为本地相对资源路径

image-20241015184243912

图片批量上传到图床并替换图片路径

本工具中使用到的图床为蓝空图床,如需使用其他图床可自行拓展

1
2
// 是否将本地图片上传到图床服务并替换图片路径
boolean uploadToImageBed = false;

如果设置为true,则会将所有文章中的引用的本地图片上传到图床并将本地路径替换为图床路径

执行日志如下

image-20241015184600294

由于需要将文章中图片的本地路径替换为图床路径,所以需要生成Markdown文件,记录将本地路径替换为图床路径替换详情的日志文件 local_to_imagebed.txt,记录文章替换前后内容的日志文件content_log.txt

日志文件:

输出的日志文件如下所示

image-20241015184931747

local_to_imagebed.txt:

image-20241015185000518

content_log.txt:

替换前

image-20241015185101525

替换后

image-20241015185146253

Markdown文件:

将文章中引用的本地路径替换为图床路径

image-20241015185314850

异常处理

如果处理过程中发生错误,控制台会打印相关错误日志

image-20241015214701543

error_log中也会记录详细的堆栈日志,方便排查问题

image-20241015221044285

相关文章推荐

PicGo 搭建免费图床实现 Typora 图片自动上传

基于博客园搭建 Typora 免费图床

基于 CSDN 搭建 Typora 免费图床

基于 Vercel 搭建免费图床

蓝空图床数据迁移

图片防盗链导致图片无法加载解决方法