VuePress - Lingo.dev CLI

Qu'est-ce que VuePress ?

VuePress est un générateur de sites statiques propulsé par Vue pour créer des sites de documentation. Il fournit un thème optimisé pour la documentation technique et l'intégration de composants Vue.

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev est une plateforme de traduction alimentée par l'IA. Le CLI Lingo.dev lit les fichiers sources, envoie le contenu traduisible aux grands modèles de langage et réécrit les fichiers traduits dans votre projet.

À propos de ce guide

Ce guide explique comment configurer Lingo.dev CLI dans un site de documentation VuePress. Vous apprendrez comment créer un projet avec VuePress, configurer un pipeline de traduction et visualiser les résultats.

Étape 1. Configurer un projet VuePress

Créez un nouveau projet VuePress :
```
npm create vuepress@latest my-docs
```
Accédez au répertoire du projet :
```
cd my-docs
```
Installez les dépendances :
```
npm install
```

Étape 2. Créer le contenu source

Créez un répertoire pour stocker la documentation dans la locale source :
```
mkdir docs/en
```

Créez un fichier contenant du contenu de documentation (par exemple, 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.

Étape 3. Configurer les liens symboliques

VuePress s'attend à ce que le contenu de la locale source soit dans le répertoire racine docs, avec le contenu des locales cibles dans des sous-répertoires, mais Lingo.dev CLI ne prend pas en charge cette combinaison.

Comme solution de contournement, nous recommandons :

Stocker les fichiers de contenu source dans un répertoire de locale (par exemple, docs/en/)
Générer des liens symboliques pour que les fichiers apparaissent également dans le répertoire racine docs

Pour simplifier ce processus :

Créez un script pour générer les liens symboliques (par exemple, scripts/symlinks.sh) :

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

Rendez le script exécutable :
```
chmod +x scripts/symlinks.sh
```
Exécutez le script :
```
./scripts/symlinks.sh
```

Vous devrez réexécuter le script chaque fois que vous ajouterez des fichiers au répertoire docs/en/.

Étape 4. Configurer la CLI

À la racine du projet, créez un fichier i18n.json :

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

Ce fichier définit :

les fichiers que la CLI Lingo.dev doit traduire
les langues entre lesquelles traduire

Dans ce cas, la configuration traduit les fichiers Markdown de l'anglais vers l'espagnol.

Il est important de noter que :

[locale] est un espace réservé qui est remplacé à l'exécution. Il garantit que le contenu est lu depuis un emplacement (par exemple, docs/en/README.md) et écrit vers un emplacement différent (par exemple, docs/es/README.md).
La CLI Lingo.dev ne prend pas en charge les motifs glob récursifs (par exemple, **/*.md). Vous devrez créer des motifs include supplémentaires pour traduire les fichiers qui existent dans des répertoires imbriqués.

Pour en savoir plus, consultez Configuration i18n.json.

Étape 5. Traduire le contenu

Créez un compte Lingo.dev.
Connectez-vous à Lingo.dev via la CLI :
```
npx lingo.dev@latest login
```
Exécutez le pipeline de traduction :
```
npx lingo.dev@latest run
```
La CLI créera un répertoire docs/es/ pour stocker le contenu traduit et un fichier i18n.lock pour suivre ce qui a été traduit (afin d'éviter les retraductions inutiles).

Étape 6. Utiliser les traductions

Dans le fichier docs/.vuepress/config.js :

Ajoutez une propriété locales à la configuration du thème :

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

Ajoutez une propriété locales au niveau racine pour définir la configuration linguistique de chaque locale :

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

Démarrez le serveur de développement :
```
npm run docs:dev
```
Accédez à http://localhost:8080. Vous devriez voir un menu déroulant pour basculer entre les langues.