Jekyll 有没有办法为图像设置基本路径？答案

【问题标题】：Is there a way in Jekyll to set a base path for images?Jekyll 有没有办法为图像设置基本路径？
【发布时间】：2021-05-23 14:25:20
【问题描述】：

我正在使用 Jekyll 创建博客，为了组织起见，我决定将图像放在文件夹下：“assets/img/[post name]/”。文件夹如下所示：

.
├── assets
│   ├── css
│   │   ├── BMFW.css
│   │   └── vs.css
│   └── img
│       └── 2021-05-23-Blog-presentation
│           └── test.jpg <--
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _layouts
│   ├── layout.html
│   └── post.html
├── _posts
│   └── 2021-05-23-Blog-presentation.md
├── README.md
└── script
    └── cibuild

似乎 page.name 变量由于某种原因不存在（我已经用{{page | inspect}} 进行了检查）所以我使用这一行来获取帖子的名称：

{{ page.path | replace: ".md","" | split: "/" | slice: -1 | }}

这意味着如果我想显示一个名为 test.jpg 的图像，我会写：

![]({{ site.baseurl }}/assets/img/{{ page.path | replace: ".md","" | split: "/" | slice: -1 | }}/test.jpg)

从一个图像到另一个图像的唯一变化是图像的名称。所以我的问题是：有没有办法设置基本路径，在我的情况下为{{ site.baseurl }}/assets/img/{{ page.path | replace: ".md","" | split: "/" | slice: -1 | }}/，所以我不必一遍又一遍地编写完整路径？

理想的解决方案是只需要写 ![]({{media}}/test.jpg) 或类似的。

编辑 1：

以防万一它对任何人有用，我现在正在做的是将这一行放在每个博客条目的开头：

{% assign media = site.baseurl | append: "assets/media/" | append:  page.path | replace: ".md","" | replace: "_posts/",""  %}

那么我就可以插入图片了：

![]({{ media }}/test.jpg)

这不是一个解决方案，因为我仍然必须在每篇文章的开头加上那一行，但比以前更好了。

编辑 2：

我希望在 Jekyll 中制作一些自定义插件，但我还没有找到访问页面属性的方法。

另一个选项是创建一个插入液体代码的自定义标签：{{site.baseurl | append: "assets/media/" | append: page.path | replace: ".md","" | replace: "_posts/","" }}。这个问题是，一旦执行了自定义标签，jekyll 就会继续执行并且不会执行新插入的液态代码。

【问题讨论】：

标签： html jekyll blogs

【解决方案1】：

为避免在 Jekyll 中重复，请使用 includes。你可以像这样创建一个_includes/image.html 文件：

{% assign media = site.baseurl | append: "assets/media/" | append:  include.post | replace: ".md","" | replace: "_posts/",""  %}
<img src="{{ media }}/{{ include.file }}">

并像这样使用它：

{% include image.html post=page.path file="test_1.jpg" %}
{% include image.html post=page.path file="test_2.jpg" %}

唯一的问题是包含的文件看不到文件中没有作为参数传递的任何内容，因此我们无法摆脱post=page.page 部分。但是，与您当前的解决方案相比，重复次数更少。

相关：Macro in Liquid template language.

【讨论】：

这是一种避免在每篇文章开头重复同一行的解决方案，但我发现每次插入图像时都必须写{% include image.html post=page.path file="test_1.jpg" %} 比复制粘贴更长的行更乏味一开始就忘记了。
是的，你完全正确。 Jekyll 在这方面没有提供太多选择（据我所知）......无论如何我都会留下答案，以防其他人发现它有用。
我想到了很奇怪的方法，但我必须先测试它以确保它是可能的。我正在使用自定义渲染器，因此我可以修改图像降价标签以在从降价到 html 的翻译过程中添加路径。
这听起来确实是个好主意。在我看来，完全定制总是需要程序员用户的一些处理。
我刚决定这是个坏主意。我正在更改项目标签的工作方式，不应该这样做。但我可能会创建一个额外的降价元素，例如 :media: 被实际路径替换。

【解决方案2】：

使用static files in Jekyll 是否足以为您的所有图像资产设置基本路径？

添加到_config.yml:

defaults:
  - scope:
      path: "assets/img"

所有静态文件都将在其file.path 元数据中添加基本路径assets/img。

编辑：这是在defaults 中获取path 的Liquid sn-p

{% assign defaults = site.defaults %}
{{ defaults[0].scope.path | inspect }}

【讨论】：

我希望根据帖子的名称将我的图像组织在文件夹中。据我所知，此解决方案需要将所有媒体都放在同一个文件夹中。