Lingo.dev + .html (Web)
Lingo.dev CLI traduit les fichiers HTML tout en préservant la structure du balisage, les attributs et les éléments sémantiques pour les sites web et la documentation. Le CLI maintient intact tout le balisage HTML et l'imbrication, traite intelligemment uniquement les attributs traduisibles, protège JavaScript et CSS de la traduction, gère correctement les éléments sémantiques HTML5 et garantit une sortie HTML valide.
Configuration rapide
Configurez pour les fichiers HTML avec une organisation basée sur les locales :
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de"]
},
"buckets": {
"html": {
"include": ["content/[locale]/*.html"]
}
}
}
Rappel : [locale] est un placeholder qui doit rester littéralement dans la configuration, car il est remplacé par la locale réelle pendant l'exécution du CLI.
Traduire des fichiers HTML
npx lingo.dev@latest i18n
Traduit le contenu textuel tout en préservant la structure HTML, les balises, les attributs et le balisage sémantique.
Traitement HTML intelligent
Traduction du contenu
<!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>
Le contenu textuel est traduit tandis que la structure HTML et les balises restent intactes.
Gestion des attributs
<img src="/images/hero.jpg" alt="Welcome banner" title="Our platform" />
<input type="text" placeholder="Enter your name" />
<button aria-label="Close dialog">×</button>
Les attributs traduisibles comme alt, title, placeholder et aria-label sont localisés.
Préservation sémantique
<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>
Les éléments HTML5 sémantiques et leur structure sont préservés.
Fonctionnalités avancées
Protection des scripts et des styles
<script>
function greeting() {
console.log("This stays untranslated");
}
</script>
<style>
.header {
color: blue;
}
</style>
Le contenu JavaScript et CSS reste inchangé.
Attributs de données
<div data-message="User friendly message" data-id="widget-123">
<span>Le contenu visible est traduit</span>
</div>
Les attributs de données avec du contenu traduisible sont traités intelligemment.
Configuration avancée
Multiples répertoires HTML
"html": {
"include": [
"content/[locale]/*.html",
"pages/[locale]/**/*.html"
]
}
Verrouiller les attributs techniques
"html": {
"include": ["content/[locale]/*.html"],
"lockedKeys": ["id", "class", "data-id", "href"]
}