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>欢迎来到我们的平台</title>
<meta name="description" content="最好的生产力平台" />
</head>
<body>
<h1>快速入门</h1>
<p>本指南将帮助您<strong>快速高效地学习</strong>。</p>
<a href="/help">需要帮助？</a>
</body>
</html>
文本内容会被翻译，而 HTML 结构和标签保持不变。
属性处理
<img src="/images/hero.jpg" alt="欢迎横幅" title="我们的平台" />
<input type="text" placeholder="输入您的姓名" />
<button aria-label="关闭对话框">×</button>
可翻译的属性如 alt、title、placeholder 和 aria-label 会被本地化。
语义保留
<article>
<header>
<h2>文章标题</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<p>文章内容在此处...</p>
</section>
</article>
语义 HTML5 元素及其结构会被保留。
高级功能
脚本和样式保护
<script>
function greeting() {
console.log("This stays untranslated");
}
</script>
<style>
.header {
color: blue;
}
</style>
JavaScript 和 CSS 内容保持不变。
数据属性
<div data-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"]
}