update paginator

_config.yml

@@ -12,7 +12,7 @@ urls:
       url: /feed.xml
 url: "https://agusmakmun.github.io"
 baseurl: ""
-paginate: 20
-per_page: 20
+paginate: 3
+per_page: 3
 paginate_path: "/page:num/"
 markdown: kramdown
\ No newline at end of file

index.html

@@ -13,28 +13,40 @@ layout: default
 
     <!-- Pagination links -->
     {% if paginator.total_pages > 1 %}
-    <div class="pagination">
+    <ul class="pagination">
       {% if paginator.previous_page %}
-        <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+        <li>
+          <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo;</a>
+        </li>
       {% else %}
-        <span>&laquo; Prev</span>
+        <li class="disabled"><span aria-hidden="true">&laquo;</span></li>
       {% endif %}
 
+      <li><a href="/">First</a></li>
+
       {% for page in (1..paginator.total_pages) %}
         {% if page == paginator.page %}
-          <em>{{ page }}</em>
+          <li class="active">
+             <a>{{ page }}<span class="sr-only">(current)</span></a>
+          </li>
         {% elsif page == 1 %}
-          <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
+          <li><a href="/">{{ page }}</a></li>
         {% else %}
-          <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+          <li>
+            <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+          </li>
         {% endif %}
       {% endfor %}
 
+      <li><a href="/page{{ paginator.total_pages }}/">Last</a></li>
+
       {% if paginator.next_page %}
-        <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
+        <li>
+          <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&raquo;</a>
+        </li>
       {% else %}
-        <span>Next &raquo;</span>
+        <li class="disabled"><span>&raquo;</span></li>
       {% endif %}
-    </div>
+    </ul>
     {% endif %}
 </div><!-- end #home -->