feat(theme): allow customizing skip to content label

closes #4288
vuejs · Dec 6, 2024 · ff254dc · ff254dc
1 parent 18858f7
commit ff254dc
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 6 deletions.
diff --git a/docs/.vitepress/config/es.ts b/docs/.vitepress/config/es.ts
@@ -48,7 +48,8 @@ export const es = defineConfig({
     sidebarMenuLabel: 'Menu Lateral',
     darkModeSwitchLabel: 'Tema Oscuro',
     lightModeSwitchTitle: 'Cambiar a modo claro',
-    darkModeSwitchTitle: 'Cambiar a modo oscuro'
+    darkModeSwitchTitle: 'Cambiar a modo oscuro',
+    skipToContentLabel: 'Saltar al contenido'
   }
 })
 

diff --git a/docs/.vitepress/config/ko.ts b/docs/.vitepress/config/ko.ts
@@ -44,7 +44,8 @@ export const ko = defineConfig({
     sidebarMenuLabel: '사이드바 메뉴',
     darkModeSwitchLabel: '다크 모드',
     lightModeSwitchTitle: '라이트 모드로 변경',
-    darkModeSwitchTitle: '다크 모드로 변경'
+    darkModeSwitchTitle: '다크 모드로 변경',
+    skipToContentLabel: '본문으로 건너뛰기'
   }
 })
 

diff --git a/docs/.vitepress/config/pt.ts b/docs/.vitepress/config/pt.ts
@@ -48,7 +48,8 @@ export const pt = defineConfig({
     sidebarMenuLabel: 'Menu Lateral',
     darkModeSwitchLabel: 'Tema Escuro',
     lightModeSwitchTitle: 'Mudar para Modo Claro',
-    darkModeSwitchTitle: 'Mudar para Modo Escuro'
+    darkModeSwitchTitle: 'Mudar para Modo Escuro',
+    skipToContentLabel: 'Pular para o Conteúdo'
   }
 })
 

diff --git a/docs/.vitepress/config/ru.ts b/docs/.vitepress/config/ru.ts
@@ -42,7 +42,8 @@ export const ru = defineConfig({
     darkModeSwitchTitle: 'Переключить на тёмную тему',
     sidebarMenuLabel: 'Меню',
     returnToTopLabel: 'Вернуться к началу',
-    langMenuLabel: 'Изменить язык'
+    langMenuLabel: 'Изменить язык',
+    skipToContentLabel: 'Перейти к содержимому'
   }
 })
 

diff --git a/docs/.vitepress/config/zh.ts b/docs/.vitepress/config/zh.ts
@@ -48,7 +48,8 @@ export const zh = defineConfig({
     sidebarMenuLabel: '菜单',
     darkModeSwitchLabel: '主题',
     lightModeSwitchTitle: '切换到浅色模式',
-    darkModeSwitchTitle: '切换到深色模式'
+    darkModeSwitchTitle: '切换到深色模式',
+    skipToContentLabel: '跳转到内容'
   }
 })
 

diff --git a/docs/en/reference/default-theme-config.md b/docs/en/reference/default-theme-config.md
@@ -444,6 +444,13 @@ Can be used to customize the label of the return to top button. This label is on
 
 Can be used to customize the aria-label of the language toggle button in navbar. This is only used if you're using [i18n](../guide/i18n).
 
+## skipToContentLabel
+
+- Type: `string`
+- Default: `Skip to content`
+
+Can be used to customize the label of the skip to content link. This link is shown when the user is navigating the site using a keyboard.
+
 ## externalLinkIcon
 
 - Type: `boolean`

diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
+import { useData } from '../composables/data'
 
+const { theme } = useData()
 const route = useRoute()
 const backToTop = ref()
 
@@ -33,7 +35,7 @@ function focusOnTargetAnchor({ target }: Event) {
     class="VPSkipLink visually-hidden"
     @click="focusOnTargetAnchor"
   >
-    Skip to content
+    {{ theme.skipToContentLabel || 'Skip to content' }}
   </a>
 </template>
 

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -126,6 +126,11 @@ export namespace DefaultTheme {
      */
     langMenuLabel?: string
 
+    /**
+     * @default 'Skip to content'
+     */
+    skipToContentLabel?: string
+
     search?:
       | { provider: 'local'; options?: LocalSearchOptions }
       | { provider: 'algolia'; options: AlgoliaSearchOptions }