Jekyll 和 Obsidian：使用 baseurl 时的图像 url

Question

我是 jekyll 的新手，一直在尝试建立一个网站，使用 Obsidian 来管理 markdown 帖子。

这是我的设置：

• 网站必须位于子文件夹中，所以我需要一个基本URL（例如：/blog）
• 我将所有图像都放在网站根级别的 /media 文件夹中，就像这样 http://example.com/blog/media/
• 在我的主页（index.html 以及类别页面）中，我正在制作显示摘录的帖子列表，每个摘录显示帖子内的标题图像（因此它需要是根相对或绝对路径，因为相同的图像标签从根页面和子文件夹中显示）。
• 正如我所说，我正在使用黑曜石，所以我更愿意将帖子中的图像链接保留为以下格式：

  ![](media/image.jpg)

  ，否则预览会中断，这对开发来说很烦人。

我尝试了多种方法，比如：

• 以 / 开头，如

  ![](/media/image.jpg)

  > 在没有 baseurl 的情况下可以在任何地方使用，不适用于 baseurl（始终转到 http://example.com/media/image.jpg 而不是 http:// /example.com/blog/media/image.jpg）
• 开头没有 /，就像这样

  ![](media/image.jpg)

  > 这是 Obsidian 指向图像的基本方式。当baseurl不为空时，它仅在根级别起作用，当从子文件夹转到http://example.com/sub/folders/media/image.jpg时。
• 以 ./ 开头，就像这样

  ![](./media/image.jpg)

  > 当 baseurl 不为空时，在根级别工作，但不在帖子中（转到 http://example.com/sub/folders/media/image.jpg ）（请注意，这也会破坏黑曜石图像预览:( )

我读过一些关于relative_url、液体过滤器和类似的东西，从我在测试中看到的最接近的结果是使用带有 / (

![](/media/image.jpg)

) 的格式，以及我所需要的一切总是会在 http://example.com 和 /media 之间添加 /blog/。

似乎 {{ site.baseurl }} 可以解决问题，但这会破坏黑曜石图像预览和链接。

有没有办法做到这一点，而无需在我的 img 标签中添加 {{ site.baseurl }} ？我想避免它，但似乎这是唯一有效的方法......？

感谢您的帮助！

Answer 1

您可以通过创建一个 hook 来在构建期间修改 Markdown 中渲染的 HTML 图像标签来解决此问题。本质上，尝试将字符串

/blog/

插入到

src

标签的

<img src="media/image.jpg" />

属性中。

在项目根目录的

.rb

文件夹中创建一个

_plugins

文件并复制此代码。此代码将迭代每个帖子，并将所有出现的第一个字符串替换为第二个字符串。

Jekyll::Hooks.register :posts, :post_render do |post|
  post.output.gsub!('<img src="media/', '<img src="/blog/media/')
end

Answer 2

谢谢兄弟，我已经成功应用这种方式在 Obsidian 和 Web 中显示我的 img。 我还在 _config.yml 中添加了其他配置：

插件： - 杰基尔分页 - ./_plugins/build_hook.rb

因为我还有一个插件价值。 这是单值配置：

插件：[jekyll-paginate]

只需要添加一个包含 build_hook.rb 文件或其他名称的文件夹。 重新部署，你就可以看到好的结果了！

这是我的博客（不过已经死了太久了，我会尽快更新的）