VuePress - Lingo.dev CLI

Was ist VuePress?

VuePress ist ein Vue-basierter Static-Site-Generator zur Erstellung von Dokumentationsseiten. Er bietet ein für technische Dokumentation optimiertes Theme und Vue-Komponenten-Integration.

Was ist Lingo.dev CLI?

Lingo.dev ist eine KI-gestützte Übersetzungsplattform. Die Lingo.dev CLI liest Quelldateien, sendet übersetzbare Inhalte an Large Language Models und schreibt übersetzte Dateien zurück in Ihr Projekt.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie Sie Lingo.dev CLI in einer VuePress-Dokumentationsseite einrichten. Sie erfahren, wie Sie ein Projekt mit VuePress aufsetzen, eine Übersetzungs-Pipeline konfigurieren und die Ergebnisse anzeigen.

Schritt 1. VuePress-Projekt einrichten

Erstellen Sie ein neues VuePress-Projekt:
```
npm create vuepress@latest my-docs
```
Navigieren Sie in das Projektverzeichnis:
```
cd my-docs
```
Installieren Sie die Abhängigkeiten:
```
npm install
```

Schritt 2. Quellinhalte erstellen

Erstellen Sie ein Verzeichnis zum Speichern der Dokumentation in der Quellsprache:
```
mkdir docs/en
```

Erstellen Sie eine Datei mit Dokumentationsinhalten (z. B. 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.

Schritt 3. Symbolische Links einrichten

VuePress erwartet Quellinhalte im Root-Verzeichnis docs, mit Zielspracheninhalten in Unterverzeichnissen, aber Lingo.dev CLI unterstützt diese Kombination nicht.

Als Workaround empfehlen wir:

Speichern der Quelldateien in einem Locale-Verzeichnis (z. B. docs/en/)
Generieren symbolischer Links, sodass die Dateien auch im Root-Verzeichnis docs erscheinen

Um diesen Prozess zu optimieren:

Erstellen Sie ein Skript zum Generieren der symbolischen Links (z. B. scripts/symlinks.sh):

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

Machen Sie das Skript ausführbar:
```
chmod +x scripts/symlinks.sh
```
Führen Sie das Skript aus:
```
./scripts/symlinks.sh
```

Sie müssen das Skript jedes Mal erneut ausführen, wenn Sie Dateien zum Verzeichnis docs/en/ hinzufügen.

Schritt 4. Konfigurieren Sie die CLI

Erstellen Sie im Stammverzeichnis des Projekts eine Datei 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"]
    }
  }
}

Diese Datei definiert:

die Dateien, die Lingo.dev CLI übersetzen soll
die Sprachen, zwischen denen übersetzt werden soll

In diesem Fall übersetzt die Konfiguration Markdown-Dateien von Englisch nach Spanisch.

Es ist wichtig zu beachten, dass:

[locale] ein Platzhalter ist, der zur Laufzeit ersetzt wird. Er stellt sicher, dass Inhalte von einem Speicherort gelesen (z. B. docs/en/README.md) und an einen anderen Speicherort geschrieben werden (z. B. docs/es/README.md).
Lingo.dev CLI unterstützt keine rekursiven Glob-Muster (z. B. **/*.md). Sie müssen zusätzliche include Muster erstellen, um Dateien zu übersetzen, die sich in verschachtelten Verzeichnissen befinden.

Weitere Informationen finden Sie unter i18n.json-Konfiguration.

Schritt 5. Übersetzen Sie den Inhalt

Registrieren Sie sich für ein Lingo.dev-Konto.
Melden Sie sich über die CLI bei Lingo.dev an:
```
npx lingo.dev@latest login
```
Führen Sie die Übersetzungspipeline aus:
```
npx lingo.dev@latest run
```
Die CLI erstellt ein Verzeichnis docs/es/ zum Speichern der übersetzten Inhalte und eine Datei i18n.lock, um nachzuverfolgen, was übersetzt wurde (um unnötige erneute Übersetzungen zu vermeiden).

Schritt 6. Verwenden Sie die Übersetzungen

In der Datei docs/.vuepress/config.js:

Fügen Sie eine locales Eigenschaft zur Theme-Konfiguration hinzu:

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

Fügen Sie eine locales Eigenschaft auf Root-Ebene hinzu, um die Sprachkonfiguration für jedes Locale zu definieren:

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

Starten Sie den Development-Server:
```
npm run docs:dev
```
Navigieren Sie zu http://localhost:8080. Sie sollten ein Dropdown-Menü zum Wechseln zwischen Sprachen sehen.