Intlayer Content Management System (CMS) Dokumentation

www.youtube.com

Open embedded page in fullscreen

Das Intlayer CMS ist eine Anwendung, die es Ihnen ermöglicht, die Inhalte eines Intlayer-Projekts auszulagern.

Dafür führt Intlayer das Konzept der „fernen Wörterbücher“ ein.

Inhaltsverzeichnis

Verständnis von fernen Wörterbüchern

Intlayer unterscheidet zwischen „lokalen“ und „fernen“ Wörterbüchern.

• Ein „lokales“ Wörterbuch ist ein Wörterbuch, das in Ihrem Intlayer-Projekt deklariert ist. Zum Beispiel die Deklarationsdatei eines Buttons oder Ihrer Navigationsleiste. In diesem Fall macht es keinen Sinn, Ihre Inhalte auszulagern, da sich diese Inhalte nicht häufig ändern sollen.

• Ein „fernes“ Wörterbuch ist ein Wörterbuch, das über das Intlayer CMS verwaltet wird. Dies kann nützlich sein, um Ihrem Team zu ermöglichen, Ihre Inhalte direkt auf Ihrer Website zu verwalten, und zielt außerdem darauf ab, A/B-Testfunktionen und automatische SEO-Optimierung zu nutzen.

Visueller Editor vs. CMS

Der Intlayer Visual Editor ist ein Werkzeug, das es Ihnen ermöglicht, Ihre Inhalte in einem visuellen Editor für lokale Wörterbücher zu verwalten. Sobald eine Änderung vorgenommen wird, wird der Inhalt im Code-Basis ersetzt. Das bedeutet, dass die Anwendung neu gebaut wird und die Seite neu geladen wird, um den neuen Inhalt anzuzeigen.

Im Gegensatz dazu ist das Intlayer CMS ein Werkzeug, das es Ihnen ermöglicht, Ihre Inhalte in einem visuellen Editor für ferne Wörterbücher zu verwalten. Sobald eine Änderung vorgenommen wird, wirkt sich der Inhalt nicht auf Ihre Code-Basis aus. Und die Website zeigt automatisch den geänderten Inhalt an.

Integration

Für weitere Details zur Installation des Pakets siehe den entsprechenden Abschnitt unten:

Integration mit Next.js

Für die Integration mit Next.js siehe die Installationsanleitung.

Integration mit Create React App

Für die Integration mit Create React App siehe die Installationsanleitung.

Integration mit Vite + React

Für die Integration mit Vite + React siehe die Installationsanleitung.

Konfiguration

Führen Sie den folgenden Befehl aus, um sich beim Intlayer CMS anzumelden:

npx intlayer login

Dies öffnet Ihren Standardbrowser, um den Authentifizierungsprozess abzuschließen und die erforderlichen Anmeldedaten (Client ID und Client Secret) zu erhalten, um Intlayer-Dienste zu verwenden.

In Ihrer Intlayer-Konfigurationsdatei können Sie die CMS-Einstellungen anpassen:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... andere Konfigurationseinstellungen
  editor: {
    /**
     * Erforderlich
     *
     * Die URL der Anwendung.
     * Dies ist die URL, auf die der visuelle Editor abzielt.
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,

    /**
     * Erforderlich
     *
     * Client-ID und Client-Secret sind erforderlich, um den Editor zu aktivieren.
     * Sie ermöglichen die Identifizierung des Benutzers, der den Inhalt bearbeitet.
     * Sie können durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte (https://app.intlayer.org/projects) erhalten werden.
     * clientId: process.env.INTLAYER_CLIENT_ID,
     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
     */
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,

    /**
     * Optional
     *
     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des CMS festlegen.
     *
     * Die URL des Intlayer CMS.
     * Standardmäßig ist sie auf https://intlayer.org gesetzt.
     */
    cmsURL: process.env.INTLAYER_CMS_URL,

    /**
     * Optional
     *
     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des Backends festlegen.
     *
     * Die URL des Intlayer CMS.
     * Standardmäßig ist sie auf https://back.intlayer.org gesetzt.
     */
    backendURL: process.env.INTLAYER_BACKEND_URL,
  },
};

