让Obsidian图片完美适配静态博客：多端同步、无裂图、零烦恼

许多使用 Markdown 编写静态博客的朋友，在接触 Obsidian 时常被其“内部 Wiki 语法”劝退：本地插入的图片显示正常，但一旦 push 到 GitHub 或部署到 Vercel，图片全裂，令人抓狂。本文将详细指导你优化 Obsidian 的图片处理流程，确保输出的 Markdown 语法 100% 适配 Hugo、Hexo、VitePress、Jekyll、FARIA 等主流静态博客框架，同时支持手机端无缝接力，让你的写作体验顺畅无阻。

---

一、优化后的图片语法：标准、通用、优雅

优化后的 Markdown 图片语法如下：

![描述](../assets/images/test1.png)

特点：

1. 标准语法：符合 Markdown 通用规范，所有静态博客引擎均可识别。
2. 相对路径：兼容 Windows、macOS、Linux、Android 和 iOS 系统。
3. 无空格文件名：避免 URL 编码（如 %20），确保链接干净且可靠。

---

二、3分钟完成核心设置

以下三个步骤即可让 Obsidian 输出标准化的图片语法：

1. 关闭 Wiki 链接
   打开 Obsidian 设置 → 文件与链接 → 关闭“使用 [[WikiLink]]”选项。
   这将确保图片插入时使用标准 Markdown 语法，而不是 Obsidian 的内部 Wiki 格式。

2. 集中管理图片到独立文件夹
   在同一设置面板中，找到“附件默认存放路径”，选择“指定的附件文件夹”，并手动输入路径：

   assets/images

   （建议使用英文路径，避免中文导致兼容性问题。）

3. 强制使用相对路径
   继续在“文件与链接”面板中，找到“内部链接类型”，选择“基于当前笔记的相对路径”。

完成以上设置后，Obsidian 插入图片时会生成如下语法：

![image-20250326211243586](./.assets/image-20250326211243586.png)

这一语法已基本可用，但文件名中可能仍包含空格，需进一步优化。

---

三、安装插件，彻底消除空格烦恼

为了让图片文件名更规范，推荐安装 Paste Image Rename 插件，自动处理文件名中的空格问题。

安装步骤：

1. 打开 Obsidian 设置 → 社区插件 → 点击“浏览”。
2. 搜索“Paste Image Rename”，点击“安装”并“启用”。

配置方法：

1. 进入插件设置，开启“Auto Rename”自动重命名功能。
2. 可根据需要自定义命名规则（如添加日期前缀或去掉空格）。

配置完成后，插入图片将生成类似以下的语法，文件名整洁无空格：

![2025-09-20-image](../assets/images/2025-09-20-image.png)

---

四、多端同步避坑：.obsidian 文件夹要不要忽略？

结论：不要忽略 .obsidian 文件夹。

.obsidian 文件夹存储了当前仓库的配置信息和插件列表，不涉及隐私数据。将它 push 到 GitHub，不仅能确保多设备间的配置一致，还能实现“即拉即用”的效果。无论是在 PC 端还是手机端（Android/iOS），打开仓库后，图片路径和插件设置都能保持一致，写作体验无缝衔接。

注意： 如果涉及敏感信息（如 API 密钥），可检查 .obsidian 文件夹内容并酌情添加至 .gitignore。

---

五、模板加持：让 Front-matter 一步到位

通过 Obsidian 的模板功能，可以自动生成符合静态博客要求的 YAML Front-matter，提升写作效率。

设置步骤：

1. 在仓库根目录下创建 .obsidian/templates 文件夹。
2. 新建模板文件 post.md，内容示例：

   ---
   title: "{{date}}-{{title}}"
   date: {{date}}T{{time}}:00+08:00
   tags: []
   categories: []
   description: 
   draft: true
   ---
   
   # {{title}}

3. 启用核心插件“模板”：设置 → 核心插件 → 开启“模板”。
4. 新建文章时，使用快捷键 Ctrl+P → 输入“插入模板” → 选择 post.md，即可自动生成标准化的 Front-matter 和标题。

---

六、常见问题解答

Q1：已有图片裂了，能否批量修复？
A：使用 VS Code 的全局替换功能，将 ![[Pasted image xxx.png]] 替换为 ![xxx](../assets/images/xxx.png)。通过正则表达式（如 ![[Pasted image (.*?)\.png]] 替换为 ![$1](../assets/images/$1.png)），几秒即可完成批量修改。

Q2：能否将 PNG 图片统一转换为 WebP 格式？
A：安装 Obsidian 社区插件“Image Converter”，可在粘贴图片时自动转换为 WebP 格式或调整尺寸，同时保持路径规则不变。

Q3：与 Typora 用户协作会冲突吗？
A：只要 Typora 和 Obsidian 指向相同的 assets/images 文件夹，双方编辑的 Markdown 文件完全兼容，交叉编辑无压力。

---

通过以上步骤，你的 Obsidian 不仅能输出完美适配静态博客的图片语法，还能实现多端同步和高效写作。快去试试，告别裂图烦恼，享受顺畅的 Markdown 写作体验吧！

原文 https://blog.csdn.net/2301_79518550/article/details/151896638