From 3dd25d4cc192feeffc334905ef5ed06696b78a87 Mon Sep 17 00:00:00 2001 From: jackestar Date: Fri, 10 Jul 2026 22:48:47 -0400 Subject: [PATCH] docs(i18n): update custom-theme.md and correct translation Update the Spanish translation of the custom theme guide to align with the English version and correct grammatical errors. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change the `useData()` explanation to clarify that the data is used to "conditionally" render layouts, matching the English context. - Add the missing documentation section for router event listeners (`onBeforeRouteChange`, `onAfterRouteChange`). - Update code block filenames (e.g., changing `.vitepress/theme/config.ts` to `.vitepress/config.ts`). - Fix various spelling and accentuation errors throughout the document (e.g., "raíz", "presencia", "definido", "fácil"). --- docs/es/guide/custom-theme.md | 67 ++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 25 deletions(-) diff --git a/docs/es/guide/custom-theme.md b/docs/es/guide/custom-theme.md index 6c0739e17..30e96b2fc 100644 --- a/docs/es/guide/custom-theme.md +++ b/docs/es/guide/custom-theme.md @@ -10,7 +10,7 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index ``` . -├─ docs # raiz del proyecto +├─ docs # raíz del proyecto │ ├─ .vitepress │ │ ├─ theme │ │ │ └─ index.js # entrada de tema @@ -19,16 +19,16 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index └─ package.json ``` -VitePress siempre usará el tema personalizado en vez del tema por defecto cuando detecte la precencia de un archivo de entrada de tema. Sin embargo, puede [extender el tema por defecto](./extending-default-theme) para realizar personalizaciones avanzadas sobre el. +VitePress siempre usará el tema personalizado en vez del tema por defecto cuando detecte la presencia de un archivo de entrada de tema. Sin embargo, puede [extender el tema por defecto](./extending-default-theme) para realizar personalizaciones avanzadas sobre el. ## Interfaz del Tema {#theme-interface} -Un tema personalizado de VitePress es definifo como un objeto con la siguiente interfaz: +Un tema personalizado de VitePress es definido como un objeto con la siguiente interfaz: ```ts interface Theme { /** - * Componente raiz de layout para todas las páginas + * Componente raíz de layout para cada página * @required */ Layout: Component @@ -46,7 +46,7 @@ interface Theme { interface EnhanceAppContext { app: App // instancia de la aplicación Vue - router: Router // instancia del enrutador VitePress + router: Router // Enrutador VitePress siteData: Ref // Metadata a nivel del sitio } ``` @@ -67,7 +67,25 @@ export default { } ``` -La exportación por defecto es el único contrato para un tema personalizado, y apenas la propiedad `Layout` es exigida. Tecnicamente, un tema de VitePress puede ser tan simple como un único componente Vue. +El valor `router` es la misma instancia del enrutador VitePress que devuelve [`useRouter()`](../reference/runtime-api#userouter). Para escuchar los cambios de ruta, asigne manejadores al enrutador: + +```ts [.vitepress/theme/index.ts] +export default { + enhanceApp({ router }) { + router.onBeforeRouteChange = (to) => { + console.log('navegando a', to) + } + + router.onAfterRouteChange = (to) => { + console.log('navegando a', to) + } + } +} +``` + +Devuelve `false` desde `onBeforeRouteChange` o `onBeforePageLoad` para cancelar la navegación. + +La exportación predeterminada es el único contrato para un tema personalizado, y solo se requiere la propiedad `Layout`. Por lo tanto, técnicamente, un tema de VitePress puede ser tan simple como un único componente de Vue. Dentro de su componente de layout, el funciona como una aplicación Vite + Vue 3 normal. Note que el tema también necesita ser [compatible con SSR](./ssr-compat). @@ -77,9 +95,9 @@ El componente de layout más básico necesita un componente [``](../r ```vue [.vitepress/theme/Layout.vue] ``` @@ -93,16 +111,17 @@ const { page } = useData() ``` -El auxiliar [`useData()`](../reference/runtime-api#usedata) proporciona todos los datos en tiempo de ejecución que necesitamos para mostrar layouts diferentes. Uno de los otros datos que podemos accesar es el frontmatter de la página actual. Podemos aprovechar esto para permitir que el usuario final controle el layout en cada página. Por ejemplo, el usuario puede indicar que la página debe usar un layout especial de la pagina inicial con: +El auxiliar [`useData()`](../reference/runtime-api#usedata) proporciona todos los datos para condicionalmente en tiempo de ejecución mostrar layouts diferentes. Uno de los otros datos que podemos acceder es el frontmatter de la página actual. Podemos aprovechar esto para permitir que el usuario final controle el layout en cada página. Por ejemplo, el usuario puede indicar que la página debe usar un layout especial de la pagina inicial con: + ```md --- @@ -119,13 +138,13 @@ const { page, frontmatter } = useData() @@ -144,7 +163,7 @@ const { page, frontmatter } = useData()