Starlight

KI-Übersetzung für Starlight mit Lingo.dev CLI

Was ist Starlight?

Starlight ist ein Dokumentations-Theme, das auf dem Astro-Framework aufbaut. Es bietet integrierte Website-Navigation, Suche, Internationalisierung und SEO-Funktionen, um schöne, barrierefreie Dokumentationsseiten zu erstellen.

Was ist Lingo.dev CLI?

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

Über diese Anleitung

Diese Anleitung erklärt, wie Sie Lingo.dev CLI in einer Starlight-Dokumentationsseite einrichten. Sie lernen, wie Sie ein Projekt mit Starlight erstellen, eine Übersetzungs-Pipeline konfigurieren und die Ergebnisse anzeigen.

Schritt 1. Starlight-Projekt einrichten

  1. Erstellen Sie eine neue Starlight-Anwendung:

    npm create astro@latest -- --template starlight

  2. Navigieren Sie in das Projektverzeichnis:

    cd <your-starlight-project>

Schritt 2. Quellinhalte erstellen

  1. Erstellen Sie ein Verzeichnis zum Speichern der Dokumentation in der Quellsprache:

    mkdir -p src/content/docs/en

  2. Erstellen Sie eine Datei, die Dokumentationsinhalte enthält (z. B. src/content/docs/en/index.mdx):

    ---
title: "Welcome"
description: "Getting started with our documentation"
---

## Introduction

This documentation is automatically translated by Lingo.dev.

## Features

Our product includes powerful capabilities for modern development.

Schritt 3. CLI konfigurieren

Erstellen Sie im Stammverzeichnis des Projekts eine i18n.jsonDatei:

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

Diese Datei definiert:

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

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

Es ist wichtig zu beachten, dass:

  • [locale] ist ein Platzhalter, der zur Laufzeit ersetzt wird. Er stellt sicher, dass Inhalte von einem Ort gelesen (z. B. src/content/docs/en/index.mdx) und an einen anderen Ort geschrieben werden (z. B. src/content/docs/es/index.mdx).
  • Die Lingo.dev CLI unterstützt keine rekursiven Glob-Muster (z. B. **/*.mdx). 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 4. Übersetzen Sie den Inhalt

  1. Registrieren Sie sich für ein Lingo.dev-Konto.

  2. Melden Sie sich über die CLI bei Lingo.dev an:

    npx lingo.dev@latest login

  3. Führen Sie die Übersetzungs-Pipeline aus:

    npx lingo.dev@latest run

    Die CLI erstellt ein src/content/docs/es/ Verzeichnis zum Speichern der übersetzten Inhalte und eine i18n.lock Datei, um nachzuverfolgen, was übersetzt wurde (um unnötige erneute Übersetzungen zu vermeiden).

Schritt 5. Verwenden Sie die Übersetzungen

  1. Konfigurieren Sie in der astro.config.mjs Datei die unterstützten Locales:

    import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      title: "My Docs",
      defaultLocale: "en",
      locales: {
        en: {
          label: "English",
          lang: "en",
        },
        es: {
          label: "Español",
          lang: "es",
        },
      },
    }),
  ],
});

  2. Starten Sie den Entwicklungsserver:

    npm run dev

  3. Navigieren Sie zu den folgenden URLs: