When listing content entries in a page, you might want to filter entries or create a pagination system. Here's how to do that.
Note: We consider that you have created an event content type as described in the previous guide
Add a category field to the event content type
In your app/content_types/events.yml
, add a block:
- category:
label: Category
type: string
required: true
Edit data/events.yml
and add a field category for each entry.
- "Sample 1":
description: "Quam repellat repudiandae harum impedit natus. Quos vel rem vitae error qui culpa est. Eveniet reprehenderit sed ipsum quibusdam eos ab nihil."
event_date: 2013/21/19 # YYYY/MM/DD
category: "foo"
Filter the entries on "foo" category
You will use with_scope liquid tag to filter the entries.
In a page, type:
<ul>
{% with_scope category: 'foo' %}
{% for event in contents.events %}
<li>{{ event.title }}</li>
{% endfor %}
{% endwith_scope %}
</ul>
Reverse the entries
Add the reversed
option to the for tag:
<ul>
{% for event in contents.events reversed %}
<li>{{ event.title }}</li>
{% endfor %}
</ul>
Pagination
You can easily create a navigation with page number, and previous or next button.
{% paginate contents.events by 2 %}
<ul>
{% for event in paginate.collection %}
<li>{{ event.title }}</li>
{% endfor %}
</ul>
<div class="pagination">
{% if paginate.previous_page %}<a href="?page={{paginate.previous_page}}">Previous</a>{% endif %}
{% if paginate.next %}<a href="?page={{ paginate.next_page }}">Next</a>{% endif %}
</div>
{% endpaginate %}
You also can use the paginate
filter instead of the pagination div:
{{ paginate | default_pagination }}
Learn more: