Add proper pagination support. https://github.com/spf13/hugo/issues/96

2 files changed, 90 insertions, 21 deletions

diff --git a/layouts/index.html b/layouts/index.html
index babc481..7391f5b 100644..100755
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,35 +1,20 @@
 {{ partial "default_head.html" . }}
 
-{{ $pagination := 5 }}
+<!-- Space delimited list of page types -->
+{{ $paginator := .Paginate (where .Data.Pages "Type" "in" "post") }}
 
 <div class="posts">
-  {{ range first $pagination .Data.Pages }}
-    {{ if eq .Type "post"}}
-      <div class="post">
+  {{ range .Paginator.Pages }}
+    <div class="post">
         <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
         <span class="post-date">{{ .Date.Format .Site.Params.DateForm }}</span>
         {{ .Content }}
-      </div>
-    {{ end }}
+    </div>
   {{ end }}
 </div>
 
 <div class="pagination">
-  {{ if false }}
-    <a class="pagination-item older" href="/page2">Older</a>
-  {{ else }}
-    <span class="pagination-item older">Older</span>
-  {{ end }}
-
-  {{ if false }}
-    {{ if false }}
-      <a class="pagination-item newer" href="/">Newer</a>
-    {{ else }}
-      <a class="pagination-item newer" href="/page1">Newer</a>
-    {{ end }}
-  {{ else }}
-    <span class="pagination-item newer">Newer</span>
-  {{ end }}
+    {{ template "_internal/pagination.html" . }}
 </div>
 
 {{ partial "default_foot.html" . }}
diff --git a/static/css/lanyon.css b/static/css/lanyon.css
index 721c9d3..4dec27c 100644..100755
--- a/static/css/lanyon.css
+++ b/static/css/lanyon.css
@@ -423,6 +423,88 @@ a.pagination-item:hover {
 }
 
 
+div.pagination
+{
+  margin: auto;
+  text-align: center;
+}
+
+/* Bootstrap pagination support */
+ul.pagination {
+	display:inline-block;
+	padding-left:0;
+	margin:20px 0;
+	border-radius:4px
+}
+.pagination>li {
+	display: inline;
+}
+.pagination>li>a,.pagination>li>span {
+	position:relative;
+	float:left;
+	padding:6px 12px;
+	margin-left:-1px;
+	line-height:1.42857143;
+	color:#666;
+	text-decoration:none;
+	background-color:#fff;
+	border:1px solid #ddd
+}
+.pagination>li:first-child>a,.pagination>li:first-child>span {
+	margin-left:0;
+	border-top-left-radius:4px;
+	border-bottom-left-radius:4px
+}
+.pagination>li:last-child>a,.pagination>li:last-child>span {
+	border-top-right-radius:4px;
+	border-bottom-right-radius:4px
+}
+.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
+	z-index:3;
+	background-color:#eee;
+	border-color:#ddd;
+}
+.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
+	z-index:2;
+	color:#fff;
+	cursor:default;
+	background-color:#ddd;
+	border-color:#bbb;
+}
+.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
+	color:#777;
+	cursor:not-allowed;
+	background-color:#fff;
+	border-color:#ddd
+}
+.pagination-lg>li>a, .pagination-lg>li>span {
+	padding:10px 16px;
+	font-size:18px;
+	line-height:1.3333333
+}
+.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
+	border-top-left-radius:6px;
+	border-bottom-left-radius:6px
+}
+.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
+	border-top-right-radius:6px;
+	border-bottom-right-radius:6px
+}
+.pagination-sm>li>a,.pagination-sm>li>span {
+	padding:5px 10px;
+	font-size:12px;
+	line-height:1.5
+}
+.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
+	border-top-left-radius:3px;
+	border-bottom-left-radius:3px
+}
+.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
+	border-top-right-radius:3px;
+	border-bottom-right-radius:3px
+}
+
+
 /*
  * Themes
  *
@@ -525,3 +607,5 @@ a.pagination-item:hover {
 .theme-base-0f .related-posts li a:hover {
   color: #8f5536;
 }
+
+