add pagination

scribu · scribu · commit a38eb756c6d3 · 2013-03-21T01:43:22.000+02:00
diff --git a/_config.yml b/_config.yml
@@ -4,5 +4,6 @@ pygments: true
 markdown: redcarpet
 url: http://wp-cli.org
 permalink: /blog/:title.html
+paginate: 10
 exclude:
   - Phakefile.php
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,10 +1,7 @@
 			</section>
 		</div>
-		<footer>
-			<div class="container">
-				Initial code by <a href="https://github.com/andreascreten">Andreas Creten</a>. Project maintained by <a href="https://github.com/scribu">Cristi Burc&#259;</a>.
-			</div>
-		</footer>
+
+		<footer>Initial code by <a href="https://github.com/andreascreten">Andreas Creten</a>. Project maintained by <a href="https://github.com/scribu">Cristi Burc&#259;</a>.</footer>
 
 		{% include analytics.html %}
 	</body>
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
@@ -74,6 +74,8 @@ header h2 {
 }
 
 footer {
+	clear: both;
+	display: block;
 	text-align: center;
 	font-size: 10px;
 	margin: 20px 10px 10px 10px;
@@ -279,3 +281,17 @@ article + article {
 	color: #666;
 }
 
+/* Pagination */
+
+.pagination {
+	display: block;
+	overflow: hidden;
+}
+
+.pagination .prev {
+	float: left;
+}
+
+.pagination .next {
+	float: right;
+}
diff --git a/blog/index.html b/blog/index.html
@@ -3,7 +3,7 @@
 title: Blog
 ---
 
-{% for post in site.posts limit: 10 %}
+{% for post in paginator.posts %}
 <article>
 	<div class="post-header">
 		<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
@@ -15,3 +15,21 @@ <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
 	</div>
 </article>
 {% endfor %}
+
+<nav class="pagination">
+	{% if paginator.previous_page %}
+	<div class="prev">
+		{% if paginator.previous_page == 1 %}
+		<a href="/blog/">←&nbsp;&nbsp;&nbsp;Newer</a>
+		{% else %}
+		<a href="/blog/page{{paginator.previous_page}}">←&nbsp;&nbsp;&nbsp;Newer</a>
+		{% endif %}
+	</div>
+	{% endif %}
+
+	{% if paginator.next_page %}
+	<div class="next">
+		<a href="/blog/page{{paginator.next_page}}">Older&nbsp;&nbsp;&nbsp;→</a>
+	</div>
+	{% endif %}
+</nav>
