This repository has been archived by the owner on Apr 28, 2019. It is now read-only.
/
paginate-scope.liquid.haml
82 lines (58 loc) · 2.33 KB
/
paginate-scope.liquid.haml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
---
title: Paginate and filter
listed: true
position: 4
---
{% extends 'references/content-types' %}
{% block content %}
:markdown
When listing content entries in a page, you might want to filter entries or create a pagination system.
Here's how to do that.
<div class="alert alert-info"><strong>Note: </strong>We consider that you have created an event content type as described in the <a href="create">previous guide</a></div>
# 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:
{% raw %}<ul>
{% with_scope category: 'foo' %}
{% for event in contents.events %}
<li>{{ event.title }}</li>
{% endfor %}
{% endwith_scope %}
</ul>{% endraw %}
# Reverse the entries
Add the `reversed` option to the for tag:
{% raw %}<ul>
{% for event in contents.events reversed %}
<li>{{ event.title }}</li>
{% endfor %}
</ul>{% endraw %}
# Pagination
You can easily create a navigation with page number, and previous or next button.
{% raw %}{% 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 %}{% endraw %}
You also can use the `paginate` filter instead of the pagination div:
{% raw %}{{ paginate | default_pagination }}{% endraw %}
Learn more:
- [**paginate** tag documentation](/references/api/tags/paginate)
- [**with\_scope** tag documentation](/references/api/tags/with-scope)
{% endblock %}