VuePress - Lingo.dev CLI

Was ist VuePress?

VuePress ist ein von Vue betriebener statischer Website-Generator zur Erstellung von Dokumentationsseiten. Es 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 man die Lingo.dev CLI in einer VuePress-Dokumentationsseite einrichtet. Sie lernen, wie man ein Projekt mit VuePress erstellt, eine Übersetzungspipeline konfiguriert und die Ergebnisse betrachtet.

Schritt 1. Einrichten eines VuePress-Projekts

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. Erstellen von Quellinhalten

Erstellen Sie ein Verzeichnis zur Speicherung 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
---

## Erste Schritte

Diese Dokumentation wird automatisch von Lingo.dev übersetzt.

## Funktionen

Unser Produkt umfasst leistungsstarke Funktionen für moderne Entwicklung.

Schritt 3. Einrichten von symbolischen Links

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

Als Workaround empfehlen wir:

Speichern der Quellinhalte in einem Sprachverzeichnis (z.B. docs/en/)
Generieren von symbolischen Links, damit die Dateien auch im Root-Verzeichnis docs erscheinen

Um diesen Prozess zu vereinfachen:

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 der CLI

Erstellen Sie im Stammverzeichnis des Projekts eine i18n.json-Datei:

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

Diese Datei definiert:

die Dateien, die 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.

Wichtig zu beachten ist:

[locale] ist ein Platzhalter, der zur Laufzeit ersetzt wird. Er stellt sicher, dass Inhalte von einem Ort (z.B. docs/en/README.md) gelesen und an einen anderen Ort (z.B. docs/es/README.md) geschrieben werden.
Die 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 in verschachtelten Verzeichnissen existieren.

Weitere Informationen finden Sie unter i18n.json-Konfiguration.

Schritt 5. Übersetzen des Inhalts

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 docs/es/-Verzeichnis zum Speichern der übersetzten Inhalte und eine i18n.lock-Datei, um zu verfolgen, was bereits übersetzt wurde (um unnötige Neuübersetzungen zu vermeiden).

Schritt 6. Verwenden der Übersetzungen

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

Fügen Sie der Theme-Konfiguration eine locales-Eigenschaft 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 jede Locale zu definieren:

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

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