【问题标题】:Jekyll every 4th item in loop display differentlyJekyll 循环中的每 4 个项目显示不同
【发布时间】:2018-02-20 12:43:42
【问题描述】:

我正在使用 jekyll 用博客文章填充我的博客页面。我希望每个 div 有两个带有“行”类的帖子,但我还希望每个第 4 项都是广告(跳过帖子并移至下一行,但仍然包含其他不是帖子的内容)。

所以如果有 6 个帖子,输出应该是这样的

<div class="row"> <!-- 1st row -->
  <div> {{ post.title }} </div>  <!-- 1st post, no skip -->
  <div> {{ post.title }} </div>  <!-- 2nd post, no skip -->
</div>

<div class="row"> <!-- 2nd row -->
  <div> {{ post.title }} </div>  <!-- 3rd post, no skip -->
  <div> THIS IS NOT A POST </div>  <!-- skip post 4, put something else -->
</div>

<div class="row"> <!-- 3rd row -->
  <div> {{ post.title }} </div>  <!-- 4th post, because last item was skipped to display something else -->
  <div> {{ post.title }} </div>  <!-- 5th post, no skip -->
</div>

<div class="row"> <!-- 4th row -->
  <div> {{ post.title }} </div>  <!-- 6th post, no  skip -->
</div>

<!-- and so on, so every 4th item is not a post, but the posts continue after the skipped post -->

我有后循环部分,但我不知道如何添加 SKIP

{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
{% for i in (1..rows) %}
  {% assign offset = forloop.index0 | times: 2 %}
  <div class="row blogitems">
    {% for post in site.posts limit:2 offset:offset %}
        <div class="col-md-6">
          <p>{{ post.title }}</p>
        </div>
    {% endfor %}
  </div>
{% endfor %}

【问题讨论】:

    标签: html loops for-loop jekyll liquid


    【解决方案1】:

    我认为您可以在查看modulo 的同时浏览您的物品。像这样:

    <div class="row blogitems">
    {% for post in site.posts %}
      {% assign mod3 = forloop.index | modulo: 3 %}
      <div class="col-md-6"><p>{{ post.title }}</p></div>
      {% if mod3 == 0 %}<div class="col-md-6"><p>THIS IS NOT A POST</p>{% endif %}
      {% if mod3 == 0 or mod3 == 2 %}</div><div class="row blogitems">{% endif %}
    {% endfor %}
    </div>
    

    【讨论】:

    • 这很好用!感谢您提供完美而简洁的答案!如果您想查看它的外观,这是我博客的实时版本 :) somiibo.com/blog
    • 不客气。不错的博客。我唯一的评论:预加载器有问题。网站加载(我看到网站),然后显示预加载器,然后网站再次显示。
    • 感谢您的提醒,了解此类内容很有帮助!我不确定为什么会发生这种情况,因为预加载器的 css 是在页面顶部获取的:/
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-02-23
    • 2012-12-28
    • 2022-06-22
    • 2023-01-03
    • 2013-02-07
    • 2015-05-21
    • 1970-01-01
    相关资源
    最近更新 更多