Traduza o seu site Astro com o Intlayer | Internacionalização (i18n)

Índice

Por que Intlayer em vez de alternativas?

Comparado com soluções principais como astro-i18n ou i18next, Intlayer é uma solução que vem com otimizações integradas como:

Guia passo a passo para configurar o Intlayer no Astro

Confira o modelo da aplicação no GitHub.

1. 1

   Instalar Dependências

   Instale os pacotes necessários usando seu gerenciador de pacotes preferido:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm install intlayer astro-intlayer# Opcional: Se você adicionar suporte para islands do Reactnpm install react react-dom react-intlayer @astrojs/react

   • intlayer O pacote principal que fornece ferramentas de i18n para gerenciamento de configuração, traduções, declaração de conteúdo, transpilação e comandos CLI.

   • astro-intlayer Inclui o plugin de integração do Astro para vincular o Intlayer ao bundler Vite, bem como o middleware para detectar o idioma preferido do usuário, gerenciar cookies e lidar com redirecionamentos de URL.

2. 2

   Configurar seu Projeto

   Crie um arquivo de configuração para definir os idiomas da sua aplicação:

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.PORTUGUESE,      // Seus outros idiomas    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

   Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamentos de middleware, nomes de cookies, localização e extensões de declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

3. 3

   Integrar o Intlayer na sua configuração do Astro

   Adicione o plugin intlayer à sua configuração do Astro.

   astro.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   // @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

   O plugin de integração intlayer() é usado para integrar o Intlayer ao Astro. Ele garante a geração dos arquivos de declaração de conteúdo e os monitora em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Astro e fornece aliases para otimizar o desempenho.

4. 4

   Declarar seu conteúdo

   Crie e gerencie suas declarações de conteúdo para armazenar traduções:

   src/app.content.tsx

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      pt: "Olá Mundo",    }),  },} satisfies Dictionary;export default appContent;

   As declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no contentDir (por padrão ./src) e correspondam à extensão do arquivo de declaração de conteúdo (por padrão .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Para mais informações, consulte a documentação de declaração de conteúdo.

5. 5

   Usar o conteúdo no Astro

   Você pode consumir os dicionários diretamente nos seus arquivos .astro usando os ajudantes principais exportados do intlayer.

   src/pages/index.astro

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   ---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  defaultLocale,  localeMap,  getHTMLTextDir,  type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Canonical link: Tells search engines which is the primary version of this page -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Tell Google about all localized versions -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Fallback for users in unmatched languages -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <header>      <LocaleSwitcher />    </header>    <main>      <h1>{title}</h1>    </main>  </body></html>

6. 6

   Roteamento Localizado

   Crie segmentos de rota dinâmicos para servir páginas localizadas (por exemplo, src/pages/[locale]/index.astro):

   src/pages/[locale]/index.astro

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   ---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

   A integração do Astro adiciona um middleware Vite que ajuda no roteamento sensível ao idioma e nas definições de ambiente durante o desenvolvimento. Você também pode criar links entre idiomas usando sua própria lógica ou ferramentas do intlayer, como o getLocalizedUrl.

7. 7

   Continuar usando seus frameworks favoritos

   Continue construindo sua aplicação usando o framework de sua escolha.

   • Intlayer + React: Intlayer com React
   • Intlayer + Vue: Intlayer com Vue
   • Intlayer + Svelte: Intlayer com Svelte
   • Intlayer + Solid: Intlayer com Solid
   • Intlayer + Preact: Intlayer com Preact
8. 15

   Extrair o conteúdo dos seus componentes

   Opcional

   Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.

   Para facilitar esse processo, o Intlayer propõe um compilador / extrator para transformar seus componentes e extrair o conteúdo.

   Para configurá-lo, você pode adicionar uma seção compiler no seu arquivo intlayer.config.ts:

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     // ... Resto da sua configuração
     compiler: {
       /**
        * Indica se o compilador deve ser ativado.
        */
       enabled: true,
   
       /**
        * Define o caminho dos arquivos de saída
        */
       output: ({ fileName, extension }) => `./${fileName}${extension}`,
   
       /**
        * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.
        */
       saveComponents: false,
   
       /**
        * Prefixo da chave do dicionário
        */
       dictionaryKeyPrefix: "",
     },
   };
   
   export default config;

   Comando de extraçãoCompilador Babel

   Execute o extrator para transformar seus componentes e extrair o conteúdo

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npx intlayer extract

   Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

   Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

   vite.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adds the compiler plugin ],});

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm run build # Ou npm run dev

   ---

