Schnellstart

Erfordert Svelte 5. Das SDK funktioniert mit dem serverseitigen Rendering von SvelteKit. Quellcode auf GitHub

Projekt erstellen

Erstellen Sie ein Projekt in Langsys. Sie benötigen die zugehörige Projekt-ID und einen API-Schlüssel. Frühen Zugang anfragen

Installieren

npm install langsys-js-svelte

Initialisieren

Initialisieren Sie Langsys einmalig in Ihrem Root-Layout. Es erwartet ein Konfigurationsobjekt und einen beschreibbaren Store, der die Locale des Nutzers enthält.

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

API-Schlüssel

Schreibschlüssel

Für die Entwicklung. Das SDK registriert neue Phrasen und Inhaltsblöcke, sobald sie in Ihrer App erscheinen.

Schreibgeschützter Schlüssel

Für die Produktion. Das SDK ruft nur Übersetzungen ab und erstellt nie Phrasen.

Das SDK erkennt, um welche Art von Schlüssel es sich handelt, und verhält sich entsprechend.

Phrasen übersetzen

Verwenden Sie den t-Store für einzelne Strings. Die Phrase selbst ist zugleich Suchschlüssel und Text in der Basissprache, daher gibt es keine separate Schlüsseldatei. Platzhalter in geschweiften Klammern werden beim Kompilieren auf ihre Typen geprüft.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

Verwenden Sie eine Kategorie, wenn derselbe Text an verschiedenen Stellen unterschiedliche Bedeutungen hat:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

Inhaltsblöcke übersetzen

Verwenden Sie die Translate-Komponente für größere Blöcke, bei denen die Struktur wichtig ist. Übersetzer sehen das formatierte Ergebnis und übersetzen es als eine Einheit, arbeiten darin aber weiterhin Phrase für Phrase.

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

Weitere SDKs und die API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

API-Referenz

Sie kommen nicht weiter? Senden Sie uns eine Nachricht