在 Jekyll markdown 集合中包含图像答案

【问题标题】：Include image in Jekyll markdown collection在 Jekyll markdown 集合中包含图像
【发布时间】：2015-10-20 13:33:04
【问题描述】：

我在我的 Jekyll 配置中创建了一个自定义集合：

collections:
  tutorials:
    output: true
    permalink: /tutorials/:path/

我有一个带有路径的降价文件：_tutorial/category/ios.md 我还有一张带有路径的图片：_tutorial/category/xcode.png

在 ios.md 我使用： ![xcode](xcode.png)

这应该是有意义的，因为它们位于同一目录中。

在 _site 生成的文件夹中，我看到了

tutorial/
  category/
    xcode.png
    ios/
      index.html

显然，生成的 HTML 正在寻找图像的错误位置，因为它们不再位于同一目录中。

我想改变我的结构让我的降价文件是_tutorial/category/ios/index.md，但是它所做的只是创建一个名为index的文件夹，所以问题是一样的。

在 Jekyll/Markdown 中包含图像的预期方式是什么？

我应该将它们全部保存在站点根目录的文件夹中吗？这显然可行，但很难跟踪与每个帖子相关联的图像......

【问题讨论】：

如果你有 ios.md 和 ios/xcode.png 可以吗？
好主意，似乎可行。有点违反直觉，也不自然......我的另一个解决方法是使用![xcode](../xcode.png)。但我也想知道最佳做法是什么。
最佳做法是最有可能将图像保存在文档中提到的一个 /assets 文件夹中。您可以以对您有意义的方式组织您的网站。我在与他们的页面相同的文件夹中有图像，我没有遇到这个问题，因为我使用 .html 页面（在这种情况下，Jekyll 不会自动创建文件夹 + index.html 以获得好的链接）。跨度>
我可以在扩展名为 .html 的文件中写入 markdown 吗？
可能......在你的布局中你可以做{{ content | markdownify }}。这个我没试过。

【解决方案1】：

因为您的收藏有一个以斜线结尾的永久链接：

permalink: /tutorials/:path/

Jekyll 会将您的 Markdown 文件转换为 index.html 文件以使链接更美观。所以ios.md 变成了ios/index.html。

您可以通过使用带有扩展名的链接完全避开这个问题。这是the default option。注意没有尾部斜杠：

permalink: /tutorials/:path

如果您仍然想要无扩展名的链接，那么为了使相对图像路径起作用，您可以将 Markdown 上移一个目录：

ios.md
ios/
  xcode.png

或将图像路径更改为![xcode](../xcode.png)。这两种方法似乎都违反直觉。

【讨论】：