Sitemap

O Intlayer vem com um gerador de sitemap integrado para ajudá-lo a criar um sitemap para sua aplicação facilmente. Ele manipula rotas localizadas e adiciona os metadados necessários para mecanismos de busca.

O sitemap gerado pelo Intlayer suporta o namespace xhtml:link (Extensões XML Hreflang). Ao contrário dos geradores de sitemap padrão que apenas listam URLs brutas, o Intlayer cria automaticamente os links bidirecionais necessários entre todas as versões de idioma de uma página (por exemplo, /about, /about?lang=fr e /about?lang=es). Isso garante que os mecanismos de busca indexem corretamente e sirvam a versão correta do idioma para o público certo.

Crie src/pages/sitemap.xml.ts para gerar um sitemap que inclua todas as suas rotas localizadas.

import type { APIRoute } from "astro";import { generateSitemap, type SitemapUrlEntry } from "intlayer";const pathList: SitemapUrlEntry[] = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";export const GET: APIRoute = async ({ site }) => {  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });  return new Response(xmlOutput, {    headers: { "Content-Type": "application/xml" },  });};

Robots.txt

Crie src/pages/robots.txt.ts para controlar o rastreamento de mecanismos de busca.

import type { APIRoute } from "astro";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);export const GET: APIRoute = ({ site }) => {  const robotsTxt = [    "User-agent: *",    "Allow: /",    ...disallowedPaths.map((path) => `Disallow: ${path}`),    "",    `Sitemap: ${new URL("/sitemap.xml", site).href}`,  ].join("\n");  return new Response(robotsTxt, {    headers: { "Content-Type": "text/plain" },  });};

</Step>

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto da sua configuração
  compiler: {
    /**
     * Indica se o compiler deve estar habilitado.
     */
    enabled: true,

    /**
     * Define o caminho dos arquivos de saída
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se os componentes devem ser salvos após serem transformados.
     *
     * - Se `true`, o compiler reescreverá o arquivo do componente no disco. Então a transformação será permanente, e o compiler ignorará a transformação para o próximo processo. Dessa forma, o compiler pode transformar a aplicação, e então pode ser removido.
     *
     * - Se `false`, o compiler injetará a chamada da função `useIntlayer()` no código apenas na saída da build, e manterá a codebase base intacta. A transformação será feita apenas na memória.
     */
    saveComponents: false,

    /**
     * Prefixo da chave do dicionário
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

npx intlayer extract

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adds the compiler plugin ],});

npm run build # Ou npm run dev

</Steps>

Configuração do TypeScript

O Intlayer usa o aumento de módulos (module augmentation) para aproveitar o TypeScript, tornando sua base de código mais robusta.

Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.

{  // ... sua configuração existente do TypeScript  "include": [    // ... sua configuração existente do TypeScript    ".intlayer/**/*.ts", // Incluir tipos gerados automaticamente  ],}

Configuração do Git

Recomenda-se ignorar os arquivos gerados pelo Intlayer. Isso evita committá-los no seu repositório Git.

Para fazer isso, adicione as seguintes instruções ao seu arquivo .gitignore:

# Ignorar os arquivos gerados pelo Intlayer.intlayer

Extensão do VS Code

Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial do Intlayer para VS Code.

Instalação pelo VS Code Marketplace

Esta extensão fornece:

• Preenchimento automático para chaves de tradução.
• Detecção de erros em tempo real para traduções ausentes.
• Visualização inline do conteúdo traduzido.
• Ações rápidas para criar e atualizar traduções facilmente.

Para mais informações sobre o uso da extensão, consulte a documentação da Extensão do VS Code.

Aprofunde seu conhecimento

Se quiser saber mais, você também pode implementar o Editor Visual ou usar o CMS para externalizar seu conteúdo.