1

我一直在使用 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 有这个问题吗?我似乎无法在谷歌上找到答案。任何帮助将不胜感激。

4

3 回答 3

3

Jekyll 响应式图像是一个 Jekyll 插件,您不能将自己的插件添加到 github 页面。由于安全原因,这是 github 的限制。

这是github上的相关页面这里是github官方在github服务器中包含的可以使用的插件列表

您可以尝试使用 Picturefill

于 2016-02-19T06:27:35.120 回答
1

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

是的你可以。但正如 Virtua Creative 所建议的 - 您需要一种解决方法。特别是如果您使用的是自定义域。

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

不是受支持的 gem。

例子

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

并从中删除 CNAME .gitignore

当您在本地完成工作时,然后构建:

jekyll build

之后将 CNAME 文件添加到您的构建中:

touch _site/CNAME

将您的域回显到其中:

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

然后您可以推送到您的 github 页面存储库(也可以从父级)。

埃克斯特拉

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

我的 .zshrc:

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

于 2021-02-05T13:59:44.830 回答
1

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

一个好办法是上传 Jekyll 生成的静态站点,这样 GitHub 就不会构建你的站点,它只会将它显示为纯 html。为此,您唯一需要做的就是_site仅将内容推送到 GitHub。

另一种方法是使用 GitLab Pages。在那里,您可以使用任意数量的插件,因为构建过程由您自己通过名为.gitlab-ci.yml. 有关此过程的完整教程即将发布。

GitLab.com唯一还没有的功能是可以为 GitLab Pages 构建的网站设置自定义域名。但它很快就会到来。

希望有所帮助!

于 2016-02-19T09:34:39.673 回答