Question

我正在写博客。在主页上，它顶部有一个引导滑块，后面跟着帖子。

因此，前3个最新帖子将出现在滑块中，从第4个帖子开始，它们将出现在标记的其余部分。

我认为我需要实施某种过滤器来做这件事。

以下是我的 hbs 代码。

<div class="col-md-12 hidden-xs">
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner ">
            <div class="item active ">
                {{#foreach posts}}
                <article class="{{post_class}} col-md-12">
                    <div class="post-inner">
                        <header class="post-header text-left">
                            <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                        </header>
                        <section class="post-excerpt">
                            <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                            {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                        </section>
                        <div class="post-meta">
                            {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                            <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                        </div>
                    </div>
                </article>
                {{/foreach}}
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    <div class="bottom-line"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-4 ">
        {{#foreach posts}}
        <article class="{{post_class}} col-md-12">
            <div class="post-inner">
                <header class="post-header text-left">
                    <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                </header>
                <section class="post-excerpt">
                    <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                    {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                </section>
                <div class="post-meta">
                    {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                    <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                </div>
            </div>
        </article>
        {{/foreach}}
    </div>
</div>

我希望我明白我的问题。

Answer 1

如果您能够修改创建模板数据对象的后端代码，那么我认为在将数据传递给模板之前执行分组逻辑会更好。< / p>

假设您有一系列博客文章要传递给您的观点：

{ posts: array_of_posts }

您可以在模板数据中使用两个数组，一个用于滑块，另一个用于列表：

{ slider_posts: array_of_posts.slice(0, 3), listing_posts: array_of_posts.slice(3) }

在您的模板中，您将相应地迭代slider_posts和listing_posts。

Answer 2

您可以在#foreach循环中使用限制作为滑块，并使用从和到来设置帖子的开始和结束点。

{{#foreach posts from="0" to="4" limit="4"}}
....
{{/foreach}}

如何在ghost博客的帖子中实现过滤器

2 个答案: