使用 jekyll 在 post 之上响应图像

Question

我最近开始学习 jekyll，并在本地主机 (win 7) 上生成页面，我安装了一个生成响应图像和 HTML 标签的插件，其中 liquid 标签放在页面中或 posts。这是插件的 link：https://github.com/wildlyinaccurate/jekyll-responsive-image

它确实工作正常并为它生成响应图像和适当的标签。

但是我在首页上有一张图片 link，对于每个 posting 页，这个 link 在 posting 页的顶部打印一张图片，并且我也想将此图片也视为响应式图片，不能在 frontmatter 上添加液体标签，因此 post 页面顶部的所有图片都没有响应式，有什么办法让它起作用吗？

这是我的 post:

之一的 frontmatter 示例

---
layout: post
title:  "test for dog grooming"
categories: [ do-grooming ]
image: assets/images/dog.jpg
---

这是我在 posts 中使用的 front matter 标签：

{% responsive_image figure: true path: assets/images/petfood.jpg  %}

感谢您的帮助

Answer 1

我没用过这个插件，不过你应该可以通过page.variable访问frontmatter变量。然后，您可以将以下代码添加到布局页面的相关区域，以自动在页面顶部或您想要的位置显示图像。

{% responsive_image figure: true path: page.image  %}

然后您可以删除或交换布局页面中创建 non-responsive 图像的另一行。

编辑 2： Looking over the plugin repo again I have noticed that they deal with variables in kind of an odd way。因为 responsive_image 标签根本不处理变量。为此，您必须像这样定义一个块：

# Put this in the layout file.
{% responsive_image_block %}
  path: {{ page.image }}
{% endresponsive_image_block %}

您仍然可以像这样在 post 文件中设置变量：

---
image: assets/images/dog.jpg
---

使用 jekyll 在 post 之上响应图像

responsive image on top of post using jekyll

jekyll

liquid

responsive-images

yaml-front-matter