1

我最近开始学习 jekyll，并在 localhost (win 7) 上生成页面，我安装了一个插件，可以生成响应式图像和 HTML 标签，其中液体标签放置在页面或帖子中。这是插件的链接：https ://github.com/wildlyinaccurate/jekyll-responsive-image

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

但是我在frontmatter上有一个图片链接，对于每个发布页面，这个链接都会在发布页面的顶部打印一张图片，我希望这张图片也被视为响应式图片，不能在frontmatter上添加液体标签，结果帖子页面顶部的所有图像都没有响应，有没有办法让它工作？

这是我的一篇文章的frontmatter示例：

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

这是我在帖子中使用的首要标签：

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

谢谢您的帮助

4

1 回答 1

2

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

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

然后，您可以删除或交换布局页面中的另一行，该行使用该行创建无响应图像。

编辑 No.2： 再次查看插件回购我注意到他们以一种奇怪的方式处理变量。因为responsive_image标签根本不处理变量。为此，您必须像这样定义一个块：

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

您仍然应该能够像这样在 post 文件中设置变量：

---
image: assets/images/dog.jpg
---
于 2020-09-12T22:34:16.047 回答