Demon学长1. 为什么需要Markdown图片自动归类
作为一名长期使用VS Code编写技术文档的开发者，我深刻体会到图片管理的重要性。当你在一个Markdown文件中插入十几张截图时，所有图片都散落在文档同目录下，那种混乱感简直让人崩溃。更糟糕的是，不同文档的图片混在一起，后期维护时根本分不清哪张图属于哪个文档。
1.1 传统方式的痛点
过去我尝试过几种常见的图片管理方式：
-
统一放在根目录images文件夹：虽然集中了图片，但所有文档的图片混在一起，命名冲突频繁发生。比如多个文档都有"架构图.png"，只能手动添加前缀后缀区分。
-
手动创建文档同名文件夹：每次新建Markdown文件都要手动建文件夹，插入图片时还要注意选择正确路径，操作繁琐容易出错。
-
使用绝对路径引用网络图片：虽然解决了本地存储问题，但一旦网络环境变化或图片服务不可用，文档就变成了"图文分离"的状态。
1.2 自动化方案的优势
通过VS Code的配置和Python脚本的组合方案，可以实现：
- 自动归类：新插入的图片自动按文档分类存储
- 智能命名：采用"文档名+时间戳"的命名规则避免冲突
- 批量迁移：将历史散落的图片自动整理到新位置
- 链接更新：自动修正文档中的图片引用路径
这套方案特别适合以下场景：
- 技术文档编写（如API文档、架构说明）
- 个人知识管理（学习笔记、读书笔记）
- 团队协作文档（需求文档、设计文档）
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. VS Code配置详解
2.1 配置入口与核心参数
在VS Code中，图片自动归类的核心配置项是Markdown > Copy Files: Destination。这个设置控制着从剪贴板粘贴图片时的存储行为。
具体配置路径：
- 打开VS Code设置面板
- Windows/Linux:
Ctrl + , - Mac:
Cmd + , - 或者点击左下角齿轮图标 → Settings
- Windows/Linux:
- 在搜索框输入：
Markdown > Copy Files: Destination - 点击"Add Item"按钮添加新规则
2.2 配置参数详解
推荐使用以下配置值：
code复制**/*.md
assets/${documentBaseName}/${documentBaseName}_${unixTime}.${fileExtName}
这个配置包含几个关键变量：
| 变量名 | 说明 | 示例值 |
|---|---|---|
${documentBaseName} |
当前Markdown文件名（不含扩展名） | 如果文件是"vue-tutorial.md"，则值为"vue-tutorial" |
${unixTime} |
当前时间戳（毫秒级） | "1712345678901" |
${fileExtName} |
图片文件扩展名 | "png"、"jpg"等 |
2.3 配置效果演示
假设我们有一个Markdown文件：
code复制/project/docs/vue-tutorial.md
当我们在该文件中粘贴一张截图时，图片会自动保存到：
code复制/project/docs/assets/vue-tutorial/vue-tutorial_1712345678901.png
这种结构有三大优势：
- 按文档分类存储，结构清晰
- 文件名包含时间戳，避免命名冲突
- 相对路径引用，便于项目迁移
3. 批量迁移旧图片的Python脚本
3.1 脚本设计思路
对于已经存在的散落图片，我开发了一个Python脚本来自动化迁移过程。脚本的主要功能：
- 遍历指定目录下的所有Markdown文件
- 识别文档中引用的图片
- 将图片移动到新的归类目录
- 更新文档中的图片引用路径
3.2 脚本完整代码与解析
python复制import os
import re
import shutil
from datetime import datetime
# 配置区 ==========================================
NOTE_EXT = '.md' # Markdown文件扩展名
ASSET_DIR = 'assets' # 图片存储目录名
IMAGE_E