背景 #
直接把ob的md文件复制到hugo会出现图片不显示的情况,原理很简单,md图片链接识别存在问题,以下希望用一种尽可能方便的方案解决这个问题。
hugo项目文件配置 #
# 保存本地图片的真实目录
static/img
# 自动生成的网页的图片目录
public/img
# 仅是为了便于在obsidian编辑文章时能够查看图片额外设置的目录,可以不用
img
原理 #
Hugo 在执行 hugo
命令时,将根目录下的 static 文件夹中的内容直接复制到 public 文件夹。对于网页来说 public 就是根目录,所以我们在 static 中 创建一个 img 放图片,对应网页应该访问:

在此基础上,由于 obsidian 在使用绝对路径时,生成的地址如下:

- 因为开头缺少一个
/
,Hugo无法找到图片
所以决定改成相对路径:

根据目录穿越的原理,../../../../
数量足够多就能保证一定能穿越到根目录找到image文件夹,而且多写几个../
也没什么坏处。
- 安利自己写的小插件,本意是调整默认粘贴图片大小,为了自己使用方便,我也在粘贴图片的同时假如了足够多的
..
返回,确保直接迁移ob文章时,仍能够找到根目录的附件文件夹:https://github.com/cynicalight/obsidian-image-size
这样在原来 obsidian 的仓库中写的文章可以直接迁移到新的用于发博客的仓库,不用修改图片地址。
工作流 #
从已经写好的仓库中迁移文章到博客仓库的工作流就是:
bugo new posts/xxx.md
- 复制原仓库 img文件夹 到 博客仓库的 static/img
- 直接复制文章
- git 推上去
简单的脚本即可实现自动工作流。