液体无法在单独的页面上呈现

如何解决液体无法在单独的页面上呈现

我最近遇到了这个问题，该问题包括在未正确加载的单独页面上。

这是我的downloads.html：

---
layout: default
---

{% if site.downloads %}
    <div class="my-6">{% include downloads.html %}</div>
{% else %}
    <h2>Downloads</h2>
    <p>There are no downloads at the time. Come back later!</p>
{% endif %}

但是所有显示的是：

这是我的_layouts/default.html：

{% include header.html %}

{% if site.layout == 'stacked' %}
  <div class="container-lg py-6 p-responsive text-center">
    {% include masthead.html Metadata=false %}

    <div class="container-md f4 text-left border rounded-2 bg-white p-3 p-sm-5 mt-6">
      <p class="f5"><a href="/" class="d-flex flex-items-center">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</a></p>
      <h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
      {{ content }}
    </div>
  </div>
{% else %}
  <div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
    <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
      {% include masthead.html Metadata=true %}
    </div>

    <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
      <div class="mx-auto" style="max-width: 900px;">
        <div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
          <div class="f4 {% if site.style == 'dark' %}text-white{% endif %}">
            <p class="f5"><a href="{{ site.url }}{{ site.baseurl | append:'/' }}" class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %}">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</a></p>
            <h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
            {{ content }}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% include footer.html %}

这是我的_includes/downloads.html：

<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>Downloads</h2>
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Most of my downloads/others on GitHub.</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
  {% for download in site.downloads %}
    <div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
      {% include download-card.html %}
    </div>
  {% endfor %}
</div>

这是我的_includes/download-card.html：

{% if download.download_url %}
  <a href="{{ download.download_url }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
    {% if download.image_url %}
      <img src="{{ download.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ download.name }}">
    {% else %}
      <div
        class="bg-blue-light f4 text-gray-light text-bold rounded-1 flex-shrink-0 text-center mx-auto mb-3"
        style="width:64px; height:64px; line-height:64px;"
      >
        #
      </div>
    {% endif %}
    <p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">{{ download.name }}</p>
    {% if download.description %}
      <p class="f5 text-gray text-center mb-0 mt-1">{{ download.description }}</p>
    {% endif %}
  </a>
{% endif %}

这是我的_config.yml：

layout: sidebar
style: dark

plugins:
    - jekyll-octicons
    - jekyll-github-Metadata
    - jemoji

permalink: /:year/:month/:day/:title/

defaults:
    - scope:
          path: ""
          type: "posts"
      values:
          layout: "post"

downloads:
    - name: Test
      description: This is just a test item
      image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
      download_url: https://example.com

它在我的home布局上完美呈现：

{% include header.html %}

{% if site.layout == 'stacked' %}
  <div class="container-lg py-6 p-responsive text-center">
    {% include masthead.html Metadata=true %}

    <div {% if site.style == 'dark' %}class="text-white"{% endif %}>
      {{ content }}
    </div>

    {% if site.topics %}
      <div class="my-6">
        {% include interests.html %}
      </div>
    {% endif %}

    {% unless posts_total == 0 %}
      <div class="my-6">
        {% include thoughts.html %}
      </div>
    {% endunless %}
  </div>
{% else %}
  <div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
    <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
      {% include masthead.html Metadata=true %}
    </div>

    <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
      <div class="mx-auto" style="max-width: 900px;">
        {% unless content == ""  %}
          <div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
            {{ content }}
          </div>
        {% endunless %}

        {% if site.topics %}
          {% include interests.html %}
        {% endif %}

        {% unless posts_total == 0 %}
          {% include thoughts.html %}
        {% endunless %}
      </div>
    </div>
  </div>
{% endif %}

{% include footer.html %}

感谢您的帮助。我真的不知道为什么会这样。