72

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

4

6 回答 6

25

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

{% asset_path my-image.png %}

在 2013-01-01-post-title 之后会输出：

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

在页面 my-first-page 将输出：

/assets/my-first-page/my-image.png
于 2013-10-28T13:20:11.733 回答
19

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

我使用的方法正好相反。我有一个单一的图像目录（从“/images”提供），我 100% 的图像都存放在那里。这样做的好处是：

  1. 当我在帖子中添加图像时，很容易知道要使用什么路径。总是如此：

    /images/{image-name}

    例如：http ://alanwsmith.com/i/aws-20111017--0906-02 。这使得编写插件成为可能，因此您只需输入图像名称，其余已知路径将自动填写。

  2. 使用像Photo Mechanic这样的应用程序，在本地浏览单个目录并查看每张图像非常容易。如果我想在另一个页面上包含图像，这会大大减少查找它的时间。

  3. 如果我想将图像发送给某人而不将其实际包含在页面中（即向他们发送图像文件的直接链接），则没有单独的位置/过程。我只是将图像放在标准目录中并发送直接链接。

如果您想更高级一点，将所有图像保存在一个目录中也可以进行一些不错的调整。例如，即使我的图像的 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”的形式提供。需要进行这样的更改可能非常罕见。我只是认为能够做到这一点很有趣。

最后，您可以单独决定是否允许浏览您的图像目录。就个人而言，我只希望我的图像显示在我放置它们的位置。因此，我将图像目录中的 .htaccess 文件设置为：

Options -Indexes

如果您要在具有数千或数万页和图像的站点上工作，这可能无法扩展。对于一个正常大小的个人网站，我发现这种方法可以更轻松地维护图像。

于 2012-04-28T18:06:07.797 回答
12

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

于 2016-06-29T14:22:58.660 回答
9

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

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

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

我试图在我的博客中使用这个（示例帖子在这里）。

对于响应式图像，我使用了Jekyll 图片标签插件，但我不得不分叉它，因为处理此类路径的拉取请求不被接受。

既然 Jekyll 3 已经存在，我希望它可以让我们同时使用 post 文件夹和一个文件夹中的图像，按顺序/assets/查找两者中都标记有的图像。![alt](image-file-without-path.jpg)

于 2016-02-08T13:07:09.283 回答
0

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

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

于 2012-11-26T21:26:03.393 回答
0

这个答案：

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

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

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

注意事项：

  • 您的文件夹名称必须是 sluggified
  • 您的图像必须全部为 SVG
于 2020-11-25T03:15:06.693 回答