VuePress - Lingo.dev CLI

什么是 VuePress？

VuePress 是一个基于 Vue 的静态网站生成器，用于创建文档网站。它提供了一个针对技术文档优化的主题，并支持 Vue 组件集成。

什么是 Lingo.dev CLI？

Lingo.dev 是一个由 AI 驱动的翻译平台。Lingo.dev CLI 读取源文件，将可翻译内容发送到大型语言模型，并将翻译后的文件写回到您的项目中。

关于本指南

本指南解释了如何在 VuePress 文档网站中设置 Lingo.dev CLI。您将学习如何使用 VuePress 搭建项目、配置翻译流程以及查看结果。

第 1 步：设置 VuePress 项目

创建一个新的 VuePress 项目：
```
npm create vuepress@latest my-docs
```
进入项目目录：
```
cd my-docs
```
安装依赖：
```
npm install
```

第 2 步：创建源内容

创建一个目录，用于存储源语言的文档：
```
mkdir docs/en
```

创建一个文件，包含一些文档内容（例如，docs/en/README.md）：

---
home: true
title: Home
heroText: VuePress Documentation
tagline: Documentation powered by VuePress
---

## 入门

本文档由 Lingo.dev 自动翻译。

## 功能

我们的产品包含现代开发的强大功能。

第 3 步：设置符号链接

VuePress 期望源语言内容位于根目录 docs 中，而目标语言内容位于子目录中，但 Lingo.dev CLI 不支持这种组合。

作为一种解决方法，我们建议：

将源内容文件存储在语言目录中（例如，docs/en/）
生成符号链接，使文件也出现在根目录 docs 中

为了简化此过程：

创建一个脚本，用于生成符号链接（例如，scripts/symlinks.sh）：

for file in docs/en/*; do ln -sf "en/$(basename "$file")" "docs/$(basename "$file")"; done

使脚本可执行：
```
chmod +x scripts/symlinks.sh
```
运行脚本：
```
./scripts/symlinks.sh
```

每次向 docs/en/ 目录添加文件时，您都需要重新运行该脚本。

步骤 4. 配置 CLI

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

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "markdown": {
      "include": ["docs/[locale]/*.md", "docs/[locale]/*/*.md"]
    }
  }
}

此文件定义了：

Lingo.dev CLI 应该翻译的文件
要翻译的语言对

在此配置中，Markdown 文件将从英文翻译为西班牙文。

需要注意的是：

[locale] 是一个占位符，在运行时会被替换。它确保内容从一个位置读取（例如 docs/en/README.md），并写入到另一个位置（例如 docs/es/README.md）。
Lingo.dev CLI 不支持递归的 glob 模式（例如 **/*.md）。您需要创建额外的 include 模式来翻译嵌套目录中的文件。

了解更多信息，请参阅 i18n.json 配置。

步骤 5. 翻译内容

注册一个 Lingo.dev 账户。
通过 CLI 登录 Lingo.dev：
```
npx lingo.dev@latest login
```
运行翻译管道：
```
npx lingo.dev@latest run
```
CLI 将创建一个 docs/es/ 目录用于存储翻译内容，并生成一个 i18n.lock 文件以跟踪已翻译的内容（以防止不必要的重复翻译）。

步骤 6. 使用翻译内容

在 docs/.vuepress/config.js 文件中：

在主题配置中添加一个 locales 属性：

theme: defaultTheme({
  locales: {
    "/": {
      selectLanguageName: "English",
    },
    "/es/": {
      selectLanguageName: "Español",
    },
  },
}),

添加一个顶级的 locales 属性，为每个语言环境定义语言配置：

{
  locales: {
    "/": {
      lang: "en",
      title: "VuePress",
    },
    "/es/": {
      lang: "es",
      title: "VuePress",
    },
  },
}

启动开发服务器：
```
npm run docs:dev
```
访问 http://localhost:8080。您应该会看到一个用于切换语言的下拉菜单。