Html 在jekyll中重构for循环

我正在我的Jekyll网站上创建一个博客。在feed部分，我在页面顶部找到了第一篇文章，这篇文章被指定为特色文章。在底部，我有一个砖石的其余职位下面的特色职位。（从实际的网页上可以看到）。在最新的帖子部分，我有一个单独的循环来处理在特色帖子之前发布的每一篇帖子，在for循环中用1来抵消它。此砖石结构中的每一排最多有3根立柱。每一行都由内联flex属性控制

下面是我的for循环中的代码：

<div class="latest-section">
    <h5>Latest Posts</h5>
    <div class="latest-section__row">
        {% for post in site.posts offset:1 limit:3 %}
        {% capture post_row %}
            <article class="latest-section__row--post">
                <figure class="post--featured-image">
                    <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
                </figure>
                <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
                <p>{{ post.excerpt | strip_html }}</p>
                <div class="post-byline">
                    <ul>
                        <li><i class="fa fa-user"></i>
                            {% if post.author %}
                                {{ post.author }}
                            {% else %}
                                {{ site.data.settings.author }}
                            {% endif %}
                        </li>
                        <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                        <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
                    </ul>
                </div>
            </article>
        {% endcapture %}
        {{ post_row }}
        {% endfor %}
    </div>
    <div class="latest-section__row">
        {% for post in site.posts offset:4 limit:3 %}
            {{ post_row }}
        {% endfor %}
    </div>
</div>

最新帖子
{站点中帖子的百分比。帖子偏移量：1限制：3%}
{%capture post_row%}
{{post.extract | strip_html}



{%if post.author%}
{{post.author}}
{%else%}
{{site.data.settings.author}
{%endif%}

{{post.date}日期：'%b%d，%Y'}


{%endcapture%}
{{post_row}}
{%endfor%}
{站点中帖子的百分比。帖子偏移量：4限制：3%}
{{post_row}}
{%endfor%}

因此，我基本上是将行中的每一篇文章“捕获”到一个名为“post_row”的变量中，以便我可以将其用于下一行，正如您在下面的代码块中所看到的：

<div class="latest-section__row">
    {% for post in site.posts offset:4 limit:3 %}
        {{ post_row }}
    {% endfor %}
</div>

{站点中帖子的百分比。帖子偏移量：4限制：3%}
{{post_row}}
{%endfor%}

我遇到的问题是，如果我将来有90篇左右的帖子，这将变得非常难以维护。对于每一行，我必须继续编写这段代码至少几十次（正如您可能想象的那样）。例如，下一段代码是：

<div class="latest-section__row">
    {% for post in site.posts offset:7 limit:3 %}
        {{ post_row }}
    {% endfor %}
</div>

{站点中帖子的百分比。帖子偏移量：7限制：3%}
{{post_row}}
{%endfor%}

---

……等等。offset参数每次递增3，这样就不会过帐重复的帖子。有没有办法让这篇文章更具活力，这样我以后就不必一次又一次地写这篇文章了？要创建新行，唯一需要更改的是“offset”参数编号，而不是其他任何内容。提前感谢您的帮助。

您可以这样做：

blog/index.html

---
布局：默认值
标题：博客-杰克·塔尔
---
博客
{%comment%}----模板设置----{%endcomment%}
{%assign numberOfFeaturedPosts=1%}
{%assign postsPerRow=3%}
{%include{u-posts.html%}
{%comment%}--计算要处理的“最新”帖子数{%endcomment%}
{%assign numberOfLatestPosts=site.posts | size |减：numberOfFeaturedPosts%}
{%comment%}--计算行数------{%endcomment%}
{%assign numOfRows=numberOfLatestPosts |模：postsPerRow |加：1%}
{%comment%}----分配第一个偏移量---{%endcomment%}
{%assign offset=numberOfFeaturedPosts%}
最新帖子
{（1…numorrows）%%中的行的%
{%include{u latest_posts.html%}
{%comment%}----下一行的增量偏移量--{%endcomment%}
{%assign offset=offset | plus:postsPerRow%}
{%endfor%}

为了获得干净和简短的文件，我们创建了两个包括：

_包括/_featured_posts.html

特写文章
{site.posts限制：numberOfFeaturedPosts%}
{{post.extract | strip_html}



{%if post.author%}
{{post.author}}
{%else%}
{{site.data.settings.author}
{%endif%}

{{post.date}日期：'%b%d，%Y'}


{%endfor%}

_包括/_latest_posts.html

{%用于站点中的帖子。帖子偏移量：偏移量限制：postsPerRow%}
{{post.extract | strip_html}



{%if post.author%}
{{post.author}}
{%else%}
{{site.data.settings.author}
{%endif%}

{{post.date}日期：'%b%d，%Y'}


{%endfor%}

---

瞧

谢谢你，大卫！这就是我想要的。我不知道你可以用液体做这个。

---
layout: default
title: Blog - Jake Tarr
---
<section class="blog-feed">
    <div class="ribbon-container">
        <div class="ribbon">
            <div class="ribbon__content">
                <h6>Blog</h6>
            </div>
        </div>
    </div>

{% comment %}------ Template setup ------{% endcomment %}
{% assign numberOfFeaturedPosts = 1 %}
{% assign postsPerRow = 3 %}

<!-- Featured post (latest post) -->
{% include _featured_posts.html %}

{% comment %}--- Calculate the number of 'latest' posts to process {% endcomment %}
{% assign numberOfLatestPosts = site.posts | size | minus: numberOfFeaturedPosts %}

{% comment %}----- Calculate the number of rows -----{% endcomment %}
{% assign numOfRows = numberOfLatestPosts | modulo: postsPerRow | plus: 1 %}

{% comment %}---- Assign first offset -----{% endcomment %}
{% assign offset = numberOfFeaturedPosts %}

<!-- All the other posts added before latest post -->
    <div class="latest-section">
        <h5>Latest Posts</h5>
{% for row in (1...numOfRows) %}
{% include _latest_posts.html %}
{% comment %}---- Increment offset for next row ----{% endcomment %}
{% assign offset = offset | plus: postsPerRow %}
{% endfor %}
    </div>

</section>

<div class="featured-section">
    <h5>Featured Post</h5>
    {% for post in site.posts limit: numberOfFeaturedPosts %}
    <article class="featured-section__post">
        <figure class="post--featured-image">
            <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
        </figure>
        <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
        <p>{{ post.excerpt | strip_html }}</p>
        <div class="post-byline">
            <ul>
                <li><i class="fa fa-user"></i>
                    {% if post.author %}
                        {{ post.author }}
                    {% else %}
                        {{ site.data.settings.author }}
                    {% endif %}
                </li>
                <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
            </ul>
        </div>
    </article>
    {% endfor %}
</div>

<!-- Latest posts - row {{ row }} -->
<div class="latest-section__row">
    {% for post in site.posts offset: offset limit: postsPerRow %}
        <article class="latest-section__row--post">
            <figure class="post--featured-image">
                <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
            </figure>
            <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
            <p>{{ post.excerpt | strip_html }}</p>
            <div class="post-byline">
                <ul>
                    <li><i class="fa fa-user"></i>
                        {% if post.author %}
                            {{ post.author }}
                        {% else %}
                            {{ site.data.settings.author }}
                        {% endif %}
                    </li>
                    <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                    <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
                </ul>
            </div>
        </article>
    {% endfor %}
</div>