feat(theme): make prev/next links changeable (#1972)

Co-authored-by: Divyansh Singh <[email protected]>

docs/guide/theme-prev-next-link.md

@@ -1,29 +1,43 @@
 # Prev Next Link
 
-You can customize the text of previous and next links. This is helpful if you want to show different text on previous/next links than what you have on your sidebar.
+You can customize the text and link for the previous and next pages (shown at doc footer). This is helpful if you want a different text there than what you have on your sidebar. Additionally, you may find it useful to disable the footer or link to a page that is not included in your sidebar.
 
 ## prev
 
-- Type: `string`
+- Type: `string | false | { text?: string; link?: string }`
 
 - Details:
 
-  Specify the text to show on the link to the previous page.
+  Specifies the text/link to show on the link to the previous page. If you don't set this in frontmatter, the text/link will be inferred from the sidebar config.
 
-  If you don't set this in frontmatter, the text will be inferred from the sidebar config.
+- Examples:
 
-- Example:
+  - To customize only the text:
 
-```yaml
----
-prev: 'Get Started | Markdown'
----
-```
+    ```yaml
+    ---
+    prev: 'Get Started | Markdown'
+    ---
+    ```
 
-## next
+  - To customize both text and link:
 
-- Type: `string`
+    ```yaml
+    ---
+    prev:
+      text: 'Markdown'
+      link: '/guide/markdown'
+    ---
+    ```
 
-- Details:
+  - To hide previous page:
+
+    ```yaml
+    ---
+    prev: false
+    ---
+    ```
+
+## next
 
-  Same as `prev` but for the next page.
+Same as `prev` but for the next page.

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

@@ -39,15 +39,15 @@ const showFooter = computed(() => {
       </div>
     </div>
 
-    <div v-if="control.prev || control.next" class="prev-next">
+    <div v-if="control.prev?.link || control.next?.link" class="prev-next">
       <div class="pager">
-        <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
+        <a v-if="control.prev?.link" class="pager-link prev" :href="normalizeLink(control.prev.link)">
           <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
           <span class="title" v-html="control.prev.text"></span>
         </a>
       </div>
-      <div class="pager" :class="{ 'has-prev': control.prev }">
-        <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
+      <div class="pager" :class="{ 'has-prev': control.prev?.link }">
+        <a v-if="control.next?.link" class="pager-link next" :href="normalizeLink(control.next.link)">
           <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
           <span class="title" v-html="control.next.text"></span>
         </a>

src/client/theme-default/composables/prev-next.ts

@@ -15,12 +15,39 @@ export function usePrevNext() {
     })
 
     return {
-      prev: frontmatter.value.prev
-        ? { ...candidates[index - 1], text: frontmatter.value.prev }
-        : candidates[index - 1],
-      next: frontmatter.value.next
-        ? { ...candidates[index + 1], text: frontmatter.value.next }
-        : candidates[index + 1]
+      prev:
+        frontmatter.value.prev === false
+          ? undefined
+          : {
+              text:
+                (typeof frontmatter.value.prev === 'string'
+                  ? frontmatter.value.prev
+                  : typeof frontmatter.value.prev === 'object'
+                  ? frontmatter.value.prev.text
+                  : undefined) ?? candidates[index - 1]?.text,
+              link:
+                (typeof frontmatter.value.prev === 'object'
+                  ? frontmatter.value.prev.link
+                  : undefined) ?? candidates[index - 1]?.link
+            },
+      next:
+        frontmatter.value.next === false
+          ? undefined
+          : {
+              text:
+                (typeof frontmatter.value.next === 'string'
+                  ? frontmatter.value.next
+                  : typeof frontmatter.value.next === 'object'
+                  ? frontmatter.value.next.text
+                  : undefined) ?? candidates[index + 1]?.text,
+              link:
+                (typeof frontmatter.value.next === 'object'
+                  ? frontmatter.value.next.link
+                  : undefined) ?? candidates[index + 1]?.link
+            }
+    } as {
+      prev?: { text?: string; link?: string }
+      next?: { text?: string; link?: string }
     }
   })
 }