diff options
author | Waxer59 | 2023-06-07 00:21:14 +0200 |
---|---|---|
committer | GitHub | 2023-06-07 00:21:14 +0200 |
commit | 11dcf94cb220187bbdde65e3eed492252bd7a2a0 (patch) | |
tree | b6099cd459ae46ee7d63ecaf47208445dceba2f9 | |
parent | 76234584aee4a9d2376e8f5521032ffc02bf4a77 (diff) | |
download | IT.starlight-11dcf94cb220187bbdde65e3eed492252bd7a2a0.tar.gz IT.starlight-11dcf94cb220187bbdde65e3eed492252bd7a2a0.tar.bz2 IT.starlight-11dcf94cb220187bbdde65e3eed492252bd7a2a0.zip |
i18n(es): Updated `components.mdx` & `i18n.mdx` (#148)
* update page
* update components
* Update docs/src/content/docs/es/guides/components.mdx
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
* add french
---------
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
-rw-r--r-- | docs/src/content/docs/es/guides/components.mdx | 10 | ||||
-rw-r--r-- | docs/src/content/docs/es/guides/i18n.mdx | 50 |
2 files changed, 41 insertions, 19 deletions
diff --git a/docs/src/content/docs/es/guides/components.mdx b/docs/src/content/docs/es/guides/components.mdx index 08cb3e70..e4fe4270 100644 --- a/docs/src/content/docs/es/guides/components.mdx +++ b/docs/src/content/docs/es/guides/components.mdx @@ -5,9 +5,11 @@ description: Utilizando componentes en MDX con Starlight. Los componentes te permiten reutilizar fácilmente una parte de la interfaz de usuario o un estilo de manera consistente. Ejemplos podrían incluir una tarjeta de enlace o un incrustado de YouTube. Starlight admite el uso de componentes en archivos [MDX](https://mdxjs.com/) y proporciona algunos componentes comunes para que los utilices. +[Aprende más sobre la construcción de componentes en los docs de Astro](https://docs.astro.build/en/core-concepts/astro-components/). + ## Usando un componente -Puedes utilizar un componente importándolo en tu archivo MDX y luego llamándolo como una etiqueta JSX. Estas etiquetas se ven como etiquetas HTML, pero comienzan con una letra mayúscula que coincide con el nombre en tu declaración de `import`: +Puedes utilizar un componente importándolo en tu archivo MDX y luego renderizándolo como una etiqueta JSX. Estas etiquetas se ven como etiquetas HTML, pero comienzan con una letra mayúscula que coincide con el nombre en tu declaración de `import`: ```mdx --- @@ -25,11 +27,11 @@ import OtroComponente from '../../componentes/OtroComponente.astro'; </OtroComponente> ``` -Debido a que Starlight está impulsado por Astro, puedes utilizar componentes construidos con cualquier framework UI en tus archivos MDX. Obtén más información sobre [cómo usar componentes en MDX](https://docs.astro.build/es/guides/markdown-content/#usando-componentes-en-mdx) en la documentación de Astro. +Debido a que Starlight está impulsado por Astro, puedes agregar soporte para componentes construidos con cualquier [framework UI compatible (React, Preact, Svelte, Vue, Solid, Lit y Alpine)](https://docs.astro.build/en/core-concepts/framework-components/) en tus archivos MDX. ## Componentes integrados -Starlight proporciona componentes integrados para casos de uso comunes en la documentación. Estos componentes están disponibles en el paquete `@astrojs/starlight/components`. +Starlight proporciona algunos componentes integrados para casos de uso comunes en la documentación. Estos componentes están disponibles en el paquete `@astrojs/starlight/components`. ### Pestañas @@ -59,7 +61,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; Puedes mostrar contenido en una caja que coincida con los estilos de Starlight utilizando el componente `<Card>`. Envuelve varias tarjetas en el componente `<CardGrid>` para mostrar las tarjetas una al lado de la otra cuando hay suficiente espacio. -Un `<Card>` debe tener un `title` y opcionalmente puede incluir un atributo `icon` establecido con el nombre de [uno de los iconos integrados de Starlight](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts). +El componente `<Card>` requiere un `title` y opcionalmente puede incluir un atributo `icon` establecido con el nombre de [uno de los iconos integrados de Starlight](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts). ```mdx import { Card, CardGrid } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/es/guides/i18n.mdx b/docs/src/content/docs/es/guides/i18n.mdx index fdf66e84..d1059013 100644 --- a/docs/src/content/docs/es/guides/i18n.mdx +++ b/docs/src/content/docs/es/guides/i18n.mdx @@ -46,7 +46,7 @@ Starlight proporciona soporte incorporado para sitios multilingües, incluidas l Tu `defaultLocale` se utilizará para el contenido y las etiquetas de la UI de respaldo, por lo que elige el idioma en el que es más probable que comiences a escribir contenido o que ya tengas contenido. 2. Crea un directorio para cada idioma en `src/content/docs/`. - Por ejemplo, suponiendo la configuración mostrada en el paso 1, esto podría verse así: + Por ejemplo, para la configuración mostrada anteriormente, crea las siguientes carpetas: <FileTree> @@ -59,11 +59,13 @@ Starlight proporciona soporte incorporado para sitios multilingües, incluidas l </FileTree> -3. Ahora puedes crear archivos de contenido en los directorios de tu idioma. Utiliza el mismo nombre de archivo para vincular páginas en todos los idiomas. Por ejemplo, `ar/index.md` y `en/index.md` representarían la página de inicio para árabe e inglés respectivamente. +3. Ahora puedes agregar archivos de contenido en los directorios de tu idioma. Utiliza el mismo nombre de archivo para asociar páginas entre idiomas y aprovechar todas las características de internacionalización (i18n) de Starlight, como contenido de respaldo, avisos de traducción y más. + +Por ejemplo, crea `ar/index.md` y `en/index.md` para representar la página de inicio en árabe e inglés, respectivamente. ### Usa una raíz de configuración regional -Puedes usar una raíz de configuración regional para servir un idioma sin ningún prefijo i18n en tu ruta. Por ejemplo, si el inglés es tu configuración regional, una ruta de página en inglés podría verse como `/about` en lugar de `/en/about`. +Puedes usar una raíz de configuración regional para servir un idioma sin ningún prefijo i18n en tu ruta. Por ejemplo, si el inglés es tu configuración regional, una ruta de página en inglés se vería como `/about` en lugar de `/en/about`. Para establecer una configuración regional, usa la clave `root` en tu configuración de `locales`. Si la configuración regional raíz también es la configuración regional predeterminada para tu contenido, elimina `defaultLocale` o configúralo en `'root'`. @@ -92,7 +94,7 @@ export default defineConfig({ }); ``` -Cuando uses una `root` locale, coloca las páginas para ese idioma directamente en `src/content/docs/` en lugar de en una carpeta de idioma dedicada. Por ejemplo, aquí están los archivos de la página de inicio para inglés y chino cuando se usa la configuración anterior: +Cuando uses una `root` locale, mantén las páginas para ese idioma directamente en `src/content/docs/` en lugar de en una carpeta de idioma dedicada. Por ejemplo, aquí están los archivos de la página de inicio para inglés y chino cuando se usa la configuración anterior: <FileTree> @@ -107,27 +109,43 @@ Cuando uses una `root` locale, coloca las páginas para ese idioma directamente #### Sitios monolingües -Si tienes un sitio de un solo idioma, puedes establecer la configuración regional raíz para configurar tu idioma. +De forma predeterminada, Starlight es un sitio monolingüe (en inglés). Para crear un sitio de un solo idioma en otro idioma, configúralo como el `root` en tu configuración de `locales`: -Esto te permite anular el idioma predeterminado de Starlight, que es el inglés, pero no habilitará otras funciones de internacionalización como el selector de idiomas. +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; +export default defineConfig({ + integrations: [ + starlight({ + title: 'Mis docs', + locales: { + root: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +Esto te permite anular el idioma predeterminado de Starlight sin habilitar otras características de internacionalización para sitios multilingües, como el selector de idioma. ## Contenido de respaldo -Starlight espera que crees páginas equivalentes en todos tus idiomas. Por ejemplo, si tienes un archivo `en/about.md`, debes crear un `about.md` para cada otro idioma que admitas. +Starlight espera que crees páginas equivalentes en todos tus idiomas. Por ejemplo, si tienes un archivo `en/about.md`, crea un archivo `about.md` para cada otro idioma que admitas. Esto permite que Starlight proporcione automáticamente contenido de respaldo para las páginas que aún no se han traducido. -Si una traducción no está disponible para un idioma, Starlight mostrará a los lectores el contenido de esa página en el idioma predeterminado (establecido a través de `defaultLocale`). Por ejemplo, si aún no has creado una versión en francés de una página Acerca de y tu idioma predeterminado es el inglés, los visitantes a `/fr/about` verán el contenido en inglés. Esto te ayuda a agregar contenido en tu idioma predeterminado y luego traducirlo progresivamente cuando tus traductores tengan tiempo. +Si no hay una traducción disponible para un idioma, Starlight mostrará a los lectores el contenido de esa página en el idioma predeterminado (establecido mediante `defaultLocale`). Por ejemplo, si aún no has creado una versión en francés de tu página Acerca de y tu idioma predeterminado es el inglés, los visitantes a `/fr/about` verán el contenido en inglés de `/en/about` con un aviso de que esta página aún no se ha traducido. Esto te ayuda a agregar contenido en tu idioma predeterminado y luego traducirlo progresivamente cuando tus traductores tengan tiempo. ## Traduce la UI de Starlight -Algunos de los elementos de la UI de Starlight requieren etiquetas de texto para funcionar. -Por ejemplo, la tabla de contenido de esta página tiene un encabezado "En esta página" en inglés. -Nosotros apuntamos a enviar estas etiquetas en tantos idiomas como sea posible, pero actualmente solo tenemos soporte para inglés, alemán, japonés y español. - -Puedes proporcionar traducciones para los idiomas adicionales que admites, o anular nuestras etiquetas predeterminadas, a través de la colección de datos `i18n`. +Starlight proporciona de forma predeterminada traducciones para los textos utilizados en la UI al inglés, francés, alemán, japonés, portugués y español. También damos la bienvenida a [contribuciones para agregar más idiomas predeterminados](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md). 1. Configura la colección de datos `i18n` en `src/content/config.ts` si aún no está configurada: ```js + // src/content/config.ts import { defineCollection } from 'astro:content'; import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; @@ -137,7 +155,7 @@ Puedes proporcionar traducciones para los idiomas adicionales que admites, o anu }; ``` -2. Crea un archivo JSON en `src/content/i18n/` para cada idioma al que quieras traducir la UI de Starlight. +2. Crea un archivo JSON en `src/content/i18n/` para cada idioma adicional para el cual deseas proporcionar strings de traducción de la UI. Por ejemplo, esto agregaría archivos de traducción para árabe y chino simplificado: <FileTree> @@ -150,7 +168,9 @@ Puedes proporcionar traducciones para los idiomas adicionales que admites, o anu </FileTree> -3. Agrega traducciones para las claves que deseas traducir a los archivos JSON. Puedes usar los valores predeterminados en inglés para ayudarte a traducir: +3. Agrega traducciones para las claves que deseas traducir en los archivos JSON. Traduce solo los valores, dejando las claves en inglés (p. ej. `"search.label": "Buscar"`). + +Estos son los valores predeterminados en inglés de las cadenas existentes que se incluyen en Starlight: ```json { |