Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha
Histórico de versões
- "Atualizar o uso da API useIntlayer do Solid para acesso direto a propriedades"v8.9.004/05/2026
- "Adicionar comando init"v7.5.930/12/2025
- "Atualização da documentação"v5.5.1119/11/2025
- "Histórico iniciado"v5.5.1029/06/2025
O conteúdo desta página foi traduzido com uma IA.
Veja a última versão do conteúdo original em inglêsSe você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.
Link do GitHub para a documentaçãoCopiar o Markdown do documento para a área de transferência
Traduza seu site Vite e Svelte usando Intlayer | Internacionalização (i18n)
Índice
Por que Intlayer em vez de alternativas?
Comparado com soluções principais como svelte-i18n ou i18next, Intlayer é uma solução que vem com otimizações integradas como:
O Intlayer é otimizado para funcionar perfeitamente com o Svelte, oferecendo escopo de conteúdo em nível de componente, traduções reativas e todos os recursos necessários para dimensionar a internacionalização (i18n).
Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a reduzir o tamanho do bundle e das páginas em até 50%.
Definir o escopo do conteúdo do seu aplicativo facilita a manutenção de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é totalmente tipado (fully typed) para garantir a precisão do seu conteúdo.
A co-localização de conteúdo reduz o contexto necessário pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma CLI para testar traduções ausentes,LSP, MCP, e habilidades do agente, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um compilador para automatizar a extração de conteúdo, bem como uma plataforma web para ajudar a traduzir em segundo plano.
Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
Mais do que apenas uma solução i18n, o Intlayer fornece um [editor visual] auto-hospedado(/pt/doc/concept/editor) e um CMS completo para ajudá-lo a gerenciar seu conteúdo multilíngue em tempo real, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Vite e Svelte
Veja o Template da Aplicação no GitHub.
Instalar Dependências
Instale os pacotes necessários usando npm:
bashCopiar códigoCopiar o código para a área de transferência
intlayer
O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, declaração de conteúdo, transpiração e comandos CLI.
svelte-intlayer O pacote que integra o Intlayer com a aplicação Svelte. Ele fornece provedores de contexto e hooks para internacionalização em Svelte.
vite-intlayer Inclui o plugin Vite para integrar o Intlayer com o bundler Vite, assim como middleware para detectar o locale preferido do usuário, gerenciar cookies e lidar com redirecionamento de URL.
Configuração do seu projeto
Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
intlayer.config.tsCopiar códigoCopiar o código para a área de transferência
Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console, e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a documentação de configuração.
Integre o Intlayer na sua Configuração Vite
Adicione o plugin intlayer na sua configuração.
vite.config.tsCopiar códigoCopiar o código para a área de transferência
O plugin
intlayer()para Vite é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define as variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.Declare Seu Conteúdo
Crie e gerencie suas declarações de conteúdo para armazenar traduções:
src/app.content.tsxCopiar códigoCopiar o código para a área de transferência
import { t, type Dictionary } from "intlayer"; const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", }), }, } satisfies Dictionary; export default appContent;Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação assim que forem incluídas no diretório
contentDir(por padrão,./src). E devem corresponder à 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 detalhes, consulte a documentação de declaração de conteúdo.
Utilize o Intlayer no Seu Código
src/App.svelteCopiar códigoCopiar o código para a área de transferência
Alterar o idioma do seu conteúdo
Opcionalsrc/App.svelteCopiar códigoCopiar o código para a área de transferência
Renderizar Markdown
OpcionalO Intlayer suporta a renderização de conteúdo Markdown diretamente na sua aplicação Svelte. Por padrão, o Markdown é tratado como texto simples. Para converter Markdown em HTML enriquecido, você pode integrar
@humanspeak/svelte-markdownou outro parser de markdown.Para ver como declarar conteúdo markdown usando o pacote
intlayer, consulte a documentação de markdown.src/App.svelteCopiar códigoCopiar o código para a área de transferência
Você também pode acessar os dados do front-matter do seu markdown usando a propriedade
content.markdownContent.metadata.xxx.Configurar o editor / CMS do intlayer
OpcionalPara configurar o editor do intlayer, você deve seguir a documentação do editor intlayer.
Para configurar o CMS do intlayer, você deve seguir a documentação do CMS intlayer.
Adicionar roteamento por localeizado à sua aplicação
OpcionalPara lidar com roteamento por localeizado na sua aplicação Svelte, você pode usar o
svelte-spa-routerjunto com olocaleFlatMapdo Intlayer para gerar rotas para cada localidade.Primeiro, instale o
svelte-spa-router:bashCopiar códigoCopiar o código para a área de transferência
Então, crie um arquivo
Router.sveltepara definir suas rotas:src/Router.svelteCopiar códigoCopiar o código para a área de transferência
Atualize seu
main.tspara montar o componenteRouterem vez doApp:src/main.tsCopiar códigoCopiar o código para a área de transferência
Finalmente, atualize seu
App.sveltepara receber a proplocalee usá-la comuseIntlayer:src/App.svelteCopiar códigoCopiar o código para a área de transferência
Configurar Roteamento no Lado do Servidor (Opcional)
Paralelamente, você também pode usar o
intlayerProxypara adicionar roteamento do lado do servidor à sua aplicação. Este plugin detectará automaticamente o locale atual com base na URL e definirá o cookie de locale apropriado. Se nenhum locale for especificado, o plugin determinará o locale mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum locale for detectado, ele redirecionará para o locale padrão.Note que para usar o
intlayerProxyem produção, você precisa mover o pacotevite-intlayerdedevDependenciesparadependencies.vite.config.tsCopiar códigoCopiar o código para a área de transferência
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } from "vite-intlayer"; plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()], });Alterar a URL quando o locale mudar
OpcionalPara permitir que os usuários mudem de idioma e atualizem a URL de acordo, você pode criar um componente
LocaleSwitcher. Este componente usarágetLocalizedUrldointlayerepushdosvelte-spa-router.src/lib/LocaleSwitcher.svelteCopiar códigoCopiar o código para a área de transferência
Alterar a URL quando o idioma mudar
OpcionalPara permitir que os usuários mudem de idioma e atualizem a URL de acordo, você pode criar um componente
LocaleSwitcher. Este componente usarágetLocalizedUrldointlayerepushdosvelte-spa-router.src/lib/LocaleSwitcher.svelteCopiar códigoCopiar o código para a área de transferência
Extrair o conteúdo dos seus componentes
OpcionalSe 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
compilerno seu arquivointlayer.config.ts:intlayer.config.tsCopiar códigoCopiar 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;Execute o extrator para transformar seus componentes e extrair o conteúdo
bashCopiar códigoCopiar o código para a área de transferência
Configuração do Git
É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam comitados no seu repositório Git.
Para isso, você pode adicionar as seguintes instruções no seu arquivo .gitignore:
Copiar o código para a área de transferência
Extensão para VS Code
Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial Intlayer VS Code Extension.
Instalar no VS Code Marketplace
Esta extensão oferece:
- Autocompletar para chaves de tradução.
- Detecção de erros em tempo real para traduções ausentes.
- Pré-visualizações inline do conteúdo traduzido.
- Ações rápidas para criar e atualizar traduções facilmente.
Para mais detalhes sobre como usar a extensão, consulte a documentação da Intlayer VS Code Extension.
(Opcional) Sitemap e robots.txt (geração no build)
A Intlayer expõe utilitários - generateSitemap e getMultilingualUrls - para formatar um sitemap.xml multilíngue e um robots.txt prontos para crawlers e os gravar automaticamente em public/. Normalmente corre um pequeno script Node antes do Vite (por exemplo hooks npm predev / prebuild) para que os ficheiros existam no build ou no servidor de desenvolvimento.
Sitemap
O gerador de sitemaps da Intlayer respeita as suas línguas e inclui os metadados habituais.
O sitemap suporta o espaço de nomesxhtml:link(hreflang). Em vez de listar apenas URLs soltas, a Intlayer liga de forma bidireccional todas as versões localizadas de cada página (por exemplo/about,/fr/aboutou/about?lang=frconsoante o modo de rotas).
Robots.txt
Use getMultilingualUrls para que as regras Disallow cubram todas as variantes localizadas de caminhos sensíveis.
1. Criar generate-seo.mjs na raiz do projeto
Copiar o código para a área de transferência
O pacote intlayer tem de estar instalado. Defina SITE_URL no ambiente em produção (por exemplo na CI).
Prefiragenerate-seo.mjspara ESM no Node. Se usargenerate-seo.js, garanta"type": "module"nopackage.jsonou execute o Node com ESM.
2. Executar o script antes do Vite
Copiar o código para a área de transferência
Ajuste os comandos se usar pnpm ou yarn. Também pode invocar o script a partir da CI ou de outro passo do pipeline.
Ir Além
Para ir mais longe, você pode implementar o editor visual ou externalizar seu conteúdo usando o CMS.