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

Question

我正在写博客。在主页上，它的顶部有一个 bootstrap 滑块，后面跟着 posts。

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

我想我需要实施某种过滤器来完成这项工作。

下面是我的 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

如果您能够修改创建模板数据对象的后端代码，那么我认为最好在传递数据之前执行分组逻辑到模板。

假设您有一组要传递给视图的博客文章：

{
    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 循环中使用limit，并使用from 和to 设置帖子的起点和终点。

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

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

how to implement filter in posts in ghost blog

handlebars.js

ghost-blog