From 832ebd0038ccecbd6bbd5baa337c8d59e19542f7 Mon Sep 17 00:00:00 2001
From: Doge <guiqiqi187@gmail.com>
Date: Sun, 9 May 2021 15:18:10 +0800
Subject: Add pagination support

---
 layout/_partial/header.ejs |  2 +-
 layout/index.ejs           | 64 +++++++++++++++++++++-------------------------
 source/css/style.css       |  9 +++++++
 3 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index f7fef30..c6c1a9f 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -1,4 +1,4 @@
-<section id="header-page" class="hero is-light is-fullheight">
+<section id="header-page" class="hero is-light is-large">
     <div class="hero-head">
         <header class="navbar" aria-label="main navigation">
             <div class="container">
diff --git a/layout/index.ejs b/layout/index.ejs
index 78fc04e..53335fe 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -2,10 +2,9 @@
     <div class="hero-body">
         <div class="container">
             <% page.posts.each(function (post) { %>
-                <div class="columns">
+                <div class="columns post-entry">
                     <div class="column is-8 is-offset-2">
                         <div class="card">
-
                             <!-- Post thumbnail with lazayload support -->
                             <% if (post.thumbnail) { %>
                                 <div class="card-iamge">
@@ -18,9 +17,11 @@
                                             <% } %>
                                         <% } %>
                                     </figure>
+                                </div>
                             <% } %>
-                            <div class="card-content">
 
+                            <div class="card-content">
+                                
                                 <!-- Post title -->
                                 <p class="title is-4">
                                     <%= post.title %>
@@ -75,49 +76,42 @@
                                         <p><%- post.content %></p>
                                     <% } %>
                                 </section>
-
                             </div>
+
                             <div class="card-footer">
                                 <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
                                     <% if (post.podcast && theme.podcast) { %>
-                                        Listen Now
+                                        <%- __("listen") %>
                                     <% } else { %> 
-                                        Continue Read
+                                        <%- __("read") %>
                                     <% } %> 
                                 </a>
                             </div>
+
                         </div>
                     </div>
                 </div>
-            <% }); %> 
+            <% }); %>
+
+            <!-- Page navigation -->
+            <% if (page.prev || page.next) { %>
+                <div class="columns pagination-bar">
+                    <div class="column is-8 is-offset-2">
+                        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+                            <% if (page.prev) { %>
+                                <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
+                            <% } else { %>
+                                <a class="button is-disabled is-light" disabled><%- __("prev") %></a>
+                            <% } %> 
+                            <% if (page.next) { %>
+                                <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
+                            <% } else { %>
+                                <a class="button is-disabled is-light" disabled><%- __("next") %></a>
+                            <% } %> 
+                        </nav>
+                    </div>
+                </div>
+            <% } %> 
         </div>
     </div>
 </section>
-
-<!-- Page navigation -->
-<!-- <% if (page.prev || page.next) { %>
-    <div class="nav">
-        <% if (page.prev) { %>
-            <div class="nav-prev">
-                <a href="<%- url_for(page.prev_link) %>" class="nav-link">
-                    <span class="nav-label">
-                        Prev
-                        <i class="fa fa-chevron-left"></i>
-                    </span>
-                </a>
-            </div>
-        <% } %>
-        <% if (page.next) { %>
-            <div class="nav-next">  
-                <a href="<%- url_for(page.next_link) %>" class="nav-link">
-                    <span class="nav-label">
-                        Next
-                        <i class="fa fa-chevron-right"></i>
-                    </span>
-                </a>
-            </div>
-        <% } %>
-    </div>
-<% } %> -->
-
-</section>
\ No newline at end of file
diff --git a/source/css/style.css b/source/css/style.css
index a5c5377..c7743db 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -19,4 +19,13 @@ pre {
 
 .navbar-brand .navbar-item:hover {
     background-color: inherit !important;
+}
+
+.post-entry {
+    margin-bottom: 3rem !important;
+}
+
+.pagination-bar {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
 }
\ No newline at end of file
-- 
cgit v1.2.3