如何在鬼博客的帖子中實現過濾器

我正在寫博客。在主頁上，它的頂部有一個引導滑塊，後面跟着帖子。如何在鬼博客的帖子中實現過濾器

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

如何在鬼博客的帖子中實現過濾器

回答

相關問題