杰基尔在当地邮局的线人

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

17455 次浏览
小开
最佳答案

我更愿意把图像看作是零页或多页中包含的独立资产。大多数时候，我的图片只显示在一个单独的页面上。有时候我想把它们放在多个页面上，有时候我根本不链接图片。如果你的工作流程是把每张图片放在一个目录中，并且有一篇文章，那么找到它们就需要大量的搜索，你必须为那些不属于特定文章的图片找到一些不同的东西。

我使用的方法是在光谱的反面。我只有一个图像目录(从“/images”提供) ，并且100% 的图像都存放在那里。这样做的好处是:

  1. 当我给一篇文章添加图片的时候，很容易知道使用什么路径，总是这样:

    /images/{image-name}

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

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

  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

This lets you call your images without having to use the file extension (e.g. no '.jpg', '.png', etc...). You can see that in the example link I provided above. It doesn't really matter for performance. I just like the way it looks and it saves me from having to type the extension every time I'm calling an image.

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

最后，您可以决定是允许还是不允许浏览您的图像目录。就我个人而言，我只希望我的图像显示在我放置它们的地方。所以，我已经设置了。在我的图像目录下的 htaccess 文件:

Options -Indexes

如果你要在一个有成千上万页面和图片的网站上工作，这可能不会扩展。对于一个正常大小的个人站点，我发现这种方法使维护图像更容易。

小开

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

对于图像/视频，我建议您为项目中的文件夹命名制定一个约定。我通常有一个“资产”文件夹，然后子文件夹的日期，每个职位，持有相关的图像，这些职位。如果你每天有多篇文章，你可以考虑加上文章的名字。

小开

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

{% asset_path my-image.png %}

在2013-01-01之后-职位名称将产生:

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

在 page my-first-page 中输出:

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

和你一样，我也讨厌把所有图片放在一个共享文件夹里。

我的大部分图片，如果不是全部的话，在一篇文章中是有用的，把它们放在 Markdown 文件旁边对于文章管理来说真的更好:

  • 我可以放弃一个新的文章作为一个单一的子文件夹的 /_posts/在一个步骤，而不必把标记在一个地方和图像(s)在另一个
  • 当我想编辑现有文章的图片时，我不需要在一个巨大的 /assets/文件夹中找到正确的图片，它位于 Markdown 文件附近
  • 在我的 Markdown 中，我可以直接使用图像文件名，而不需要任何路径
  • 如果我想使用任何 Markdown 编辑器与现场预览，它的工作，不需要一个特定的资产文件夹配置

我试着把这个放在我的博客(例子贴在这里)上。

对于响应图像，我使用了 Jekyll Picture Tag 插件，但是我必须使用分叉，因为 拉动要求处理这样的路径是不被接受的。

既然 Jekyll 3已经出现了，我希望它可以让我们使用文章文件夹和 /assets/文件夹中的两个图像，按照这个顺序寻找两个文件夹中都标记有 ![alt](image-file-without-path.jpg)的图像。

小开

我现在已经设法开发了一个 Jekyll 插件，它可以帮助将文章资产与 Markdown 文件放在一起: Https://nhoizey.github.io/jekyll-postfiles/

小开

答案是:

  • 不使用插件(可用于 GitHub 页面)
  • 允许您将图片直接放在相关文章的旁边
  • 允许您在本地使用 Typora 进行编辑，并查看图像所见即所得

只要命名您的文件夹，如 _posts/2020-10-10-My-Title/和包括文件，如 index.md和 hero.svg或其他图像。

然后将您的 permalink:键 in _ config.yaml 设置为 :path。

警告:

  • 您的文件夹名称必须缓慢移动
  • 您的图像必须都是 SVG

提交答案