2017-09-12 6 views
1

jekyll을 사용하여 블로그 게시물을 블로그 페이지로 채 웁니다. 나는 "행"클래스의 모든 div에 대해 두 개의 게시물을 원하지만 모든 네 번째 항목이 광고가되도록 (게시물을 건너 뛰고 다음 행으로 이동하지만 게시물이 아닌 다른 것을 계속 포함) 싶습니다.Jekyll 루프의 네 번째 항목마다 다르게 표시됩니다.

그래서 6 개 게시물이있는 경우, 출력은 내가 포스트 루프 부분이이

<div class="row"> <!-- 1st row --> 
    <div> {{ post.title }} </div> <!-- 1st post, no skip --> 
    <div> {{ post.title }} </div> <!-- 2nd post, no skip --> 
</div> 

<div class="row"> <!-- 2nd row --> 
    <div> {{ post.title }} </div> <!-- 3rd post, no skip --> 
    <div> THIS IS NOT A POST </div> <!-- skip post 4, put something else --> 
</div> 

<div class="row"> <!-- 3rd row --> 
    <div> {{ post.title }} </div> <!-- 4th post, because last item was skipped to display something else --> 
    <div> {{ post.title }} </div> <!-- 5th post, no skip --> 
</div> 

<div class="row"> <!-- 4th row --> 
    <div> {{ post.title }} </div> <!-- 6th post, no skip --> 
</div> 

<!-- and so on, so every 4th item is not a post, but the posts continue after the skipped post --> 

과 같아야하지만 난 SKIP

{% assign rows = site.posts.size | divided_by: 2.0 | ceil %} 
{% for i in (1..rows) %} 
    {% assign offset = forloop.index0 | times: 2 %} 
    <div class="row blogitems"> 
    {% for post in site.posts limit:2 offset:offset %} 
     <div class="col-md-6"> 
      <p>{{ post.title }}</p> 
     </div> 
    {% endfor %} 
    </div> 
{% endfor %} 

답변

1

나는 당신을 생각를 추가하는 방법을 알아낼 질수 modulo을 확인하는 동안 항목을 살펴볼 수 있습니다. 좋아요 :

<div class="row blogitems"> 
{% for post in site.posts %} 
    {% assign mod3 = forloop.index | modulo: 3 %} 
    <div class="col-md-6"><p>{{ post.title }}</p></div> 
    {% if mod3 == 0 %}<div class="col-md-6"><p>THIS IS NOT A POST</p>{% endif %} 
    {% if mod3 == 0 or mod3 == 2 %}</div><div class="row blogitems">{% endif %} 
{% endfor %} 
</div> 
+0

위대한 작품입니다! 완벽하고 succint 답변 주셔서 감사합니다! 내 블로그의 라이브 버전은 어떻게 보이는지 확인하려는 경우 :) https://somiibo.com/blog/ –

+0

안녕하십니까. 좋은 블로그. 내 발언 : 프리 로더에 문제가 있습니다. 사이트가로드되고 (사이트가 표시됨) 프리 로더가 표시되면 사이트가 다시 표시됩니다. – JoostS

+0

헤드 업에 감사드립니다. 그런 것을 알면 도움이됩니다! 프리 로더에 대한 CSS가 페이지 상단에서 가져 오기 때문에 왜 이런 일이 발생하는지 확신 할 수 없습니다. / –