时间戳

首页 > 解决方案 > Jekyll 有没有办法为图像设置基本路径？

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

问题描述

我正在使用 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 就会继续运行，并且不会执行新插入的流动代码。

标签： htmljekyllblogs

解决方案

为了避免 Jekyll 中的重复，您使用include。您可以制作这样的_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 模板语言中的宏。

推荐阅读