HTML - Lingo.dev CLI

什么是 HTML？

HTML（超文本标记语言）是创建网页和网络应用的标准标记语言。它使用标签来结构化内容并定义诸如标题、段落、链接、图像和表单等元素。

什么是 Lingo.dev CLI？

Lingo.dev CLI 是一个免费的开源命令行工具，用于通过 AI 翻译应用程序和内容。它旨在取代传统的翻译管理软件，同时与现有的流水线集成。

要了解更多信息，请参阅概述。

关于本指南

本指南解释了如何使用 Lingo.dev CLI 翻译 HTML 文件。

您将学习如何：

从头开始创建项目
配置翻译流水线
使用 AI 生成翻译

前提条件

要使用 Lingo.dev CLI，请确保已安装 Node.js v18+：

❯ node -v
v22.17.0

第 1 步：设置项目

在项目目录中，创建一个 i18n.json 文件：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

此文件定义了翻译流水线的行为，包括翻译的语言以及文件系统中可本地化内容的位置。

要了解更多可用属性，请参阅 i18n.json。

第 2 步：配置源语言环境

源语言环境 是您的内容所使用的原始语言和地区。要配置源语言环境，请在 i18n.json 文件中设置 locale.source 属性：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

源语言环境必须以 BCP 47 语言标签的形式提供。

有关 Lingo.dev CLI 支持的语言环境代码的完整列表，请参阅支持的语言环境代码。

第 3 步：配置目标语言环境

目标语言环境 是指您希望将内容翻译成的语言和地区。要配置目标语言环境，请在 i18n.json 文件中设置 locale.targets 属性：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

第 4 步：创建源内容

如果尚未创建，请创建一个或多个包含待翻译内容的 HTML 文件。这些文件的路径中必须包含源语言环境（例如，作为目录名称如 en/ 或作为文件名的一部分如 messages.en.html）。

对于 HTML 文件，可翻译的内容包括：

HTML 元素中的文本内容
属性值，包括：
- alt 属性（图像描述）
- title 属性（工具提示）
- placeholder 属性（输入提示）
- value 属性（按钮和输入值）
- Meta 标签的 content 属性
lang 属性会自动更新为目标语言环境

脚本标签、样式标签和不可翻译的属性会被保留。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>欢迎使用 MyApp</h1>
    <p>你好，世界！这是一个包含 <strong>加粗文本</strong> 的简单示例。</p>
    <img src="example.jpg" alt="示例图像" />
  </body>
</html>

第 5 步：创建存储桶

在 i18n.json 文件中，向 buckets 对象添加一个 "html" 对象：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {}
  }
}

在 "html" 对象中，定义一个或多个 include 模式的数组：
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}
```
这些模式定义了需要翻译的文件。

模式本身：
- 必须包含 [locale] 作为配置语言环境的占位符
- 可以指向文件路径（例如，"[locale]/config.html"）
- 可以使用星号作为通配符占位符（例如，"[locale]/*.html"）
不支持递归的 glob 模式（例如，**/*.html）。

第 6 步：配置 LLM

Lingo.dev CLI 使用大型语言模型 (LLM) 通过 AI 翻译内容。要使用这些模型之一，您需要从支持的提供商处获取 API 密钥。

为了尽快开始使用，我们推荐使用 Lingo.dev Engine —— 我们自有的托管平台，每月提供 10,000 个免费令牌的使用额度：

注册一个 Lingo.dev 账户。
运行以下命令：
```
npx lingo.dev@latest login
```
这将打开您的默认浏览器并要求您进行身份验证。
按照提示操作。

第 7 步：生成翻译

在包含 i18n.json 文件的目录中，运行以下命令：

npx lingo.dev@latest run

此命令将：

读取 i18n.json 文件。
查找需要翻译的文件。
从文件中提取可翻译的内容。
使用配置的 LLM 翻译提取的内容。
将翻译后的内容写回文件系统。

首次生成翻译时，会创建一个 i18n.lock 文件。此文件记录已翻译的内容，防止后续运行时不必要的重新翻译。

示例

en/example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
    <input type="text" placeholder="Enter text here" />
    <a href="#" title="Click for more">Learn more</a>
  </body>
</html>

zh/example.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>MyApp - 你好，世界</title>
    <meta name="description" content="一个简单的演示应用程序" />
  </head>
  <body>
    <h1>欢迎来到 MyApp</h1>
    <p>你好，世界！这是一个带有 <strong>加粗文本</strong> 的简单演示。</p>
    <img src="example.jpg" alt="示例图片" />
    <input type="text" placeholder="在此输入文本" />
    <a href="#" title="点击查看更多">了解更多</a>
  </body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

i18n.lock

version: 1
checksums:
  ab95e8c959a889717f02a05af5c5b1e6:
    head/0/0: 7d39787547365ee4194f29f3f54e5c05
    head/1#content: 49f8864eb0e53903f04532bf33e1e4fa
    head/2#content: c2a1da93efb7e744d100df705e5fcbfd
    head/3#content: d94b318cb327f61f1aea44a6cb1fdcad
    body/0/0: d1c3a9f35e377554a4ccaa467ca26614
    body/1/0: e19afd1952881bdf10063f9478980147
    body/1/1/0: 7cd9256312384858ecba6c29d3c2e550
    body/1/2: ce8b9bb44f031705708a70e068bb73c8
    body/1/3/0: 037d114f19b882f08994712b8d9c1e37
    body/1/4: f05f450fffcb17520c441ab9789f40ce
    body/2/0/0/0: 57d373bcffe2d376cbf9919da30ca30b
    body/3#alt: 68f95fca639f8bf72a4796b6734b02d5
    body/4#alt: cb7d920c3bbcade1c8e0307093f58573
    body/5#placeholder: a05ce3b4578f55e41bd2ad4964f966b4
    body/6#placeholder: a4554ed67c02872e302b0042724f859d
    body/7#title: c903c6985a40ce02d65c90229de35a4e
    body/7/0: e598091d132f890c37a6d4ed94f6d794
    body/8#title: d656021ba5f485fa1a82f8aac6ecc5de
    body/8/0: 1c6856488bd34ad87fcacce2d8e66a0b
    body/9/0: 862964e6cd73cdffdcac622406c6bac9