Lingo.dev + .md/.mdx（文档）

Lingo.dev CLI 可翻译 Markdown 和 MDX 文档、博客及内容，同时保留格式、代码块、链接、React 组件和交互元素。CLI 使用 mdx 存储桶作为推荐配置，适用于 .md 和 .mdx 文件，保护代码块和内联代码不被翻译，翻译描述时保留 URL，维护 frontmatter 元数据，保持 React 组件和导入不变，智能翻译 JSX 属性，并与 Next.js、Gatsby 和 MDX 工具无缝协作。

快速设置

为 Markdown 和 MDX 文件配置 mdx 存储桶：

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "mdx": {
      "include": ["docs/[locale]/*.md", "content/[locale]/*.mdx"]
    }
  }
}

提醒：[locale] 是一个占位符，应在配置中保持原样，因为它会在 CLI 运行时被实际的语言区域替换。

翻译文档

npx lingo.dev@latest i18n

在保留所有 Markdown 格式和 MDX React 组件的同时翻译内容。

Markdown 内容处理

代码块保护

```javascript
const message = "Hello, world!";
console.log(message);
```

代码保持不变，而周围的解释内容会被本地化。

链接和引用处理

访问 [我们的网站](https://example.com) 了解更多详情。

查看 [配置指南](./config.md) 以获取设置说明。

URL 和相对路径保持不变，而链接文本会被翻译。

Frontmatter 保护

---

title: "Getting Started"
date: 2024-01-15
tags: ["tutorial", "beginner"]

---

# 入门指南

您的内容从这里开始...

YAML frontmatter 保持不变，而内容会被翻译。

MDX 组件功能

React 组件块

import { Alert } from "@components/Alert";

# 欢迎指南

<Alert type="info">这是用户的重要信息。</Alert>

常规的 Markdown 内容将在此处翻译。

组件导入和 JSX 保持不变，而文本内容会被本地化。

内联 JSX 元素

这里有一个 <Button variant="primary">开始使用</Button> 按钮在文本中。

组件保持不变，但“开始使用”会被翻译。

带可翻译内容的属性

<VideoPlayer
  title="介绍视频"
  description="在 5 分钟内学习基础知识"
  src="/videos/intro.mp4"
/>

字符串属性会被翻译，而技术属性保持不变。

导出语句

export const title = "用户指南";
export const published = "2024-01-15";

# {title}

内容从这里开始...

带有可翻译内容的命名导出会被本地化。

带组件的 Frontmatter

---

title: "快速开始"
components:
  - Alert
  - CodeBlock

---

import { Alert, CodeBlock } from "@components";

<Alert>欢迎使用我们的平台！</Alert>

高级配置

多内容目录

"mdx": {
  "include": [
    "docs/[locale]/*.md",
    "content/[locale]/*.mdx",
    "blog/[locale]/*.{md,mdx}"
  ]
}

注意：双星号 (**) 在 glob 模式中不受支持。请使用单星号 (*) 来匹配目录中的文件。

排除特定文件

"mdx": {
  "include": ["docs/[locale]/*.{md,mdx}"],
  "exclude": ["docs/[locale]/drafts/*.{md,mdx}"]
}

锁定组件属性

"mdx": {
  "include": ["content/[locale]/*.{md,mdx}"],
  "lockedKeys": ["src", "href", "id", "className"]
}