Add post pager
This commit is contained in:
parent
56127cccb1
commit
b0fe5af776
41
source/_partials/post-pager.html.twig
Normal file
41
source/_partials/post-pager.html.twig
Normal 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>
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue