feat: set links at the bottom of page

src/client/theme-default/components/NextAndPrevLinks.ts

@@ -0,0 +1,22 @@
+import { defineComponent, computed } from 'vue'
+import { usePageData } from 'vitepress'
+
+export default defineComponent({
+  setup() {
+    const pageData = usePageData()
+    const next = computed(() => {
+      return pageData.value.next
+    })
+    const prev = computed(() => {
+      return pageData.value.prev
+    })
+    const hasLinks = computed(() => {
+      return !!next || !!prev
+    })
+    return {
+      next,
+      prev,
+      hasLinks
+    }
+  }
+})

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-if="hasLinks" class="links-wrapper">
+    <div class="prev-link">
+      <div v-if="prev">
+      ← <a :href="prev.link">{{prev.text}}</a>
+      </div>
+    </div>
+    <div class="next-link">
+      <div v-if="next">
+      <a :href="next.link">{{next.text}}</a> →
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./NextAndPrevLinks"></script>
+
+<style>
+.links-wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/client/theme-default/components/Page.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="content">
     <Content />
+    <NextAndPrevLinks />
   </div>
 </template>
 
+<script>
+import NextAndPrevLinks from './NextAndPrevLinks.vue'
+export default {
+  components:{ NextAndPrevLinks }
+}
+</script>
+
 <style>
 .content {
   max-width: 46rem;

types/shared.d.ts

@@ -26,6 +26,8 @@ export interface PageData {
   frontmatter: Record<string, any>
   headers: Header[]
   lastUpdated: number
+  next?: { text: string; link: string }
+  prev?: { text: string; link: string }
 }
 
 export interface Header {