diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index 4ebfdc8723c1..eb40afdf9db1 100644
--- a/docs/config/theme-configs.md
+++ b/docs/config/theme-configs.md
@@ -247,9 +247,33 @@ export default {
```ts
export interface CarbonAds {
- code: string,
+ code: string
placement: string
}
```
Learn more in [Theme: Carbon Ads](../guide/theme-carbon-ads)
+
+## docFooter
+
+- Type: `DocFooter`
+
+Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English.
+
+```js
+export default {
+ themeConfig: {
+ docFooter: {
+ prev: 'Pagina prior',
+ next: 'Proxima pagina'
+ }
+ }
+}
+```
+
+```ts
+export interface DocFooter {
+ prev?: string
+ next?: string
+}
+```
diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md
index c248d1f3a318..e52f9057c731 100644
--- a/docs/guide/theme-prev-next-link.md
+++ b/docs/guide/theme-prev-next-link.md
@@ -1,3 +1,29 @@
# Prev Next Link
-Documentation coming soon...
+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.
+
+## prev
+
+- Type: `string`
+
+- Details:
+
+ Specify the text to show on the link to the previous page.
+
+ If you don't set this in frontmatter, the text will be inferred from the sidebar config.
+
+- Example:
+
+```yaml
+---
+prev: 'Get Started | Markdown'
+---
+```
+
+## next
+
+- Type: `string`
+
+- Details:
+
+ 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 29890e7514fb..48d01d68a450 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -36,13 +36,13 @@ const hasLastUpdated = computed(() => {
diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts
index e09cb0e00458..0e97e695ec01 100644
--- a/src/client/theme-default/composables/prev-next.ts
+++ b/src/client/theme-default/composables/prev-next.ts
@@ -4,7 +4,7 @@ import { isActive } from '../support/utils'
import { getSidebar, getFlatSideBarLinks } from '../support/sidebar'
export function usePrevNext() {
- const { page, theme } = useData()
+ const { page, theme, frontmatter } = useData()
return computed(() => {
const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath)
@@ -15,8 +15,12 @@ export function usePrevNext() {
})
return {
- prev: candidates[index - 1],
- next: candidates[index + 1]
+ 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]
}
})
}
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index f19f43950633..4e3f6ee05870 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -43,6 +43,11 @@ export namespace DefaultTheme {
*/
lastUpdatedText?: string
+ /**
+ * Set custom prev/next labels.
+ */
+ docFooter?: DocFooter
+
/**
* The social links to be displayed at the end of the nav bar. Perfect for
* placing links to social services such as GitHub, Twitter, Facebook, etc.
@@ -157,6 +162,24 @@ export namespace DefaultTheme {
text?: string
}
+ // prev-next -----------------------------------------------------------------
+
+ export interface DocFooter {
+ /**
+ * Custom label for previous page button.
+ *
+ * @default 'Previous Page'
+ */
+ prev?: string
+
+ /**
+ * Custom label for next page button.
+ *
+ * @default 'Next Page'
+ */
+ next?: string
+ }
+
// social link ---------------------------------------------------------------
export interface SocialLink {