<div class="blog-pagination">
    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}

    <div class="blog-pagination-left">
        {% if current_page_num >= 3 %}
          <a class="first-link" href="{{ blog_page_link(1) }}">❮❮</a>
        {% endif %}
        {% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}">❮</a>{% endif %}
    </div>
  
    <div class="blog-pagination-center">
        {% for page in page_list %}
            {% set this_page = current_page_num + page + offset %}
            {% if this_page > 0 and this_page <= contents.total_page_count %}
                <a {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
            {% endif %}
        {% endfor %}
    </div>
  
    <div class="blog-pagination-right">
        {% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}">❯</a>{% endif %}
        {% if contents.total_page_count - current_page_num >= 2 %}
          <a class="last-link" href="{{ contents.total_page_count }}">❯❯</a>
        {% endif %}
    </div>
</div>

          
        

          
            .blog-pagination {
    display: block;
    text-align: center;
}
.blog-pagination > div {
    display: inline-block;
}
.blog-pagination a {
    color: #000; 
    text-decoration: none;
}
.blog-pagination-left {
    text-align: right;
}
.blog-pagination-right {
    text-align: left;
}
.blog-pagination a {
    border-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
}
.blog-pagination a:hover,
.blog-pagination a:focus {
    background-color: #c8ecff;
    text-decoration: none;
}
.blog-pagination a.elipses {
    border: 0;
}
.blog-pagination a.active {
    background-color: #f5f5f5;
    color: #666;
    pointer-events: none;
    cursor: default;
}
.blog-pagination a.next-link,
.blog-pagination a.prev-link,
.blog-pagination a.last-link, 
.blog-pagination a.first-link{
    background-color: #666;
    color: #fff;
}
.blog-pagination a.next-link:hover,
.blog-pagination a.prev-link:hover,
.blog-pagination a.last-link:hover, 
.blog-pagination a.first-link:hover{
    background-color: #008cd4;
    color: #fff;
}