Lingo.dev + .html (Web)
Lingo.dev CLI traduce archivos HTML preservando la estructura de marcado, atributos y elementos semánticos para sitios web y documentación. El CLI mantiene intactos todos los marcados HTML y su anidación, procesa de manera inteligente solo los atributos traducibles, protege JavaScript y CSS de la traducción, maneja correctamente los elementos semánticos HTML5 y garantiza una salida HTML válida.
Configuración rápida
Configuración para archivos HTML con organización basada en localización:
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de"]
},
"buckets": {
"html": {
"include": ["content/[locale]/*.html"]
}
}
}
Recordatorio: [locale] es un marcador de posición que debe permanecer literalmente en la configuración, ya que se reemplaza con la localización real durante la ejecución del CLI.
Traducir archivos HTML
npx lingo.dev@latest i18n
Traduce el contenido de texto mientras preserva la estructura HTML, etiquetas, atributos y marcado semántico.
Procesamiento inteligente de HTML
Traducción de contenido
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Our Platform</title>
<meta name="description" content="The best platform for productivity" />
</head>
<body>
<h1>Getting Started</h1>
<p>
This guide will help you <strong>learn quickly</strong> and efficiently.
</p>
<a href="/help">Need help?</a>
</body>
</html>
El contenido de texto se traduce mientras la estructura HTML y las etiquetas permanecen intactas.
Gestión de atributos
<img src="/images/hero.jpg" alt="Welcome banner" title="Our platform" />
<input type="text" placeholder="Enter your name" />
<button aria-label="Close dialog">×</button>
Los atributos traducibles como alt, title, placeholder y aria-label son localizados.
Preservación semántica
<article>
<header>
<h2>Article Title</h2>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<section>
<p>Article content goes here...</p>
</section>
</article>
Los elementos semánticos HTML5 y su estructura se preservan.
Características avanzadas
Protección de script y estilo
<script>
function greeting() {
console.log("This stays untranslated");
}
</script>
<style>
.header {
color: blue;
}
</style>
El contenido de JavaScript y CSS permanece intacto.
Atributos de datos
<div data-message="User friendly message" data-id="widget-123">
<span>El contenido visible se traduce</span>
</div>
Los atributos de datos con contenido traducible se procesan de manera inteligente.
Configuración avanzada
Múltiples directorios HTML
"html": {
"include": [
"content/[locale]/*.html",
"pages/[locale]/**/*.html"
]
}
Bloquear atributos técnicos
"html": {
"include": ["content/[locale]/*.html"],
"lockedKeys": ["id", "class", "data-id", "href"]
}