Skip to content

Instantly share code, notes, and snippets.

@mirshko
Created March 13, 2017 19:58
Show Gist options
  • Save mirshko/b58160e177a7173160faf1eb89fdbfdb to your computer and use it in GitHub Desktop.
Save mirshko/b58160e177a7173160faf1eb89fdbfdb to your computer and use it in GitHub Desktop.
Custom HubSpot blog pagination built with Materialize CSS
{% 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 %}
<ul class="pagination">
<li class="waves-effect {% if current_page_num == 1 %}disabled{% endif %}">
{% if current_page_num == 1 %}
<a><i class="material-icons">chevron_left</i></a>
{% else %}
<a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}">
<i class="material-icons">chevron_left</i>
</a>
{% endif %}
</li>
{% if more_pages == 0 %}
{% if current_page_num - 4 == 1 %}
<li class="waves-effect">
<a href="{{ group.absolute_url }}">
{{ current_page_num - 4 }}
</a>
</li>
{% endif %}
{% if current_page_num - 4 > 1 %}
<li class="waves-effect">
<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 class="waves-effect">
<a href="{{ group.absolute_url }}">
{{ current_page_num - 3 }}
</a>
</li>
{% endif %}
{% if current_page_num - 3 > 1 %}
<li class="waves-effect">
<a href="{{ blog_page_link(current_page_num - 3) }}">
{{ current_page_num - 3 }}
</a>
</li>
{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}
<li class="waves-effect">
<a href="{{ group.absolute_url }}">
{{ current_page_num - 2 }}
</a>
</li>
{% endif %}
{% if current_page_num - 2 > 1 %}
<li class="waves-effect">
<a href="{{ blog_page_link(current_page_num - 2) }}">
{{ current_page_num - 2 }}
</a>
</li>
{% endif %}
{% if current_page_num - 1 == 1 %}
<li class="waves-effect">
<a href="{{ group.absolute_url }}">
{{ current_page_num - 1 }}
</a>
</li>
{% endif %}
{% if current_page_num - 1 > 1 %}
<li class="waves-effect">
<a href="{{ blog_page_link(current_page_num - 1) }}">
{{ current_page_num - 1 }}
</a>
</li>
{% endif %}
<li class="active waves-effect">
<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 class="waves-effect">
<a href="{{ blog_page_link(current_page_num + 1) }}">
{{ current_page_num + 1 }}
</a>
</li>
{% endif %}
{% if current_page_num + 2 <= total_pages %}
<li class="waves-effect">
<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 class="waves-effect">
<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 class="waves-effect">
<a href="{{ blog_page_link(current_page_num + 4) }}">
{{ current_page_num + 4 }}
</a>
</li>
{% endif %}
{% endif %}
<li class="waves-effect {% if current_page_num == total_pages %}disabled{% endif %}">
{% if current_page_num == total_pages %}
<a><i class="material-icons">chevron_right</i></a>
{% else %}
<a href="{{blog_page_link(next_page_num)}}">
<i class="material-icons">chevron_right</i>
</a>
{% endif %}
</li>
</ul>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment