跳过前一个 post 时如何忽略 Jekyll 中的偏移量
How to ignore offset in Jekyll when previous post is skipped
我正在尝试在 Jekyll 上创建我的第一个博客。我坚持一件事:我有一个类别的部分,假设是“新闻”:
<section class="news">
<div class="container">
<div class="row no-gutters">
{% for post in site.categories.news limit: 2 offset: 0 %}
{% include news-item-col-6.html %}
{% endfor %}
{% for post in site.categories.news limit: 3 **offset: 2** %}
{% include news-item-col-4.html %}
{% endfor %}
</div>
</div>
</section>
news-item-col-6:
{% if post.thumb != 0 %}
<div class="col-md-6">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3><a href="{{ post.url }}">{{ post.header }}</a></h3>
</div>
</div>
</div>
</div>
{% endif %}
news-item-col-4:
{% if post.thumb != 0 %}
<div class="col-md-4">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3><a href="{{ post.url }}">{{ post.header }}</a></h3>
</div>
</div>
</div>
</div>
{% endif %}
我的posttp
---
layout: post
title: title | site.com
header: title
description: description
categories: categories url
catname: News
image: "images/URL /to image/1.jpg"
thumb: "images/URL /to thumb/1t.jpg"
permalink: "blog/:categories/:year-:month-:day-:slug.html"
---
问题是并非我所有的 post 都有背景缩略图,我只想忽略没有 post.thumb
的 post。并且代码有效,但不幸的是 col-md-4
块的偏移量没有忽略没有 post.thumb
.
的 post 的顺序
下图就是我想要的:
- This is how should be, if all my posts have post.thumb(bg_image)
- This is how should be, if my post Item2 has no post.thumb(bg_image), it just not showing up in section
- And this is how my code works
那么我应该怎么做才能让它正常工作?
只需使用自定义计数器,如下所示:
{% assign counter = 0 %} <!-- create a custom counter and set it to zero -->
{% for post in site.categories.news %} <!-- loop through the posts in news -->
{% if post.thumb %} <!-- check if the post has a thumbnail -->
{% assign counter = counter | plus: 1 %} <!-- increment the counter if it does -->
{% if counter < 3 %} <!-- if this is the first or second counted post -->
{% include news-item-col-6.html %} <!-- include the col-6 element -->
{% elsif counter < 6 %} <!-- else -->
{% include news-item-col-4.html %} <!-- include the col-4 element -->
{% endif %}
{% endif %}
{% endfor %}
我正在尝试在 Jekyll 上创建我的第一个博客。我坚持一件事:我有一个类别的部分,假设是“新闻”:
<section class="news">
<div class="container">
<div class="row no-gutters">
{% for post in site.categories.news limit: 2 offset: 0 %}
{% include news-item-col-6.html %}
{% endfor %}
{% for post in site.categories.news limit: 3 **offset: 2** %}
{% include news-item-col-4.html %}
{% endfor %}
</div>
</div>
</section>
news-item-col-6:
{% if post.thumb != 0 %}
<div class="col-md-6">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3><a href="{{ post.url }}">{{ post.header }}</a></h3>
</div>
</div>
</div>
</div>
{% endif %}
news-item-col-4:
{% if post.thumb != 0 %}
<div class="col-md-4">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3><a href="{{ post.url }}">{{ post.header }}</a></h3>
</div>
</div>
</div>
</div>
{% endif %}
我的posttp
---
layout: post
title: title | site.com
header: title
description: description
categories: categories url
catname: News
image: "images/URL /to image/1.jpg"
thumb: "images/URL /to thumb/1t.jpg"
permalink: "blog/:categories/:year-:month-:day-:slug.html"
---
问题是并非我所有的 post 都有背景缩略图,我只想忽略没有 post.thumb
的 post。并且代码有效,但不幸的是 col-md-4
块的偏移量没有忽略没有 post.thumb
.
下图就是我想要的:
- This is how should be, if all my posts have post.thumb(bg_image)
- This is how should be, if my post Item2 has no post.thumb(bg_image), it just not showing up in section
- And this is how my code works
那么我应该怎么做才能让它正常工作?
只需使用自定义计数器,如下所示:
{% assign counter = 0 %} <!-- create a custom counter and set it to zero -->
{% for post in site.categories.news %} <!-- loop through the posts in news -->
{% if post.thumb %} <!-- check if the post has a thumbnail -->
{% assign counter = counter | plus: 1 %} <!-- increment the counter if it does -->
{% if counter < 3 %} <!-- if this is the first or second counted post -->
{% include news-item-col-6.html %} <!-- include the col-6 element -->
{% elsif counter < 6 %} <!-- else -->
{% include news-item-col-4.html %} <!-- include the col-4 element -->
{% endif %}
{% endif %}
{% endfor %}