diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md index e52f9057c731..52d511d5e34d 100644 --- a/docs/guide/theme-prev-next-link.md +++ b/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. diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue index 96dbb51fc176..979e52bdcdbf 100644 --- a/src/client/theme-default/components/VPDocFooter.vue +++ b/src/client/theme-default/components/VPDocFooter.vue @@ -39,15 +39,15 @@ const showFooter = computed(() => { -
+
-
-
diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts index 91ca6cd70ef0..34e6b2f822aa 100644 --- a/src/client/theme-default/composables/prev-next.ts +++ b/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 } } }) }