我一直在使用 jekyll 在我的投资组合网站上工作,而且一切似乎都在本地运行得很好。因此,对我来说,下一步是将其推送到 gh-pages 分支内的 github,当我这样做时,我会收到一封包含以下错误的电子邮件。
_layouts/post.html 中第 20 行的标签 responsive_image 不是可识别的 Liquid 标签。
我尝试使用的宝石是Jekyll Responsive Images。
就像我之前说的,当我运行 jekyll serve 时,我没有收到任何错误,我可以在本地运行我的 jekyll 站点,但由于某种原因,这个错误使我的站点无法使用 github。我的post.html
文件看起来像这样。
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
在我的 _includes 文件夹中,我必须为 responsive_images gem 创建一个包含,它看起来像这样
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
这是我的 config.yml 文件,供任何想知道的人使用
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: test@test.com
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
有人对响应式图像 gem 有这个问题吗?我似乎无法在谷歌上找到答案。任何帮助将不胜感激。