Lingo.dev + .md/.mdx (Документация)

Lingo.dev CLI переводит документацию, блоги и контент в формате Markdown и MDX, сохраняя форматирование, блоки кода, ссылки, React-компоненты и интерактивные элементы. CLI использует mdx bucket как рекомендуемую конфигурацию для файлов .md и .mdx, защищая блоки кода и встроенный код от перевода, сохраняя URL-адреса при переводе описаний, поддерживая метаданные frontmatter, оставляя React-компоненты и импорты нетронутыми, переводя свойства JSX интеллектуально и работая без проблем с Next.js, Gatsby и инструментами MDX.

Быстрая настройка

Настройте использование mdx bucket для файлов Markdown и 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 и React-компоненты MDX.

Обработка контента Markdown

Сохранение блоков кода

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

Код остается непереведенным, в то время как окружающие объяснения локализуются.

Обработка ссылок и референсов

Visit [our website](https://example.com) for more details.

See the [configuration guide](./config.md) for setup instructions.

URL-адреса и относительные пути остаются нетронутыми, в то время как текст ссылок переводится.

Защита frontmatter

---

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

---

# Getting Started

Ваш контент начинается здесь...

YAML frontmatter остается нетронутым, в то время как контент переводится.

Возможности компонентов MDX

React-компоненты

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

# Руководство по приветствию

<Alert type="info">Это важная информация для пользователей.</Alert>

Обычное содержимое markdown переводится здесь.

Импорты компонентов и JSX остаются неизменными, в то время как текстовое содержимое локализуется.

### Встроенные элементы JSX

```mdx
Вот кнопка <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"]
}