Question

我一直在使用jekyll在我的投资组合网站上工作，而且一切似乎在本地工作得很好。因此，我的下一步是将其推送到gh-pages分支内的github，当我这样做时，我会收到一封错误如下的电子邮件。

_layouts / post.html中第20行的标记responsive_image不是可识别的Liquid标记。

我正在尝试使用的宝石是Jekyll Responsive Images。

就像我之前说的，当我运行jekyll服务时，我没有错误，我可以在本地运行我的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}

有没有人对响应式图像宝石有这个问题？我似乎无法谷歌回答这个问题。任何帮助将不胜感激。

Answer 1

Jekyll响应式图像是一个Jekyll插件，你无法将自己的插件添加到github页面。由于安全原因，这是github的限制。

Here is the related page on github和here is the list of plugins that are officially included by github in the github server and can be used。

您可以尝试使用Picturefill。

Answer 2

事实上，出于安全原因，您在GitHub上托管时不允许使用大多数Jekyll插件。

一个很好的出路是上传由Jekyll生成的静态网站，因此GitHub不会构建您的网站，它只会将其显示为纯HTML。要做到这一点，你唯一需要做的就是向GitHub推送_site内容。

另一种方法是使用GitLab Pages。在那里，您可以根据需要使用尽可能多的插件，因为构建过程由您自己通过名为.gitlab-ci.yml的配置文件来控制。关于这个过程的完整教程即将发布。

唯一的功能GitLab.com还没有为GitLab Pages构建的网站设置自定义域名的可能性。但它即将到来。

希望有所帮助！

Answer 3

重要的是要说这不是推荐的方式，但它对我有用。我觉得其他答案有点：不，你不能 - 这样做。

是的，你可以。但正如 Virtua Creative 建议的那样 - 您需要一个解决方法。尤其是当您使用自定义域时。

我自己在使用 jekyll-responsive-image 来调整 Jekyll 网站的大小和延迟加载时遇到了问题。

它不是支持的 gem。

示例

首先，如果所有人都将您的 _site 存储库设为 git 存储库。

并从 .gitignore 中删除 CNAME。

当你在本地完成工作后，构建：

jekyll build

后记将 CNAME 文件添加到您的构建中：

touch _site/CNAME

在其中回显您的域：

echo 'www.your_domain.com' >> _site/CNAME

然后你可以推送到你的 github pages 存储库（也来自父级）。

埃克斯特拉

下次您可以在 bash 中创建自定义命令以实现自动化。

我的.zshrc：

alias jekyll_build_cname='jekyll build && touch _site/CNAME && echo "www.instamoneyservices.de" >> _site/CNAME'

Jekyll responsive_images宝石在尝试使用gh-pages时抛出错误

3 个答案:

示例

埃克斯特拉