jekyll - 使用 jekyll 在帖子顶部的响应式图像
问题描述
我最近开始学习 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 %}
谢谢您的帮助
解决方案
我没用过这个插件,但是你应该可以通过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
---
推荐阅读
- swift - 将状态栏和导航栏设置为相同颜色
- javascript - 显示 Hover 而不是 Href 进行条件检查
- typescript - 如何设置 Webpack 以便能够在单文件组件(.vue)和“vue-class-component”类中使用 Pug?
- javascript - React .map 使用 Fetch API 返回 undefined
- bash - 打开已编译的模块文件时出错。检查包含路径。[HDF5]
- python-3.x - TypeError: '<=' 在 'str' 和 'int' 的实例之间不支持,当我尝试按列归档数据时出现此错误
- html - Django HTML 导入文本的最大长度
- c - 查看用户输入以查看它是否为浮点数,始终返回为真
- unity3d - Unity 中的音频 3D 与 ARCore
- java - Java - 找到一个负责编辑文件的进程并尽可能杀死它?