feat: post bottom navigation

allow users to navigate between posts in a timeline order

4 files changed, 42 insertions, 0 deletions

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 69c8163e..4497a7cc 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -95,3 +95,30 @@
         }
     }
 }
+
+.post-bottom-navigation {
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        align-items: center;
+        li {
+            &:not(:nth-child(2)) {
+                width: 37.5%;
+            }
+            &:nth-child(3) {
+                text-align: right;
+            }
+            a {
+                color: var(--secondary-text-color);
+                text-decoration: none;
+                &:hover {
+                    color: var(--primary-color);
+                }
+            }
+        }
+    }
+}
diff --git a/i18n/en.yml b/i18n/en.yml
index 5d0ed65e..531a36e9 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -18,3 +18,4 @@ moreLinks:
   posts: 'All Posts'
   cards: 'All Cards'
 relatedContent: 'Related Content'
+backToHome: 'Back To Home'
diff --git a/i18n/zh.yml b/i18n/zh.yml
index a354fc09..d74e49b6 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -19,3 +19,4 @@ moreLinks:
   posts: '所有文章'
   cards: '所有卡片'
 relatedContent: '相关文章'
+backToHome: '返回首页'
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 32c58a78..bb0daca8 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -70,6 +70,19 @@
       </div>
       {{ end }}
 
+      <!-- Post Bottom Navigation -->
+      <nav class="post-bottom-navigation">
+        <ul>
+            {{ if .NextInSection }}
+                <li><a href="{{ .NextInSection.RelPermalink }}" data-umami-event="Click Next Post">← {{ .NextInSection.Title }}</a></li>
+            {{ else }}<li class="placeholder"></li>{{ end }}
+            <li style="place-self: center;"><a href="{{ .Site.LanguagePrefix }}/">{{ T "backToHome" }}</a></li>
+            {{ if .PrevInSection }}
+                <li><a href="{{ .PrevInSection.RelPermalink }}" data-umami-event="Click Previous Post">{{ .PrevInSection.Title }} →</a></li>
+            {{ else }}<li class="placeholder"></li>{{ end }}
+        </ul>
+      </nav>
+
       <script src="/js/tocbot.min.js"></script>
       <script>
       tocbot.init({