VuePress - Lingo.dev CLI

Что такое VuePress?

VuePress — это генератор статических сайтов на основе Vue для создания сайтов с документацией. Он предоставляет тему, оптимизированную для технической документации, и интеграцию с компонентами Vue.

Что такое Lingo.dev CLI?

Lingo.dev — это платформа перевода на основе ИИ. Lingo.dev CLI считывает исходные файлы, отправляет переводимый контент в крупные языковые модели и записывает переведенные файлы обратно в ваш проект.

О данном руководстве

Это руководство объясняет, как настроить Lingo.dev CLI в проекте документации на VuePress. Вы узнаете, как создать проект с 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
---

## Getting started

This documentation is automatically translated by Lingo.dev.

## Features

Our product includes powerful capabilities for modern development.

Шаг 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"]
    }
  }
}

Этот файл определяет:

файлы, которые CLI Lingo.dev должен переводить
языки, между которыми выполняется перевод

В данном случае конфигурация переводит файлы Markdown с английского на испанский.

Важно отметить:

[locale] — это плейсхолдер, который заменяется во время выполнения. Он гарантирует, что контент читается из одного расположения (например, docs/en/README.md) и записывается в другое расположение (например, docs/es/README.md).
CLI Lingo.dev не поддерживает рекурсивные шаблоны (например, **/*.md). Вам нужно будет создать дополнительные шаблоны include для перевода файлов, находящихся в вложенных директориях.

Чтобы узнать больше, см. конфигурация i18n.json.

Шаг 5. Перевод контента

Зарегистрируйтесь в Lingo.dev.
Войдите в Lingo.dev через CLI:
```
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. Вы должны увидеть выпадающий список для переключения между языками.