Question

作为一个刚从GitHub Pages开始的新手，我迷失在网上的大量材料中，这些材料似乎可以解决以下问题：

我正在使用Jekyll构建通过GitHub Pages托管的博客，并想在我的默认首页（如this）中添加背景图片。
那么，我该怎么做呢？我刚开始，但是对HTML / CSS几乎一无所知，因此不胜感激简单的方法。我目前正在使用默认的最小主题！：）

Answer 1

您是否研究了检查器工具？另一个简单的方法是查看该网站的代码段，您可以在这里找到：https://github.com/mnp-club/mnp-club.github.io

我正在为他们为实现该效果所做的工作提取确切的代码： https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html

<div id="main" role="main">
  <article class="entry">
  {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
  // Alternatively a simpler way will be to just include the img src code. 
  // <img src="insert-image-url.jpg" class="entry-feature-image"/> 
  // Whole bunch of code for body here
  </article> 
</div>

要使其成为全角标题图片，只需将其设为

.entry-feature-image {    
   width: 100%; 
}

我的博客也在jekyll minima和github页面上运行，并且我对某些页面具有默认标题。使它全宽只是CSS的问题。 https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html 您可以做的只是将图像的html代码添加到_layouts / default.html文件中。

有多种方法可以实现您想要的。理解您对html和css的经验很少，但是我建议您调出检查器工具，然后查看代码以识别哪个代码可以执行什么操作。希望有帮助！

Answer 2

最低要求没有提供可以轻松渲染“封面照片”的功能。但这并不意味着不可能渲染一个。

使用极小值时，您的主页通过文件./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>

让我们逐块剖析布局：

---
layout: default
---

这是一个前沿问题，可以告诉Jekyll，“首页”布局是“默认”布局的子集。

<div class="home">

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

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

这是一个模板指令，如果在文件./index.md中的最前面的内容中提供了首页的标题，则会呈现该标题。

{{ content }}

这是另一个模板指令，它使用此布局从文件中提取内容（与主体无关）。在我们的情况下，该值为./index.md。

剩余的块{%- 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局部生成站点的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中的正面事物来控制背景图像上的文本。

然后使用CSS恢复图像：

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

获取图像的URL有点棘手，因为我们无法在香草Jekyll的Sass部分中使用Liquid指令。因此，您必须针对特定站点进行试验。

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

如何在Jekyll生成的页面中渲染背景图像？

2 个答案:

极简中的`home`布局

封面图片

渲染背景图片

如何在Jekyll生成的页面中渲染背景图像？

2 个答案:

极简中的home布局

封面图片

渲染背景图片

极简中的`home`布局