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



我正在与Jekyll一起创建博客,为了组织起见,我决定将图片放在文件夹下:"assets/img/[帖子名称]/";。文件夹如下所示:

.
├── 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就会继续,不执行新插入的液体代码。

为了避免在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模板语言中的宏。

在Jekyll中使用静态文件是否足以设置所有图像资产的基本路径?

添加到_config.yml:

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

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

编辑:以下是关于在defaults中获取path的Liquid片段

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

最新更新