Otras Características
Componentes
Dentro de src/components/i18n/, encontrarás varios componentes de UI que son útiles para generar sitios multilingües. Siéntete libre de personalizar su contenido e importarlos según sea necesario.
LocaleSelect.astro
Una interfaz de selección para cambiar entre idiomas.
LocaleSelectSingle.astro
Una interfaz de enlace a otro idioma. Úsalo cuando solo soportes dos idiomas.
LocalesHomeList.astro
Devuelve una lista de enlaces a las páginas principales de cada idioma, envueltos en etiquetas <li>.
LocaleSuggest.astro
Muestra una interfaz en la parte superior sugiriendo un enlace al idioma del navegador cuando el usuario accede a una URL diferente de su idioma del navegador.
Por ejemplo, si un usuario con configuración en inglés accede a la URL /es/[slug], sugiere un enlace a /en/[slug].
Una vez cerrado, la configuración se guarda en localhost y no se mostrará nuevamente.
LocaleHtmlHead.astro
Te permite especificar configuraciones de etiquetas <head> para cada idioma. El código de muestra carga la Fuente Noto para cada idioma y aplica el CSS.
NotTranslateCaution.astro
Muestra una advertencia al usuario cuando una página específica solo está disponible en un cierto idioma.
La página de muestra es Monolingual. Cuando esta página se ve en un idioma diferente al inglés, muestra una interfaz de advertencia al usuario.
El texto para la interfaz de advertencia se establece en /src/const.ts en el código de muestra.
404
La página 404 de Nosso consiste en dos archivos. Si quieres personalizar el diseño de la página 404, generalmente solo necesitas editar src/pages/[lang]/404.astro.
src/pages/404.astro
Este archivo genera lo siguiente:
/404.html
La mayoría de los servicios de despliegue encontrarán y usarán este archivo cuando no se encuentre una página.
Cuando se accede con Nosso, redirige a la siguiente página 404 basada en el idioma del sistema del usuario:
Condiciones de Redirección Detalladas
La redirección se realiza basada en las siguientes condiciones. Para más detalles, consulta el código fuente.
- Si la URL contiene
/es/...o cualquier otro código de idioma. - Si el
localStorage.selectedLangcontiene el código de idioma.- El
localStorage.selectedLangse guarda cuando el usuario selecciona un idioma en la interfaz.
- El
- Si la página de referencia contiene
/es/...o cualquier otro código de idioma.
src/pages/[lang]/404.astro
Este archivo genera dinámicamente lo siguiente:
- /en/404/index.html
- /es/404/index.html
- …
En realidad, por el proceso history.replaceState() muestra la URL a la que el usuario accedió antes de la redirección en el navegador
Consejos de CSS
Separar CSS para cada idioma
Puedes separar las definiciones usando solo CSS escribiendo de la siguiente manera:
:lang(en) {
/* Estilos para inglés */
}
:lang(ar) {
/* Estilos para árabe */
}Sin embargo, en este caso, todo el CSS de idiomas se cargará simultáneamente, resultando en recursos desperdiciados.
Si estás escribiendo dentro de archivos .astro, considera escribir de la siguiente manera o separar las definiciones dentro de LocaleHtmlHead.astro.
---
import { type Lang } from "@/i18n";
const locale = Astro.currentLocale as Lang;
---
{
locale === "en" ? (
<style>
/* Estilos para inglés */
</style>
)
: locale === "ar" ? (
<style>
/* Estilos para árabe */
</style>
)
: null
}Espaciado de letras para árabe
En algunos diseños, es posible que quieras ajustar el espaciado de letras para encabezados y otros elementos. Sin embargo, es importante no agregar espaciado para texto árabe.
Por lo tanto, ten en cuenta que Nosso define lo siguiente en src/styles/base.css:
:lang(ar) {
* { letter-spacing: 0 !important; }
}Iconos RTL
En idiomas RTL, iconos como flechas necesitan ser reflejados.
De derecha a izquierda | Documentación para Desarrolladores de Apple
Nosso usa Material Icon, y lo siguiente está definido en src/styles/base.css:
[class^="material-icons"]:dir(rtl).dir {
scale: -1 1;
}Al agregar la clase .dir, los iconos se reflejarán en idiomas RTL.
<span class="material-icons-sharp dir">arrow_forward</span>Visualización real: