Lingo.dev + .html (웹)
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"]
}