Added pagination to homepage

README.md

@@ -19,6 +19,7 @@ Daktilo is a [Jekyll](jekyllrb.com) theme with a minimal design inspired from ty
 # How to use it
 Start by cloning the repository, then check the `_config.yml` file and change it accordingly.
 Note that the `title` property is what will be displayed as logo.
+Change the `num` in `paginate:num` to see the number of posts on one page.
 
 Finally execute `jekyll serve --watch` and head to [localhost:4000](http://127.0.0.1:4000) to see the result.
 

_config.yml

@@ -1,4 +1,6 @@
-# Site settings
+gems: [jekyll-paginate]
+
+    # Site settings
 title: Daktilo
 description: >
   Write an awesome description for your new site here. You can edit this
@@ -27,3 +29,6 @@ exclude: ["README.md", "README.html"]
 # Build settings
 highlighter: null
 markdown: kramdown
+
+paginate: 5
+paginate_path: "/page:num"

_sass/_default.scss

@@ -302,4 +302,12 @@ strong {
     .post-title__subtitle {
         font-size: 18px;
     }
-}
+}
+
+.pagination {
+    font-size: 14px;
+    padding: 0px;
+    text-align: center;
+    position: relative;
+
+}

index.html

@@ -7,12 +7,28 @@
 ---
 
 <ul class="list-posts">
-    {% for post in site.posts %}
+{% for post in paginator.posts %}
         <li class="post-teaser">
             <a href="{{ post.url | prepend: site.baseurl }}">
                 <span class="post-teaser__title">{{ post.title }}</span>
                 <span class="post-teaser__date">{{ post.date | date: "%d %B %Y" }}</span>
             </a>
         </li>
-    {% endfor %}
+{% endfor %}
+
+<!-- Pagination links -->
+<div class="pagination">
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
+  {% else %}
+    <span class="previous">Previous</span>
+  {% endif %}
+  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path }}" class="next">Next</a>
+  {% else %}
+    <span class="next ">Next</span>
+  {% endif %}
+</div>
+
 </ul>