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 {