Question

我想知道其他人在使用Jekyll时如何为个别帖子组织资产。例如，如果帖子有图像，您只是将其转储到共享图像文件夹中吗？我真的不喜欢这样做的想法 - 这意味着当我认为它们应该配对时，图像与帖子完全分开。

Answer 1

我写了一个插件，让我轻松地在子目录中组织资产：
https://github.com/samrayner/jekyll-asset-path-plugin

{% asset_path my-image.png %}

在2013-01-01之后 - 标题后会输出：

/assets/posts/post-title/my-image.png

页面my-first-page中的

将输出：

/assets/my-first-page/my-image.png

Answer 2

我更喜欢将图像视为包含在零个或多个页面中的独立资产。大多数情况下，我的图像显示在一个页面中。有时我想将它们放在多个页面中，而在其他情况下我根本不链接图像。如果您的工作流程是将每个图像放在带有帖子的目录中，那么找到它们开始需要进行大量搜索，并且您必须为不属于特定帖子的图像提供不同的图像。

我使用的方法是在频谱的另一面。我有一个图像目录（由“/ images”提供），我的100％图像都放在那里。这样做的好处是：

当我在帖子中添加图片时，很容易知道要使用的路径。它始终是：
```
/images/{image-name}
```
例如：http://alanwsmith.com/i/aws-20111017--0906-02。这使得编写插件成为可能，因此您只需要输入图像名称，并自动填写已知路径的其余部分。
使用像Photo Mechanic这样的应用程序，在本地浏览单个目录并查看每个图像非常容易。如果我想在另一个页面上包含图像，这会大大缩短查找时间。
如果我想将图像发送给某人而不将其实际包含在页面中（即向他们发送指向图像文件的直接链接），则没有单独的位置/过程。我只是将图像放在标准目录中并发送直接链接。

如果您想要更高级一点，将所有图像保存在一个目录中也可以进行一些很好的调整。例如，即使我的图像的URL以“/ images”开头，图像实际上也存储在jekyll使用的目录之外的目录中。就我而言，源代码树的顶部如下所示：

./html
./source-files
./image-files

我的所有图像都存储在“./image-files”目录中。在我的apache配置中，我设置了一个别名，以便URL“/ images”指向“./image-files”目录。例如：

Alias /images /webroot/image-files

当我运行jekyll时，它会处理“./source-files”中的所有内容并将其放入“./html”中。因为所有图像都在这两个目录之外，所以jekyll永远不会看到/接触它们。随着图像库的增长，这将有助于加快速度，并防止大量不必要的文件复制。

我在Apache中的另一个调整是开启：

Options +MultiViews

这使您无需使用文件扩展名就可以调用图像（例如，没有'.jpg'，'。png'等等）。您可以在我上面提供的示例链接中看到。性能并不重要。我只是喜欢它的外观，它使我免于每次调用图像时都必须输入扩展名。

MultiViews还可以将一种格式的图像替换为另一种格式而无需重新编码。例如，如果删除“some-image.gif”并将其替换为“some-image.png”，则不必触及任何HTML。它仍将以“/ images / some-image”形式提供。需要做出这样的改变可能非常罕见。我认为这是一件有趣的事情。

最后，您可以做出关于允许或禁止浏览图像目录的单一决定。就个人而言，我只希望我的图像显示在我放置它们的位置。所以，我已经将我的images目录中的.htaccess文件设置为：

Options -Indexes

如果您打算在拥有数千或数万页和图像的网站上工作，这可能无法扩展。对于正常大小的个人网站，我发现这种方法可以使图像更容易维护。

Answer 3

就像你一样，我真的很讨厌将所有图像放在一个共享文件夹中。

大多数（如果不是全部）我的图片在一篇文章中都很有用，并且将它们与Markdown文件放在一起对于帖子管理来说真的更好：

我可以在一个步骤中将新帖子作为/_posts/的单个子文件夹删除，而无需将Markdown放在一个位置而将图像放在另一个
当我想编辑现有帖子的图像时，我不必在巨大的/assets/文件夹中找到正确的图像，它位于Markdown文件附近
在我的Markdown中，我可以直接使用图像文件名，没有任何路径
如果我想使用任何Markdown编辑器进行实时预览，它可以正常运行，不需要特定的资产文件夹配置

我尝试将此文件用于我的博客（example post here）。

对于自适应图像，我使用了Jekyll Picture Tag plugin，但我不得不分叉，因为不接受处理此类路径的the Pull Request。

现在Jekyll 3已经存在，我希望它可以让我们在帖子文件夹和/assets/中使用图像，在这两个图像中查找标有![alt](image-file-without-path.jpg)的图像

Answer 4

我现在设法开发了一个Jekyll插件，可以帮助将帖子资产与Markdown文件保持在一起： https://nhoizey.github.io/jekyll-postfiles/

Answer 5

对于JavaScript和CSS，您可能需要考虑资产管道。通过捆绑和压缩可以获得良好的性能提升。我也使用CoffeeScript和Sass，所以我需要一个预处理器来转换我的资产。当我运行jekyll命令时，我使用Jekyll Asset Pipeline自动管理整个过程。

对于图像/视频，我建议您开发一个约定项目文件夹的约定。我通常有一个“assets”文件夹，然后是子文件夹，每个帖子的日期包含与这些帖子相关的图像。如果您每天有多个帖子，可以考虑包含帖子的名称。

Answer 6

此答案：

不使用插件（适用于GitHub Pages）
允许您将图像直接保留在相关帖子旁边
允许您在本地使用Typora进行编辑并查看图像所见即所得

只需将文件夹命名为_posts/2020-10-10-My-Title/，并包含文件index.md和hero.svg或其他图像即可。

然后将_config.yaml中的permalink:密钥设置为:path。

注意事项：

您的文件夹名称必须标明
您的图像必须全部为SVG

Jekyll的本地邮政资产

6 个答案: