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

Question

我正在使用 Jekyll 创建博客，为了组织起见，我决定将图像放在文件夹下：“assets/img/[帖子名称]/”。这些文件夹看起来像这样：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 BMFW.css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vs.css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 img\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 2021-05-23-Blog-presentation\n\xe2\x94\x82\xc2\xa0\xc2\xa0         \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.jpg <--\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _config.yml\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Gemfile\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Gemfile.lock\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _layouts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 layout.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 post.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _posts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 2021-05-23-Blog-presentation.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 script\n \xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 cibuild\n

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

编辑1：

\n

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

\n

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

\n

然后我就可以插入图像了：

\n

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

\n

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

\n

编辑2：

\n

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

\n

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

\n

Answer 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部分。但是，这比当前解决方案的重复次数要少。

相关：Liquid 模板语言中的宏。