If you want read this article in English go here
Recentemente, comecei a aprender Astro para criar um projeto no estilo de dashboard.
Eu realmente quero implementar a internacionalização (i18n) neste projeto—o objetivo é que qualquer pessoa possa usá-lo, independentemente do idioma.
O suporte a i18n no Astro é muito bom. Ele funciona de maneira semelhante ao Next.js ou qualquer outro framework com roteamento baseado na estrutura de arquivos/pastas.
Então, se quisermos ter uma página em inglês e a mesma página em português, podemos organizar nossos arquivos assim:
. └── src/ └── pages/ ├── en/ │ ├── login.astro │ └── dashboard.astro └── pt-br/ ├── login.astro └── dashboard.astro
E cada página tem suas próprias strings i18n—legal!
Mas é aqui que meu problema começa: eu não quero clonar todas as minhas páginas; eu só quero mudar as strings nessas páginas.
Eu preciso de algo como /[qualquer-bandeira-de-idioma]/todas-as-minhas-rotas.
Você pode perguntar: "Por que não usar algo como react-intl?" Minha resposta é que eu quero aproveitar ao máximo o mecanismo do Astro, especialmente para SSG/SSR, e evitar quaisquer componentes do lado do cliente. Geralmente, esses frameworks usam React Context, que é renderizado apenas no lado do cliente.
Primeiro de tudo, eu li a receita do Astro sobre i18n e conferi algumas bibliotecas da comunidade para resolver esse problema.
A primeira biblioteca que testei foi a astro-i18next, e parecia exatamente o que eu precisava!
Com base em um array no arquivo de configuração, o astro-i18next gera minhas páginas i18n no momento da build, então eu só preciso codificar uma vez e não me preocupar em clonar páginas.
O problema é que o astro-i18next parece estar arquivado ou não ser mais mantido. Há muitos problemas e o último commit foi há mais de um ano.
Depois de tentar outras bibliotecas (menção honrosa para astro-i18n), encontrei o Paraglide, e ele foi um divisor de águas para o meu projeto.
Escolhi o Paraglide porque:
Nota: Você pode usar o Paraglide em um projeto JS também, e ele também suporta Next.js.
Após a instalação e configuração, usei minhas mensagens assim:
--- import * as m from "../paraglide/messages.js"; ---{m.hello({ name: "Alan" })}
No entanto, isso não resolveu meu problema de roteamento—eu ainda estava clonando minhas páginas para cada idioma que queria adicionar.
Para resolver isso, mudei meu projeto para usar rotas dinâmicas na rota raiz, então todas as minhas rotas agora começam com a bandeira do idioma.
Minha estrutura de pastas ficou assim:
. └── src/ └── pages/ └── [lang]/ ├── login.astro └── dashboard.astro
Depois dessa mudança, o Paraglide pode obter automaticamente o idioma do parâmetro da rota:
Agora, posso adicionar um novo idioma apenas configurando-o em astro.config.ts e traduzindo meu arquivo de strings.
Mas ainda tenho dois problemas para resolver:
Para resolver o primeiro problema de redirecionamento de idioma, usei middlewares do Astro.
Em src/middleware/index.ts, adicionei este código:
import { defineMiddleware } from 'astro:middleware'; import { languageTag, setLanguageTag, type AvailableLanguageTag, } from '../paraglide/runtime'; export const onRequest = defineMiddleware((context, next) => { // Obter o idioma do parâmetro da URL const lang = context.params.lang; // Se mudou if (lang !== languageTag()) { setLanguageTag(lang as AvailableLanguageTag); // Redirecionar para o idioma alterado ou padrão (en) return context.redirect(`/${lang ?? 'en'}`); } return next(); });
Para manter o usuário na mesma rota ao mudar de idioma, adicionei este componente:
--- import { languageTag } from '../paraglide/runtime'; const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, ''); ---
Além disso, podemos traduzir essas mensagens também, usando o segundo parâmetro na função de mensagens do Paraglide:
Não considero minha solução a melhor, especialmente porque ainda estou aprendendo Astro, então pode haver outras soluções. Se você souber de alguma, por favor comente, e eu tentarei :)
Obrigado por ler este artigo! Se você tiver alguma dúvida, comente, ficarei feliz em responder.
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3