Follow our step-by-step guide to seamlessly implement pagination in HubSpot, ensuring a smooth user experience. This tutorial focuses on HubL, and it’s designed to work flawlessly with your blog listing template.
php
<!-- Pagination HERE--------- -->
<nav class="blog-pagination-container">
{% if not simple_list_page %}
{% if contents.total_page_count > 0 %}
{% if widget.range == 10 %}
{% set base = 10 %}
{% set loop_ = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’,’7′,’8′,’9′,’10’] %}
{% else %}
{% set base = 10 %}
{% set loop_ = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’,’7′,’8′,’9′,’10’] %}
{% endif %}
{% set current_pg_index = last_page_num + 1 %}
{% set range_start = ((1 – current_pg_index) % base) + current_pg_index %}
<div class="-mt-px flex w-0 flex-1 {% if current_page_num == 1 %} previous-number {% else %} {% endif %}">
{% if !last_page_num || !first_page_num %}
<a href="{{ blog_page_link(last_page_num) }}" class="previous-page">
<!-- Heroicon name: mini/arrow-long-left -->
<svg class="mr-3 h-5 w-5 text-gray-400 prev-number" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
</svg>
Previous
</a>{% endif %}
<style>
.previous-number {
display:none;
}</style>
</div>
<div class="hidden md:-mt-px md:flex">
<span class="pg">
{% set i = range_start %}
{% for pg in loop_ %} {# effectively, for i=1 to i=base #}
{% if i <= contents.total_page_count %}
<a href="{{ blog_page_link(i) }}" class="{% if !current_pg_index %}blog-pagination{% endif %} {% if i == current_pg_index %}blog-pagination-active {% endif %}">{{ i }}</a>
{% set i = i + 1 %}
{% endif %}
{% endfor %}
</span>
{% if contents.total_page_count > 9 %}
{% if current_page_num >= 8 %}
<span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">
<a href="{% if current_page_num <= 9 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 9) }}{% endif %}">…</a></span>
{% endif %}
{% endif %}
{% if current_pg_index == contents.total_page_count %}
{% if contents.total_page_count > 5 %}
<span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">…</span>
{% endif %}
{% endif %}
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
{% if next_page_num %}
<a href="{{ blog_page_link(current_page_num + 1) }}" class="next-page">
Next
<!-- Heroicon name: mini/arrow-long-right -->
<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
</svg>
</a>{% endif %}
</div>
{% endif %}
{% endif %}
</nav>