html - 如何在 Jekyll 生成的页面中呈现背景图像？

Question

作为刚开始使用 GitHub Pages 的新手，我迷失在网络上的海量资料中，这些资料似乎可以帮助我解决以下问题:

我正在使用 Jekyll 构建通过 GitHub Pages 托管的博客，并想在我的默认主页中添加背景图片，例如 this .
那么，我该怎么做呢？我已经开始了，但对 HTML/CSS 知之甚少，因此非常感谢有一种简单的方法来做同样的事情。 我目前使用的是默认的 minima 主题! :)

Answer 1

Minima 没有像您期望的那样轻松渲染“封面照片”的规定。但这并不意味着，不可能渲染一个。

使用 Minima 时，您的主页通过文件 ./index.md 呈现和布局文件 _layouts/home.html .因此，如果您的工作目录不包含 home布局，创建 _layouts包含名为 home.html 的文件的目录.

home最小布局

我将解释布局包含的内容，以便您能够在其他领域使用这些知识。

布局包含以下代码。将下面的整个代码复制到 _layouts/home.html您刚刚在上述步骤中创建的文件:

---
layout: default
---

<div class="home">
  {%- if page.title -%}
    <h1 class="page-heading">{{ page.title }}</h1>
  {%- endif -%}

  {{ content }}

  {%- if site.posts.size > 0 -%}
    <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
    <ul class="post-list">
      {%- for post in site.posts -%}
      <li>
        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
        <span class="post-meta">{{ post.date | date: date_format }}</span>
        <h3>
          <a class="post-link" href="{{ post.url | relative_url }}">
            {{ post.title | escape }}
          </a>
        </h3>
        {%- if site.show_excerpts -%}
          {{ post.excerpt }}
        {%- endif -%}
      </li>
      {%- endfor -%}
    </ul>

    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
  {%- endif -%}

</div>

让我们逐 block 剖析布局:

---
layout: default
---

这是一个 front matter block ，它告诉 Jekyll 'home' 布局是 'default' 布局的一个子集。

<div class="home">

这会为主页上的所有其他内容打开一个容器，并由 </div> 关闭在最后一行。

{%- if page.title -%}
  <h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}

如果主页标题在文件 ./index.md 中提供，此模板指令将呈现主页标题。 .

{{ content }}

这是另一个模板指令，它使用此布局从文件中提取内容(除前面内容之外的任何内容)。在我们的例子中，这将是 ./index.md .

剩余 block {%- if site.posts.size > 0 -%}循环浏览您站点中的帖子并呈现这些帖子的列表。

封面图片

我们现在对模板的构成有了一个清晰的认识。但是没有提到渲染封面照片的代码。

同意。那么，让我们编写代码。在带有 {{ content }} 的行之前插入以下步骤中的代码在布局中

首先，为图像添加一个容器。

<div class="hero">
</div>

然后插入 HTML 标记以在其中呈现您选择的图像(例如，./assets/home-feature.jpg):

<div class="hero">
  <img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>

仅使用上述标记，您的图片对于您的页面来说可能太大了。所以我们应该用一些 CSS 样式来限制大小。

Minima 使用 Sass partials 为您的站点生成 CSS。因此，我们需要用一些自定义代码覆盖部分内容。

创建一个名为 _sass 的新目录有一个名为 minima 的子目录最后是 _sass/minima 中的一个文件名为 _layout.scss 的目录.将内容复制到 this link到那个文件。

现在在文件末尾添加以下自定义代码:

/* Cover Image */
.hero {
  .feature-img: {
    max-width: 100%;
  }
}

---

渲染背景图片

以上只是渲染一张封面照片。要将图像渲染为合适的背景图像，您可以执行以下操作。

首先，我们需要调整标记以在前景中呈现文本，而图像仅作为背景:

<div class="hero">
  {{ page.hero_text }}
</div>

有了上面的内容，您现在可以通过 ./index.md 中的 front matter 控制背景图像上的文本。 .

然后使用 CSS 取回图像:

/* Cover Image */
.hero {
  background: url('../home-feature.jpg');
}

获取图像的 url 有点棘手，因为我们不能在 vanilla Jekyll 的 sass partials 中使用 Liquid 指令。因此，您必须针对您的特定站点对其进行试验。

有关 CSS 背景的更多提示，请查看 this link