I'm trying to highlight the page number that is currently being view. Either bolding the font or adding a border around the number. I'm not sure what I need to add to the script I'm currently using:
<div class="blog-pagination"> {% 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 = 5 %} {% set loop_ = ['1', '2', '3', '4', '5'] %} {% endif %}
{% set current_pg_index = last_page_num + 1 %} {% set range_start = ((1 - current_pg_index) % base) + current_pg_index %}
{# EXTRA: calculate start of previous range and end of next {% set range_end = range_start + (base)-1 %}
{% set previous_range_start = ((6 - current_pg_index) % base) + current_pg_index - base %} {% if previous_range_start < 1 %} {% set previous_range_start = 1 %} {% endif %} #} <ul> <li class="first-posts-link {% if current_pg_index <= 1 %}hide{% endif %}"><a href="{{ blog_page_link(1) }}"><i class="fa fa-angle-double-left"></i></a></li> <li class="previous-posts-link {% if !last_page_num %}hide{% endif %}"><a href="{{ blog_page_link(last_page_num) }}"><i class="fa fa-angle-left"></i></a></li> <span class="pg"> {% set i = range_start %} {% for pg in loop_ %} {# effectively, for i=1 to i=base #} {% if i <= contents.total_page_count %} <li{% if i == current_pg_index %} class="active"{% endif %}><a href="{{ blog_page_link(i) }}">{{ i }}</a></li>
{% set i = i + 1 %} {% endif %} {% endfor %} </span> <li class="next-posts-link {% if current_pg_index == contents.total_page_count %}hide{% endif %}"><a href="{{ blog_page_link(next_page_num) }}"><i class="fa fa-angle-right"></i></a></li> <li class="last-posts-link {% if current_pg_index == contents.total_page_count %}hide{% endif %}"><a href="{{ blog_page_link(contents.total_page_count) }}"><i class="fa fa-angle-double-right"></i></a></li> </ul> {% endif %} </div>
