代码之家 › 专栏 › 技术社区 › Kayote

Jekyll-在滑块中显示图像和文本

static-site liquid jekyll yaml

Kayote · 技术社区 · 7 年前

我正在使用引导转盘。

不幸的是 front-matter 未渲染。

指数html:

...
carousel:
  a:
    image: home/athenaBeta.jpeg 
    text: random text 1
  b: 
    image: home/transport.jpeg
    text: |
      random text 2
  c:
    image: home/coffee.jpeg 
    text: |
      random text 3
---
{% include hero-carousel.html %}
...

英雄旋转木马。html:

  <div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
    <div class="carousel-inner text-center">
      {% for news in page.carousel %}
      {% capture image %}
        {% assign img = news.image %}
      {% endcapture %}
      <div class="item img-cover img-fixed {% if forloop.index == 0 %}active{% endif %}" style="background-image:url({{ image }})">
        <h2>{{ news.text }}</h2>
      </div>
      {% capture i %}{{ i | plus:1 }}{% endcapture %}
      {% endfor %}
    </div>

    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="fa glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="fa glyphicon-chevron-right"></span>
    </a>
    <a class="arrow-down" href="#content">
      <span class="fa glyphicon-chevron-down"></span>
    </a>
  </div>

它会渲染三张幻灯片,但不会渲染任何图像或文本。我在浏览器中得到的输出如下:

<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
  <div class="carousel-inner text-center">
    <div class="item img-cover img-fixed " style="background-image:url(

      )">
      <h2></h2>
    </div>
    <div class="item img-cover img-fixed " style="background-image:url(

      )">
      <h2></h2>
    </div>
    <div class="item img-cover img-fixed " style="background-image:url()">
      <h2></h2>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="fa glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="fa glyphicon-chevron-right"></span>
  </a>
  <a class="arrow-down" href="#content">
    <span class="fa glyphicon-chevron-down"></span>
  </a>
</div>

1 回复 | 直到 7 年前

David Jacquel 7 年前

当您循环时 page.caroussel ,你会收到如下信息:

{{ news | inspect }}
==> ["a", {"image"=>"home/athenaBeta.jpeg", "text"=>"random text 1"}]

它是一个包含两个元素的数组。

为了达到你的形象,你可以 {% assign img = news[1].image %} ,但你最好重构一下:

...
carousel:
  - image: home/athenaBeta.jpeg
    text: random text 1

  - image: home/transport.jpeg
    text: |
      random text 2

  - image: home/coffee.jpeg
    text: |
      random text 3
---

<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
  <div class="carousel-inner text-center">
  {% for news in page.carousel %}
    <div class="item img-cover img-fixed {% if forloop.first %}active{% endif %}" style="background-image:url('{{ news.image }}')">
      <h2>{{ news.text }}</h2>
    </div>
  {% endfor %}
</div>