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

标签 html jekyll blogs

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

最佳答案

为了避免在 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 .

关于html - Jekyll 有没有办法为图像设置基本路径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67660810/

相关文章:

tags - 使用标签在Jira中标记评论

python - Flask:在一个应用程序中使用多个包

jquery - 在 100% 宽度的容器内动画 div

javascript - 为什么这个外部 JavaScript 不加载?

html - 如何覆盖导入的 scss 文件中的样式

amazon-s3 - 使用带有表单和数据驱动内容的静态网站生成器?

ruby - Homebrew、Jekyll、RVM 和 usr/local

web - jekyll 服务显示依赖错误

html - 为什么 Jekyll 加载 navbar.less?

javascript - Ng 构建解析错误