我正在与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 }}