Lingo.dev + .html (Web)
Lingo.dev CLIはHTMLファイルを翻訳する際に、マークアップ構造、属性、セマンティック要素をウェブサイトやドキュメンテーション用に保持します。CLIはすべてのHTMLマークアップとネスティングを完全に保持し、翻訳可能な属性のみをインテリジェントに処理し、JavaScriptとCSSを翻訳から保護し、HTML5セマンティック要素を正しく処理し、有効なHTML出力を保証します。
クイックセットアップ
ロケールベースの組織でHTMLファイルを設定します：
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de"]
},
"buckets": {
"html": {
"include": ["content/[locale]/*.html"]
}
}
}
注意：[locale]は設定内でリテラルとして残すべきプレースホルダーであり、CLI実行中に実際のロケールに置き換えられます。
HTMLファイルを翻訳する
npx lingo.dev@latest i18n
HTML構造、タグ、属性、セマンティックマークアップを保持しながらテキストコンテンツを翻訳します。
スマートHTML処理
コンテンツ翻訳
<!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>
HTML構造とタグを維持しながらテキストコンテンツが翻訳されます。
属性の処理
<img src="/images/hero.jpg" alt="Welcome banner" title="Our platform" />
<input type="text" placeholder="Enter your name" />
<button aria-label="Close dialog">×</button>
alt、title、placeholder、aria-labelなどの翻訳可能な属性がローカライズされます。
セマンティックの保持
<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>
セマンティックHTML5要素とその構造が保持されます。
高度な機能
スクリプトとスタイルの保護
<script>
function greeting() {
console.log("This stays untranslated");
}
</script>
<style>
.header {
color: blue;
}
</style>
JavaScriptとCSSのコンテンツは変更されません。
データ属性
<div data-message="User friendly message" data-id="widget-123">
<span>表示されるコンテンツは翻訳されます</span>
</div>
翻訳可能なコンテンツを持つデータ属性はインテリジェントに処理されます。
高度な設定
複数のHTMLディレクトリ
"html": {
"include": [
"content/[locale]/*.html",
"pages/[locale]/**/*.html"
]
}
技術的な属性のロック
"html": {
"include": ["content/[locale]/*.html"],
"lockedKeys": ["id", "class", "data-id", "href"]
}