export default config;

Wenn Sie keine Client-ID und kein Client-Secret haben, können Sie diese durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte erhalten.

Um alle verfügbaren Parameter zu sehen, konsultieren Sie die Konfigurationsdokumentation.

Verwendung des CMS

Konfiguraton hochladen

Um das Intlayer CMS zu konfigurieren, können Sie die intlayer CLI Befehle verwenden.

npx intlayer config push

Wenn Sie Umgebungsvariablen in Ihrer intlayer.config.ts Konfigurationsdatei verwenden, können Sie die gewünschte Umgebung mit dem Argument --env angeben:

npx intlayer config push --env production

Dieser Befehl lädt Ihre Konfiguration in das Intlayer CMS hoch.

Ein Wörterbuch hochladen

Um Ihre Lokalisierungswörterbücher in ein entferntes Wörterbuch zu transformieren, können Sie die intlayer CLI Befehle verwenden.

npx intlayer dictionary push -d my-first-dictionary-key

Wenn Sie Umgebungsvariablen in Ihrer intlayer.config.ts Konfigurationsdatei verwenden, können Sie die gewünschte Umgebung mit dem Argument --env angeben:

npx intlayer dictionary push -d my-first-dictionary-key --env production

Dieser Befehl lädt Ihre anfänglichen Inhaltswörterbücher hoch und macht sie für asynchrones Abrufen und Bearbeiten über die Intlayer-Plattform verfügbar.

Wörterbuch bearbeiten

Anschließend können Sie Ihr Wörterbuch im Intlayer CMS anzeigen und verwalten.

Live-Synchronisation

Live Sync ermöglicht es Ihrer App, CMS-Inhaltsänderungen zur Laufzeit widerzuspiegeln. Kein Neuaufbau oder erneutes Bereitstellen erforderlich. Wenn aktiviert, werden Updates an einen Live-Sync-Server gestreamt, der die Wörterbücher aktualisiert, die Ihre Anwendung liest.

Die vollständige Anleitung (Aktivierung, Start des Live-Sync-Servers, lokaler Entwicklungsworkflow und Einschränkungen) finden Sie in der Live-Sync-Dokumentation.

Installation

npm install @intlayer/api

So funktioniert es: Authenticator + Endpoints

Das SDK ist absichtlich in zwei separate Imports aufgeteilt, um Ihr Bundle klein zu halten:

1. createIntlayerCMS — erstellt einen leichten Authenticator. Er trägt nur die Anmeldedaten und das verwaltete Zugriffs-Token; er kennt keine spezifische Domain.
2. dictionaryEndpoint, projectEndpoint, … — pro-Domain Endpoint-Binder, jeder aus seinem eigenen Subpath importiert (@intlayer/api/dictionary, @intlayer/api/project, …). Sie übergeben den Authenticator an den Endpoint, den Sie benötigen.

Da jeder Endpoint separat importiert wird, enthält Ihr Bundle nur die Domains, die Sie tatsächlich verwenden — das Importieren von dictionaryEndpoint zieht niemals den Project-, AI- oder einen anderen Domain-Client mit sich.

import { createIntlayerCMS } from "@intlayer/api";

// Die Konfiguration ist optional: Wenn sie weggelassen wird, werden die Anmeldedaten aus
// `@intlayer/config/built` gelesen, das die Umgebungsvariablen INTLAYER_CLIENT_ID und
// INTLAYER_CLIENT_SECRET auflöst.
export const cmsAuthenticator = createIntlayerCMS();

WARNING

Die CMS-Anmeldedaten (clientId / clientSecret) gewähren Schreibzugriff auf Ihren Inhalt. Erstellen Sie den Authenticator nur auf der Serverseite (Server Actions, Route Handler, Scripts, CI). Importieren Sie ihn niemals in Client-seitige Code oder stellen Sie Ihre Anmeldedaten dem Browser zur Verfügung.

Wenn Sie sich nicht auf die Build-Zeit-Konfiguration verlassen möchten, übergeben Sie die Anmeldedaten explizit:

