Add post pager

This commit is contained in:
Oliver Davies 2018-06-03 12:05:03 +01:00
parent 56127cccb1
commit b0fe5af776
2 changed files with 42 additions and 15 deletions

View file

@ -0,0 +1,41 @@
<div class="py-8 text-center">
<ul class="list-reset inline-flex">
<li>
{% if page.pagination.page == 1 %}
<span class="rounded-l-lg p-3 border border-grey text-grey -mr-px cursor-not-allowed">
Previous
</span>
{% else %}
<a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
Previous
</a>
{% endif %}
</li>
{% for i in range(1, page.pagination.total_pages) %}
<li>
{% if i == page.pagination.page %}
<span class="p-3 border border-grey text-white bg-blue -mr-px">
{{ i }}
</span>
{% else %}
<a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
{{ i }}
</a>
{% endif %}
</li>
{% endfor %}
<li>
{% if page.pagination.next_page.url %}
<a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey">
Next
</a>
{% else %}
<span class="rounded-r-lg p-3 border border-grey text-grey cursor-not-allowed">
Next
</span>
{% endif %}
</li>
</ul>
</div>

View file

@ -36,19 +36,5 @@ use: [posts]
{% endfor %}
</ul>
{% if page.pagination.previous_page or page.pagination.next_page %}
<ul class="list-reset flex">
{% if page.pagination.next_page %}
<li class="w-1/2">
<a href="{{ site.url }}{{ page.pagination.next_page.url }}">← Older posts</a>
</li>
{% endif %}
{% if page.pagination.previous_page %}
<li class="text-right {{ page.pagination.next_page and page.pagination.previous_page ? 'w-1/2' : 'w-full' }}">
<a href="{{ site.url }}{{ page.pagination.previous_page.url }}">Newer posts →</a>
</li>
{% endif %}
</ul>
{% endif %}
{% include 'post-pager.html.twig' %}
{% endblock %}