How To Create HubsPot Pagination Using HubL – 100% Working

2 min read
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.
<!-- 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 class="previous-page" href="{{ blog_page_link(last_page_num) }}">

<!-- Heroicon name: mini/arrow-long-left -->
    <div class="bwh-in-article-ad">
      <ins class="adsbygoogle"
           style="display:block; text-align:center;"
           data-ad-client="ca-pub-4299086769596754"
           data-ad-slot="8699383760"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
Previous

</a>{% endif %} 
<style>
          .previous-number {

            display:none;

            }</style>
</div>
<div class="hidden md:-mt-px md:flex"><span class="pg"><span class="pg">

{% set i = range_start %}

{% for pg in loop_ %} {# effectively, for i=1 to i=base #}

{% if i <= contents.total_page_count %}</span></span><a class="{% if !current_pg_index %}blog-pagination{% endif %} {% if i == current_pg_index %}blog-pagination-active {% endif %}" href="{{ blog_page_link(i) }}">{{ i }}</a>

{% set i = i + 1 %}

{% endif %}

{% endfor %}

{% 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 class="bwh-in-article-ad">
      <ins class="adsbygoogle"
           style="display:block; text-align:center;"
           data-ad-client="ca-pub-4299086769596754"
           data-ad-slot="8699383760"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
{% if next_page_num %}

<a class="next-page" href="{{ blog_page_link(current_page_num + 1) }}">

Next

<!-- Heroicon name: mini/arrow-long-right -->

</a>{% endif %}
</div>
{% endif %}

{% endif %}
</nav>
Blog