import { createIntlayerCMS } from "@intlayer/api";

export const cmsAuthenticator = createIntlayerCMS({
  editor: {
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
    // Optional, für selbst gehostete Backends:
    // backendURL: process.env.INTLAYER_BACKEND_URL,
  },
});

Erhalten Sie Ihre Anmeldedaten, indem Sie einen neuen Zugriffsschlüssel im Intlayer Dashboard - Projekte erstellen.

Ihr Projekt mit einer selbst gehosteten Instanz verbinden

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  editor: {
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,

    /**
     * URL des selbst gehosteten CMS-Dashboards.
     * Standard: https://app.intlayer.org
     */
    cmsURL: process.env.INTLAYER_CMS_URL, // z.B. http://localhost:3000

    /**
     * URL der selbst gehosteten Backend-API.
     * Standard: https://back.intlayer.org
     */
    backendURL: process.env.INTLAYER_BACKEND_URL, // z.B. http://localhost:3100
  },
};

export default config;

@intlayer/api SDK: auf ein selbst gehostetes Backend verweisen

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

const cms = createIntlayerCMS({
  editor: {
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
    backendURL: process.env.INTLAYER_BACKEND_URL, // http://localhost:3100
  },
});

const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();

Optionale Funktionen

Diese Funktionen erfordern externe Konten und funktionieren weiterhin ohne ihre Schlüssel in der selbst gehosteten .env:

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

const cmsAuthenticator = createIntlayerCMS();

// Erstelle ein neues Wörterbuch
await dictionaryEndpoint(cmsAuthenticator).addDictionary({
  key: "my-first-dictionary-key",
  content: { title: "Hello world" },
});

// Upsert einer Reihe von Wörterbüchern (erstelle oder aktualisiere sie in einem Aufruf)
await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
  { key: "home", content: { title: "Home" } },
  { key: "about", content: { title: "About" } },
]);

// Aktualisiere ein bestehendes Wörterbuch
await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
  id: "<dictionary-id>",
  key: "home",
  content: { title: "Updated title" },
});

Datenpersistenz und Upgrades

Auf dem Host verfügbare Ports:

Live Sync

Live Sync ermöglicht es deiner App, CMS-Inhaltsänderungen zur Laufzeit zu reflektieren — kein Rebuild oder Redeploy erforderlich. Wenn aktiviert, werden Updates zu einem Live-Sync-Server gestreamt, der die Wörterbücher aktualisiert, die deine Anwendung liest.

Für die vollständige Setupanleitung (Konfiguration, Starten des Live-Sync-Servers, der lokalen Entwicklungs-Workflow und Einschränkungen) siehe die Live-Sync-Dokumentation.

Self-Hosting

Intlayer kann vollständig auf Ihrer eigenen Infrastruktur ausgeführt werden. Ein One-Liner bootstraps den vollständigen Stack (Dashboard, API, Datenbank, Objektspeicher und E-Mail) mit Docker Compose:

curl -fsSL https://intlayer.org/install.sh | sh

Eine umfassende Installationsanleitung, Umgebungsvariablenreferenz, Upgrade-Anweisungen und Sicherungs-/Wiederherstellungsverfahren finden Sie im Self-Hosting-Handbuch.

Debug

Wenn Sie Probleme mit dem CMS haben, überprüfen Sie Folgendes:

• Die Anwendung läuft.

• Die editor-Konfiguration ist in Ihrer Intlayer-Konfigurationsdatei korrekt gesetzt.
  • Erforderliche Felder:
• Die Anwendungs-URL sollte mit der in der Editor-Konfiguration (applicationURL) eingestellten URL übereinstimmen.

• Die CMS-URL

• Stellen Sie sicher, dass die Projektkonfiguration in das Intlayer CMS übertragen wurde.

• Der visuelle Editor verwendet ein iframe, um Ihre Website anzuzeigen. Stellen Sie sicher, dass die Content Security Policy (CSP) Ihrer Website die CMS-URL als frame-ancestors erlaubt (standardmäßig 'https://intlayer.org'). Überprüfen Sie die Editor-Konsole auf Fehler.

Häufig gestellte Fragen