Hubspot paginación – múltiples formas

Hubspot paginación – múltiples formas

Forma 1 – default (Previous All posts Next)

<div class="blog-pagination">
  {% if last_page_num %}
    <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
  {% endif %}
    <a class="all-posts-link" href="{{ blog_all_posts_url(group.id) }}">All posts</a>
  {% if next_page_num %}
     <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
   {% endif %}
</div>

Forma 2 – mostrar todas las páginas numeradas ( < 1234567 >)

 
{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}
<nav>
  <ul class="pagination">
<li class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}">&#60;</a></li>
                        
{% if more_pages == 0 %}
    {% if current_page_num - 4 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></li>{% endif %}
    {% if current_page_num - 4 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></li>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
    {% if current_page_num - 3 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></li>{% endif %}
    {% if current_page_num - 3 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 2 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 1 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></li>{% endif %}
{% if current_page_num - 1 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></li>{% endif %}
<li class="active"><a href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></li>
{% if current_page_num + 1 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></li>{% endif %}
{% if current_page_num + 2 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></li>{% endif %}
{% if current_page_num <= 2 %}
    {% if current_page_num + 3 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
    {% if current_page_num + 4 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></li>{% endif %}
{% endif %}
<li class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{{blog_page_link(next_page_num)}}">&#62;</a></li>
</ul>
</nav>
{% endif %}

Forma 3 – mostrar solo 3 páginas numeradas ( < … 123 … >)

<div class="blog-pagination">
             
{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}
  <nav>
  <ul class="pagination">
 <li class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}">&#60;</a></li>
{# mostrar página numeradas #}
{% set num_pagination = [-2, -1, 0, 1, 2] %}
{% for num_pag in num_pagination %}
  {# mostrar ... si es que hay mas páginas antes #}
  {% if loop.first and current_page_num - 1 - ( (loop.length-1)//2 ) > 0 %}
  	<li class="first_more"><a href="{{ blog_page_link(current_page_num - 1 - ( (loop.length-1)//2 )) }}">...</a></li>
  {% endif %}
  {# mostrar num página anterior #}
  {% if loop.first and current_page_num - ( (loop.length-1)//2 ) > 0 %}
     <li class="first"><a href="{{ blog_page_link(current_page_num - ( (loop.length - 1)//2 )) }}">{{(current_page_num - ( (loop.length-1)//2 ))}}</a></li>
  {% endif %}
  {# mostrar num página #}
  {% if not loop.first and not loop.last and current_page_num + num_pag > 0 and current_page_num + num_pag <= total_pages %}
  	<li class="pag_num {% if current_page_num + num_pag == current_page_num  %}{{"active"}}{%endif%} "><a href="{{ blog_page_link(current_page_num + num_pag) }}">{{current_page_num + num_pag}}</a></li>
  {% endif %}
  {# mostrar num página siguiente #}
  {% if loop.last and (current_page_num + ( (loop.length-1)//2 )) <= total_pages %}
  	<li class="last"><a href="{{ blog_page_link(current_page_num + ( (loop.length-1)//2 )) }}">{{(current_page_num + ( (loop.length-1)//2 ))}}</a></li>
  {% endif %}
  {# mostrar ... si es que hay mas páginas despues #}
  {% if loop.last and current_page_num + 1 + ( (loop.length-1)//2 ) <= total_pages %}
  	<li class="last_more"><a href="{{ blog_page_link(current_page_num + 1 + ( (loop.length-1)//2 )) }}">...</a></li>
  {% endif %}	
{% endfor %}
  <li class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{{blog_page_link(next_page_num)}}">&#62;</a></li>
  </ul>
</nav>
{% endif %} 
</div>

Deja un comentario

4 × 3 =

Cerrar menú