0

这个问题是关于HubSpot/HuBl的，但我也标记twig为语法相似。

我有一个包含 7 张卡片的博客布局，结构如下：

在此处输入图像描述

作为参考，上面的类修饰符是：

  1. blogCard
  2. blogCard
  3. blogCard--long
  4. blogCard
  5. blogCard
  6. blogCard--wide
  7. blogCard

现在，在 中HubL，我正在尝试循环查看帖子，并且在loop.index等于 的地方three，我希望它显示一个标签为 的博客帖子video。这篇video文章将出现在blogCard--long.

因此所有其他 6 张卡片都可以显示带有任何标签的帖子，但第 3 个 ( blogCard--long) 必须是带有标签的帖子video。

为此，我尝试了以下方法：

<!-- get all posts from blog -->
{% set all_posts = blog_recent_posts(blog_id, 21) %}

<!-- find all posts with the tag "video" -->
{% set video_posts = blog_recent_tag_posts(blog_id, 'video') %}

<!-- remove video posts from all_posts array -->
{% set posts =  all_posts|difference(video_posts) %}

{% for post in posts %}

  <div class="blogCard"></div>

  {% if (loop.index == 3) %}
    {% for video_post in video_posts %}
      <div class="blogCard--long">{{ video_post.name }}</div>
    {% endfor %}
  {% endif %}

  <div class="blogCard"></div>

  {% if loop.index == 6 %}
   <div class="latestBlogs__blog--wide"></div>
  {% endif %}
 
  <div class="blogCard"></div>

{% endfor %}

我基本上是posts在所有帖子上运行初始循环，不包括带有video. 然后，当遇到第三项时，我正在运行一个嵌套循环以从视频帖子中获取数据。但是，由于它是一个嵌套循环，它会在一个循环迭代中显示所有视频帖子。例如，如果我有两个带有 标记的帖子video，在一次迭代中，它将显示这两个视频帖子。

只是想就我在这里应用的逻辑寻求建议，以及实现这一目标的最佳方法是什么？

4

1 回答 1

0

阅读评论后，您可以使用批处理来重复网格。我会做类似以下的事情：

{% for row in blogs|batch(6, '&nbsp;') %}
<div class="wrapper">
    {% for blog in row %}
        {% if loop.index == 3 %}
        <div class="long">
            {{ videos[loop.parent.loop.index0]|default }}
        </div>
        {% endif %}
        <div{% if loop.index == 5 %} class="wide"{% endif %}>
            {{ blog }}
        </div>
    {% endfor %}
</div>
{% endfor %}

演示

第一行{% for row in blogs|batch(6, '&nbsp;') %}会将您的集合转换为每个包含 6 个项目的数组，然后您可以循环创建一个完整的网格。

如果索引等于 3，那么您可以“添加”一个视频帖子。这里我使用第一个循环中的循环变量：

loop.parent.loop.index0

然后，您可以使用此索引来获取该索引上的视频，如果视频不存在，则与默认过滤器链接

    .wrapper {
        display: grid;
        grid-template-rows: 200px 200px 200px;
        grid-template-columns: 200px 200px 200px;
        grid-gap: 10px;
        margin: 0 0 20px;
    }

    .wrapper div {
        border-radius: 10px;
        background: #333333;
        color: #FFFFFF;
    }

    .wrapper .long {
        grid-row: span 2;
        grid-column: 3;
    }

    .wrapper .wide {
        grid-column: span 2;
    }
<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div class="long">vid1</div>
    <div>3</div>
    <div>4</div>
    <div class="wide">5</div>
    <div>6</div>
</div>

<div class="wrapper">
    <div>7</div>
    <div>8</div>
    <div class="long">vid2</div>
    <div>9</div>
    <div>10</div>
    <div class="wide">11</div>
    <div>12</div>
</div>

<div class="wrapper">
    <div>13</div>
    <div>14</div>
    <div class="long">vid3</div>
    <div>15</div>
    <div>16</div>
    <div class="wide">17</div>
    <div>18</div>
</div>

于 2021-06-05T10:05:43.400 回答