From 14a2760bcef1139e9c4956824ffd9fb8fe98c01f Mon Sep 17 00:00:00 2001 From: MarkusKeck Date: Wed, 22 Feb 2023 03:13:37 +0100 Subject: [PATCH 1/3] feat(theme): make prev/next links changeable close #1914 BREAKING CHANGE: The 'prev' and `next` frontmatter options have been changed. --- docs/guide/theme-prev-next-link.md | 50 +++++++++++++++---- .../theme-default/components/VPDocFooter.vue | 8 +-- .../theme-default/composables/prev-next.ts | 16 +++--- 3 files changed, 54 insertions(+), 20 deletions(-) diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md index e52f9057c731..cd4884cb2d8a 100644 --- a/docs/guide/theme-prev-next-link.md +++ b/docs/guide/theme-prev-next-link.md @@ -1,29 +1,59 @@ # 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 the link of the previous and next page. This is helpful if you want to show a different text/link on the previous/next page than what you have on your sidebar or if your page is not even listed on the sidebar. + ## prev -- Type: `string` +text: `string` -- Details: +- Specify the text to show for the link to the previous page. + If you don't set this in frontmatter, the text will be inferred from the sidebar config. - Specify the text to show on the link to the previous page. +link: `string | false` - If you don't set this in frontmatter, the text will be inferred from the sidebar config. +- Specify the url which the previous page should point to. + If you don't set this in frontmatter, the url will be inferred from the sidebar config. -- Example: +Only change the text of the link: ```yaml --- -prev: 'Get Started | Markdown' +prev: + text: 'Getting Started' +--- +``` + +Change the text and the link itself: + +```yaml +--- +prev: + text: 'Markdown' + link: '/guide/markdown' +--- +``` + +If you don't want a link to be displayed on a specific page you can also disable it: + +```yaml +--- +prev: + link: false --- ``` ## next -- Type: `string` +text: `string` -- Details: +link: `string | false` - Same as `prev` but for the next page. +Same as `prev` but for the next page. + +```yaml +--- +next: + text: 'Next Page' + link: '/guide/asset-handling' +--- 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..ad810934ad37 100644 --- a/src/client/theme-default/composables/prev-next.ts +++ b/src/client/theme-default/composables/prev-next.ts @@ -15,12 +15,16 @@ 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: { + ...candidates[index - 1], + text: frontmatter.value.prev?.text ?? candidates[index - 1]?.text, + link: frontmatter.value.prev?.link ?? candidates[index - 1]?.link + }, + next: { + ...candidates[index + 1], + text: frontmatter.value.next?.text ?? candidates[index + 1]?.text, + link: frontmatter.value.next?.link ?? candidates[index + 1]?.link + } } }) } From 8a98be21003d6556197c02b85cecb0b27f746bc2 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 25 Feb 2023 18:11:29 +0530 Subject: [PATCH 2/3] keep backwards compat --- .../theme-default/composables/prev-next.ts | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts index ad810934ad37..34e6b2f822aa 100644 --- a/src/client/theme-default/composables/prev-next.ts +++ b/src/client/theme-default/composables/prev-next.ts @@ -15,16 +15,39 @@ export function usePrevNext() { }) return { - prev: { - ...candidates[index - 1], - text: frontmatter.value.prev?.text ?? candidates[index - 1]?.text, - link: frontmatter.value.prev?.link ?? candidates[index - 1]?.link - }, - next: { - ...candidates[index + 1], - text: frontmatter.value.next?.text ?? candidates[index + 1]?.text, - link: frontmatter.value.next?.link ?? candidates[index + 1]?.link - } + 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 } } }) } From b14ecf16b19439cedeaa0412bf19848945e182d3 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 25 Feb 2023 18:37:23 +0530 Subject: [PATCH 3/3] update docs --- docs/guide/theme-prev-next-link.md | 66 +++++++++++------------------- 1 file changed, 25 insertions(+), 41 deletions(-) diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md index cd4884cb2d8a..52d511d5e34d 100644 --- a/docs/guide/theme-prev-next-link.md +++ b/docs/guide/theme-prev-next-link.md @@ -1,59 +1,43 @@ # Prev Next Link -You can customize the text and the link of the previous and next page. This is helpful if you want to show a different text/link on the previous/next page than what you have on your sidebar or if your page is not even listed on the 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 -text: `string` +- Type: `string | false | { text?: string; link?: string }` -- Specify the text to show for the link to the previous page. - If you don't set this in frontmatter, the text will be inferred from the sidebar config. +- Details: -link: `string | false` + 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. -- Specify the url which the previous page should point to. - If you don't set this in frontmatter, the url will be inferred from the sidebar config. +- Examples: -Only change the text of the link: + - To customize only the text: -```yaml ---- -prev: - text: 'Getting Started' ---- -``` + ```yaml + --- + prev: 'Get Started | Markdown' + --- + ``` -Change the text and the link itself: + - To customize both text and link: -```yaml ---- -prev: - text: 'Markdown' - link: '/guide/markdown' ---- -``` + ```yaml + --- + prev: + text: 'Markdown' + link: '/guide/markdown' + --- + ``` -If you don't want a link to be displayed on a specific page you can also disable it: + - To hide previous page: -```yaml ---- -prev: - link: false ---- -``` + ```yaml + --- + prev: false + --- + ``` ## next -text: `string` - -link: `string | false` - Same as `prev` but for the next page. - -```yaml ---- -next: - text: 'Next Page' - link: '/guide/asset-handling' ----