Update Post List

Author: DONGChuan

_config.yml

@@ -16,11 +16,18 @@ github_url: https://github.com/DONGChuan
 
 url: "http://yourdomain.com" # the base hostname & protocol for your site
 
+## Gem
+gems:
+  - jekyll-paginate
+
 # Build settings
 markdown: kramdown
 
+# Pagination
+paginate: 10
+paginate_path: 'page:num'
+
 # Navigation
-# navigation
 navs:
   -
     href: /

assets/css/common.css

@@ -93,9 +93,14 @@
 }
 
 .jumbotron .meta-info {
+    font-size: 20px;
     margin-right: 15px
 }
 
+.jumbotron.meta-info, .jumbotron .meta-info .octicon {
+    font-size: 18px;
+}
+
 /** Footer **/
 .site-footer{
     position:relative;
@@ -115,4 +120,30 @@
 
 .site-footer .octicon-mark-github:hover {
     color:#bbb;
+}
+
+/** Post List **/
+.post-list-item {
+    position: relative;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    list-style: none;
+    border-bottom: 1px solid #eee;
+}
+
+.post-list-description {
+    margin-top: 8px;
+    margin-bottom: 0;
+    font-size: 18px;
+    color: #666
+}
+
+.post-list-meta {
+    margin-top: 8px;
+    margin-bottom: 0;
+    color: #888
+}
+
+.post-list-meta, .post-list-meta.octicon {
+    font-size: 18px;
 }

css/main.scss

@@ -2,7 +2,7 @@
 layout: default
 menu: home
 ---
-<div class="jumbotron">
+<section class="jumbotron">
     <div class="container">
         <h1>I'm a Cool Boy :P</h1>
         <div id="jumbotron-meta-info">
@@ -20,16 +20,63 @@ <h1>I'm a Cool Boy :P</h1>
             </span>
         </div>
     </div>
-</div>
-<div>p</div>
-<div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
-<div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div><div>p</div>
+</section>
+<section class="content container">
+
+    <div class="row">
+
+        <!-- Post List -->
+        <div class="col-md-8">
+                {% for post in paginator.posts %}
+                        <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
+                        {{ post.excerpt | strip_html | strip }}
+                    </p>
+                        <span class="octicon octicon-calendar"></span> {{ post.date | date: "%Y/%m/%d" }}
+                    </p>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
+        <div class="col-md-4">
+        </div>
+    </div>
+
+    <!-- Pagination -->
+    <div class="pagination text-align">
+        <div class="btn-group">
+
+            {% if paginator.previous_page %}
+            {% if paginator.previous_page == 1 %}
+            <a href="/" class="btn btn-outline">&laquo;</a>
+            {% else %}
+            <a href="/page{{paginator.previous_page}}" class="btn btn-outline">&laquo;</a>
+            {% endif %}
+            {% else %}
+            <button disabled="disabled" href="javascript:;" class="btn btn-outline">&laquo;</button>
+            {% endif %}
+
+            {% if paginator.page == 1 %}
+            <a href="javascript:;" class="active btn btn-outline">1</a>
+            {% else %}
+            <a href="/" class="btn btn-outline">1</a>
+            {% endif %}
+
+            {% for count in (2..paginator.total_pages) %}
+            {% if count == paginator.page %}
+            <a href="javascript:;" class="active btn btn-outline">{{count}}</a>
+            {% else %}
+            <a href="/page{{count}}" class="btn btn-outline">{{count}}</a>
+            {% endif %}
+            {% endfor %}
+
+            {% if paginator.next_page %}
+            <a href="/page{{paginator.next_page}}" class="btn btn-outline">&raquo;</a>
+            {% else %}
+            <button disabled="disabled" href="javascript:;" class="btn btn-outline">&raquo;</button>
+            {% endif %}
+
+        </div>
+    </div>
+
+</section>