Melhoria da paginação conforme PR wowthemesnet/mediumish-theme-jekyll…

…#124

_config.yml

@@ -66,7 +66,8 @@ highlighter: rouge
 
 # Paginate
 paginate: 10
-
+paginate_trail: 2
+paginate_show_first_and_last: true
 
 sass:
   sass_dir: _sass

_includes/pagination.html

@@ -0,0 +1,38 @@
+{% if paginator.total_pages > 1 %}
+<nav aria-label="Page navigation example">
+<ul class="pagination justify-content-center flex-wrap">
+
+  {% if paginator.previous_page %}
+    {% if site.paginate_show_first_and_last %}
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/" title="First page">&laquo;</a></li>
+    {% endif %}
+    <li class="page-item"><a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="Previous page">&lt;</a></li>
+  {% endif %}
+
+  {% assign page_start = paginator.page | minus: site.paginate_trail %}
+  {% assign page_end = paginator.page | plus: site.paginate_trail %}
+
+  {% for page in (page_start..page_end) %}
+    {% if page < 1 %}
+      <!-- Do nothing -->
+    {% elsif page > paginator.total_pages %}
+      <!-- Do nothing -->
+    {% elsif page == paginator.page %}
+      <li class="page-item active"><a class="page-link">{{ page }} <span class="sr-only">(current)</span></a></li>
+    {% elsif page == 1 %}
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/">{{ page }}</a></li>
+    {% else %}
+      <li class="page-item"><a class="page-link" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
+    {% endif %}
+  {% endfor %}
+
+  {% if paginator.next_page %}
+    <li class="page-item"><a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="Next page">&gt;</a></li>
+    {% if site.paginate_show_first_and_last %}
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/page{{ paginator.total_pages }}" title="Last page">&raquo;</a></li>
+    {% endif %}
+  {% endif %}
+
+</ul>
+</nav>
+{% endif %}

_sass/custom.scss

@@ -7,4 +7,5 @@
 @import 'external/source-sans-pro';
 
 
+@import 'includes/pagination.scss';
 @import 'includes/about.scss';

_sass/includes/_pagination.scss

@@ -0,0 +1,34 @@
+
+/* pagination */
+
+$paginateColor: #00ab6b;
+
+.pagination > li > a
+{
+    background-color: white;
+    color: $paginateColor;
+}
+
+.pagination > li > a:focus,
+.pagination > li > a:hover,
+.pagination > li > span:focus,
+.pagination > li > span:hover
+{
+    color: #5a5a5a;
+    background-color: #eee;
+    border-color: #ddd;
+}
+
+.pagination > .active > a
+{
+    color: white;
+    background-color: $paginateColor !important;
+    border: solid 1px $paginateColor !important;
+}
+
+.pagination > .active > a:hover
+{
+    background-color: $paginateColor !important;
+    border: solid 1px $paginateColor;
+}
+/* pagination end */

assets/css/main.css

@@ -3758,7 +3758,7 @@ input[type="button"].btn-block {
 .breadcrumb-item.active {
   color: #6c757d; }
 
-.pagination {
+.pagination  {
   display: flex;
   padding-left: 0;
   list-style: none;

index.html

@@ -177,32 +177,7 @@ <h4 class="font-weight-bold spanborder"><span>Últimos posts</span></h4>
 
         {% endfor %}
         <div class="mt-5">
-         <!-- Pagination links -->
-            {% if paginator.total_pages > 1 %}
-            <ul class="pagination"> 
-              {% if paginator.previous_page %}
-                <li class="page-item"><a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a></li>
-              {% else %}
-                <li class="page-item disabled"><span class="prev page-link">&laquo;</span></li>
-              {% endif %}
-
-              {% for page in (1..paginator.total_pages) %}
-                {% if page == paginator.page %}
-                <li class="page-item disabled"><span class="webjeda page-link">{{ page }}</span></li>
-                {% elsif page == 1 %}
-                <li class="page-item"><a class="page-link" href="{{site.baseurl}}/">{{ page }}</a></li>
-                {% else %}
-                <li class="page-item"><a class="page-link" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
-                {% endif %}
-              {% endfor %}
-
-              {% if paginator.next_page %}
-                <li class="page-item"><a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a></li>
-              {% else %}
-                <li class="page-item disabled"><span class="next page-link">&raquo;</span></li>
-              {% endif %}
-            </ul>
-            {% endif %}      
+         {% include pagination.html %}
         </div>
 
     </div>