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

我正在写博客。在主页上，它的顶部有一个引导滑块，后面跟着帖子。如何在鬼博客的帖子中实现过滤器

因此，前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>

我希望我明确提出了我的问题。

来源

2016-09-07 Nauman Tanwir

这是[Handlebars]（http://handlebarsjs.com/）？我不熟悉Handlebars'＃foreach'，只有'＃each'。 – 76484

@ 76484嗨，是的，这把手。 –

你有权访问后端？你能不能将'posts'分成两个集合 - 一个用于滑块，另一个用于列表？ – 76484

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

假设你有要传递到您的视图博客文章的数组：

{ 
    posts: array_of_posts 
}

您可以改为在你的模板数据两个数组，一个滑块和一个为上市：

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

在您的模板中，您将相应地遍历slider_posts和listing_posts。

来源

2016-09-09 12:46:51 76484

您可以使用限制在#foreach循环的滑块和使用从和到设置开始和您的帖子的终点。

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

来源

2017-10-23 11:19:25

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

回答

相关问题