Übersetzen Sie Ihre Vite and Preact mit Intlayer | Internationalisierung (i18n)

Dieses Paket befindet sich in der Entwicklung. Weitere Informationen finden Sie im Issue. Zeigen Sie Ihr Interesse an Intlayer für Preact, indem Sie das Issue liken.

Siehe Anwendungsvorlage auf GitHub.

Warum Intlayer gegenüber Alternativen?

Im Vergleich zu Hauptlösungen wie „preact-i18n“ oder „i18next“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vite- und Preact-Anwendung

1. 1

   Abhängigkeiten installieren

   Installieren Sie die notwendigen Pakete mit npm:

   bash

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   npm install intlayer preact-intlayernpm install vite-intlayer --save-devnpx intlayer init

   • intlayer

     Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilierung und CLI-Befehle bereitstellt.

   • preact-intlayer Das Paket, das Intlayer in Preact-Anwendungen integriert. Es stellt Kontextanbieter und Hooks für die Internationalisierung in Preact bereit.

   • vite-intlayer Enthält das Vite-Plugin zur Integration von Intlayer mit dem Vite-Bundler, sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.

2. 2

   Konfiguration Ihres Projekts

   Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:

   intlayer.config.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Ihre weiteren Sprachversionen
       ],
       defaultLocale: Locales.ENGLISH,
     },
     routing: {
       mode: "prefix-no-default", // Standard: Präfix für alle Locales außer der Standard-Locale
       storage: ["cookie", "header"], // Standard: Locale in Cookie speichern und aus Header erkennen
     },
   };
   
   export default config;

   Durch diese Konfigurationsdatei können Sie lokalisierte URLs, Routing-Modi, Speicheroptionen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Logs in der Konsole deaktivieren und vieles mehr. Für eine vollständige Liste der verfügbaren Parameter verweisen wir auf die Konfigurationsdokumentation.

3. 3

   Integrieren Sie Intlayer in Ihre Vite-Konfiguration

   Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.

   vite.config.ts

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { defineConfig } from "vite";
   import preact from "@preact/preset-vite";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [preact(), intlayer()],
   });

   Das intlayer() Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es sorgt für den Aufbau von Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren.

4. 4

   Deklarieren Sie Ihren Inhalt

   Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

   src/app.content.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { t, type Dictionary } from "intlayer";
   import type { ComponentChildren } from "preact";
   
   const appContent = {
     key: "app",
     content: {
       viteLogo: t({
         en: "Vite logo",
         fr: "Logo Vite",
         es: "Logo Vite",
       }),
       preactLogo: t({
         en: "Preact logo",
         fr: "Logo Preact",
         es: "Logo Preact",
       }),
   
       title: "Vite + Preact",
   
       count: t({
         en: "count is ",
         fr: "le compte est ",
         es: "el recuento es ",
       }),
   
       edit: t<ComponentChildren>({
         en: (
           <>
             Edit <code>src/app.tsx</code> and save to test HMR
           </>
         ),
         fr: (
           <>
             Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
           </>
         ),
         es: (
           <>
             Edita <code>src/app.tsx</code> y guarda para probar HMR
           </>
         ),
       }),
   
       readTheDocs: t({
         en: "Click on the Vite and Preact logos to learn more",
         fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
         es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;

   Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das Verzeichnis contentDir aufgenommen sind (standardmäßig ./src). Und sie müssen der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Für weitere Details siehe die Dokumentation zur Inhaltsdeklaration.

   Wenn Ihre Inhaltsdatei TSX-Code enthält, müssen Sie möglicherweise import { h } from "preact"; importieren oder sicherstellen, dass Ihr JSX-Pragma korrekt für Preact gesetzt ist.

5. 5

   Nutzen Sie Intlayer in Ihrem Code

   Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu:

   src/app.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { useState } from "preact/hooks";
   import type { FunctionalComponent } from "preact";
   import preactLogo from "./assets/preact.svg"; // Angenommen, Sie haben eine preact.svg
   import viteLogo from "/vite.svg";
   import "./app.css"; // Angenommen, Ihre CSS-Datei heißt app.css
   import { IntlayerProvider, useIntlayer } from "preact-intlayer";
   
   const AppContent: FunctionalComponent = () => {
     const [count, setCount] = useState(0);
     const content = useIntlayer("app");
   
     return (
       <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
           </a>
           <a href="https://preactjs.com" target="_blank">
             <img
               src={preactLogo}
               class="logo preact"
               alt={content.preactLogo.value}
             />
           </a>
         </div>
         <h1>{content.title}</h1>
         <div class="card">
           <button onClick={() => setCount((count) => count + 1)}>
             {content.count}
             {count}
           </button>
           <p>{content.edit}</p>
         </div>
         {/* Markdown-Inhalt */}
         <div>{content.myMarkdownContent}</div>
   
         {/* HTML-Inhalt */}
         <div>{content.myHtmlContent}</div>
   
         <p class="read-the-docs">{content.readTheDocs}</p>
       </>
     );
   };
   
   const App: FunctionalComponent = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;

   Wenn Sie Ihren Inhalt in einem string-Attribut verwenden möchten, wie z.B. alt, title, href, aria-label usw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:

   html

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

   Hinweis: In Preact wird className typischerweise als class geschrieben.

   Um mehr über den useIntlayer Hook zu erfahren, lesen Sie die Dokumentation (Die API ist ähnlich für preact-intlayer).

   Wenn Ihre App bereits existiert, können Sie den Intlayer Compiler sowie den Extraktionsbefehl verwenden, um Tausende von Komponenten in einer Sekunde zu transformieren.

6. 6

   Ändern Sie die Sprache Ihres Inhalts

   Optional

   Um die Sprache Ihres Inhalts zu ändern, können Sie die Funktion setLocale verwenden, die vom useLocale Hook bereitgestellt wird. Diese Funktion ermöglicht es Ihnen, die Locale der Anwendung festzulegen und den Inhalt entsprechend zu aktualisieren.

   src/components/LocaleSwitcher.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import type { FunctionalComponent } from "preact";
   import { Locales } from "intlayer";
   import { useLocale } from "preact-intlayer";
   
   const LocaleSwitcher: FunctionalComponent = () => {
     const { setLocale } = useLocale();
   
     return (
       <button onClick={() => setLocale(Locales.ENGLISH)}>
         Sprache auf Englisch ändern
       </button>
     );
   };
   
   export default LocaleSwitcher;

   Um mehr über den useLocale Hook zu erfahren, siehe die Dokumentation (Die API ist ähnlich für preact-intlayer).

7. 7

   Lokalisierte Routen zu Ihrer Anwendung hinzufügen

   Optional

   Zweck dieses Schrittes ist es, für jede Sprache eindeutige Routen zu erstellen. Dies ist nützlich für SEO und SEO-freundliche URLs. Beispiel:

   plaintext

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   - https://example.com/about- https://example.com/es/about- https://example.com/fr/about

   Standardmäßig sind die Routen für die Standardsprache nicht mit einem Präfix versehen. Wenn Sie die Standardsprache mit einem Präfix versehen möchten, können Sie die Option routing.mode in Ihrer Konfiguration auf "prefix-all" setzen. Weitere Informationen finden Sie in der Konfigurationsdokumentation.

   Um lokalisierte Routen zu Ihrer Anwendung hinzuzufügen, können Sie eine LocaleRouter-Komponente erstellen, die die Routen Ihrer Anwendung umschließt und das sprachbasierte Routing verwaltet. Hier ist ein Beispiel unter Verwendung von preact-iso:

   src/components/LocaleRouter.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { localeMap } from "intlayer";
   import { IntlayerProvider } from "preact-intlayer";
   import { LocationProvider, Router, Route } from "preact-iso";
   import type { ComponentChildren, FunctionalComponent } from "preact";
   
   /**
    * Eine Router-Komponente, die lokalisierungsspezifische Routen einrichtet.
    * Sie verwendet preact-iso, um die Navigation zu verwalten und lokalisierte Komponenten zu rendern.
    */
   export const LocaleRouter: FunctionalComponent<{
     children: ComponentChildren;
   }> = ({ children }) => (
     <LocationProvider>
       <Router>
         {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
           .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
           .map(({ locale, urlPrefix }) => (
             <Route
               key={locale}
               path={`${urlPrefix}/:rest*`}
               component={() => (
                 <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
               )}
             />
           ))}
       </Router>
     </LocationProvider>
   );

   Dann können Sie die LocaleRouter-Komponente in Ihrer Anwendung verwenden:

   src/app.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { LocaleRouter } from "./components/LocaleRouter";
   import type { FunctionalComponent } from "preact";
   
   // ... Ihre AppContent-Komponente
   
   const App: FunctionalComponent = () => (
     <LocaleRouter>
       <AppContent />
     </LocaleRouter>
   );
   
   export default App;

8. 8

   Ändern der URL, wenn sich die Sprache ändert

   Optional

   Um die URL zu ändern, wenn sich die Sprache ändert, können Sie die onLocaleChange-Eigenschaft verwenden, die vom useLocale-Hook bereitgestellt wird. Parallel dazu können Sie die route-Methode von useLocation von preact-iso verwenden, um den URL-Pfad zu aktualisieren.

   src/components/LocaleSwitcher.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { useLocation } from "preact-iso";
   import {
     Locales,
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
   } from "intlayer";
   import { useLocale } from "preact-intlayer";
   import type { FunctionalComponent } from "preact";
   
   const LocaleSwitcher: FunctionalComponent = () => {
     const { url, route } = useLocation();
     const { locale, availableLocales, setLocale } = useLocale({
       onLocaleChange: (newLocale) => {
         // Erstellen Sie die URL mit der aktualisierten Locale
         // Beispiel: /es/about?foo=bar
         const pathWithLocale = getLocalizedUrl(url, newLocale);
   
         // Aktualisieren Sie den URL-Pfad
         route(pathWithLocale, true); // true für Ersetzen
       },
     });
   
     return (
       <div>
         <button popovertarget="localePopover">{getLocaleName(locale)}</button>
         <div id="localePopover" popover="auto">
           {availableLocales.map((localeItem) => (
             <a
               href={getLocalizedUrl(url, localeItem)}
               hreflang={localeItem}
               aria-current={locale === localeItem ? "page" : undefined}
               onClick={(e) => {
                 e.preventDefault();
                 setLocale(localeItem);
                 // Programmatische Navigation nach dem Setzen der Sprache wird von onLocaleChange übernommen
               }}
               key={localeItem}
             >
               <span>
                 {/* Locale - z.B. FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Sprache in ihrem eigenen Locale - z.B. Français */}
                 {getLocaleName(localeItem, localeItem)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Sprache im aktuellen Locale - z.B. Francés, wenn das aktuelle Locale auf Locales.SPANISH gesetzt ist */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir="ltr" lang={Locales.ENGLISH}>
                 {/* Sprache auf Englisch - z.B. French */}
                 {getLocaleName(localeItem, Locales.ENGLISH)}
               </span>
             </a>
           ))}
         </div>
       </div>
     );
   };
   
   export default LocaleSwitcher;

   Dokumentationsverweise:

   - useLocale Hook (API ist ähnlich für preact-intlayer)> - getLocaleName Hook> - getLocalizedUrl Hook> - getHTMLTextDir Hook> - hreflang Attribut> - lang Attribut> - dir Attribut> - aria-current Attribut> - Popover API

9. 9

   Wechseln der HTML-Sprach- und Richtungsattribute

   Optional

   Wenn Ihre Anwendung mehrere Sprachen unterstützt, ist es entscheidend, die lang- und dir-Attribute des <html>-Tags an die aktuelle Sprache anzupassen. Dies stellt sicher:

   • Barrierefreiheit: Screenreader und unterstützende Technologien verlassen sich auf das korrekte lang-Attribut, um Inhalte richtig auszusprechen und zu interpretieren.
   • Textdarstellung: Das dir-Attribut (Richtung) sorgt dafür, dass der Text in der richtigen Reihenfolge dargestellt wird (z. B. von links nach rechts für Englisch, von rechts nach links für Arabisch oder Hebräisch), was für die Lesbarkeit unerlässlich ist.
   • SEO: Suchmaschinen verwenden das lang-Attribut, um die Sprache Ihrer Seite zu bestimmen und so die richtige lokalisierte Version in den Suchergebnissen anzuzeigen.

   Indem Sie diese Attribute dynamisch aktualisieren, wenn sich die Sprache ändert, gewährleisten Sie eine konsistente und barrierefreie Benutzererfahrung für alle unterstützten Sprachen.

   Implementierung des Hooks

   Erstellen Sie einen benutzerdefinierten Hook, um die HTML-Attribute zu verwalten. Der Hook hört auf Sprachänderungen und aktualisiert die Attribute entsprechend:

   src/hooks/useI18nHTMLAttributes.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import { useEffect } from "preact/hooks";
   import { useLocale } from "preact-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   /**
    * Aktualisiert die `lang`- und `dir`-Attribute des HTML-Elements `<html>` basierend auf der aktuellen Sprache.
    * - `lang`: Informiert Browser und Suchmaschinen über die Sprache der Seite.
    * - `dir`: Stellt die korrekte Leserichtung sicher (z.B. 'ltr' für Englisch, 'rtl' für Arabisch).
    *
    * Dieses dynamische Update ist essenziell für die korrekte Textdarstellung, Barrierefreiheit und SEO.
    */
   export const useI18nHTMLAttributes = () => {
     const { locale } = useLocale();
   
     useEffect(() => {
       // Aktualisiert das Sprachattribut auf die aktuelle Sprache.
       document.documentElement.lang = locale;
   
       // Setzt die Textrichtung basierend auf der aktuellen Sprache.
       document.documentElement.dir = getHTMLTextDir(locale);
     }, [locale]);
   };

   Verwendung des Hooks in Ihrer Anwendung

   Integrieren Sie den Hook in Ihre Hauptkomponente, damit die HTML-Attribute aktualisiert werden, sobald sich die Sprache ändert:

   src/app.tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   import type { FunctionalComponent } from "preact";
   import { IntlayerProvider } from "preact-intlayer"; // useIntlayer bereits importiert, falls AppContent es benötigt
   import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
   import "./app.css";
   // AppContent-Definition aus Schritt 5
   
   const AppWithHooks: FunctionalComponent = () => {
     // Wenden Sie den Hook an, um die Attribute lang und dir des <html>-Tags basierend auf der Sprache zu aktualisieren.
     useI18nHTMLAttributes();
   
     // Angenommen, AppContent ist Ihre Hauptkomponentenanzeige aus Schritt 5
     return <AppContent />;
   };
   
   const App: FunctionalComponent = () => (
     <IntlayerProvider>
       <AppWithHooks />
     </IntlayerProvider>
   );
   
   export default App;

10. 10

    Erstellen einer lokalisierten Link-Komponente

    Optional

    Um sicherzustellen, dass die Navigation Ihrer Anwendung die aktuelle Sprache berücksichtigt, können Sie eine benutzerdefinierte Link-Komponente erstellen. Diese Komponente fügt automatisch das aktuelle Sprachpräfix zu internen URLs hinzu.

    Dieses Verhalten ist aus mehreren Gründen nützlich:

    • SEO und Benutzererfahrung: Lokalisierte URLs helfen Suchmaschinen, sprachspezifische Seiten korrekt zu indexieren, und bieten den Nutzern Inhalte in ihrer bevorzugten Sprache.
    • Konsistenz: Durch die Verwendung eines lokalisierten Links in der gesamten Anwendung stellen Sie sicher, dass die Navigation innerhalb der aktuellen Sprache bleibt und unerwartete Sprachwechsel vermieden werden.
    • Wartbarkeit: Die Zentralisierung der Lokalisierungslogik in einer einzigen Komponente vereinfacht die Verwaltung der URLs.

    Hier ist die Implementierung einer lokalisierten Link-Komponente in Preact:

    src/components/Link.tsx

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "preact-intlayer";
    import { forwardRef } from "preact/compat";
    import type { JSX } from "preact";
    
    export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
      href: string;
    }
    
    /**
     * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
     * Wenn die URL mit http:// oder https:// beginnt, wird sie als extern betrachtet.
     */
    export const checkIsExternalLink = (href?: string): boolean =>
      /^https?:\/\//.test(href ?? "");
    
    /**
     * Eine benutzerdefinierte Link-Komponente, die das href-Attribut basierend auf der aktuellen Sprache anpasst.
     * Für interne Links wird `getLocalizedUrl` verwendet, um die URL mit dem Sprachpräfix zu versehen (z. B. /fr/about).
     * Dies stellt sicher, dass die Navigation im gleichen Sprachkontext bleibt.
     */
    export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
      ({ href, children, ...props }, ref) => {
        const { locale } = useLocale();
        const isExternalLink = checkIsExternalLink(href);
    
        // Wenn der Link intern ist und ein gültiges href angegeben wurde, rufen Sie die lokalisierte URL ab.
        const hrefI18n =
          href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
    
        return (
          <a href={hrefI18n} ref={ref} {...props}>
            {children}
          </a>
        );
      }
    );
    
    Link.displayName = "Link";

    Wie es funktioniert

    • Erkennung externer Links:
      Die Hilfsfunktion checkIsExternalLink bestimmt, ob eine URL extern ist. Externe Links bleiben unverändert, da sie keine Lokalisierung benötigen.
    • Abrufen der aktuellen Sprache:
      Der useLocale-Hook liefert die aktuelle Sprache (z. B. fr für Französisch).
    • Lokalisierung der URL:
      Für interne Links (d. h. nicht externe) wird getLocalizedUrl verwendet, um der URL automatisch das aktuelle Sprachpräfix voranzustellen. Das bedeutet, wenn Ihr Benutzer auf Französisch ist, wird /about als href in /fr/about umgewandelt.
    • Rückgabe des Links:
      Die Komponente gibt ein <a>-Element mit der lokalisierten URL zurück und stellt so sicher, dass die Navigation konsistent mit der Sprache ist.
11. 11

    Markdown und HTML rendern

    Optional

    Intlayer unterstützt das Rendern von Markdown- und HTML-Inhalten in Preact.

    Sie können das Rendern von Markdown- und HTML-Inhalten mit der Methode .use() anpassen. Diese Methode ermöglicht es Ihnen, das Standard-Rendering bestimmter Tags zu überschreiben.

    tsx

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { useIntlayer } from "preact-intlayer";const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");// ...return (  <div>    {/* Grundlegendes Rendering */}    {myMarkdownContent}    {/* Benutzerdefiniertes Rendering für Markdown */}    {myMarkdownContent.use({      h1: (props) => <h1 style={{ color: "red" }} {...props} />,    })}    {/* Grundlegendes Rendering für HTML */}    {myHtmlContent}    {/* Benutzerdefiniertes Rendering für HTML */}    {myHtmlContent.use({      b: (props) => <strong style={{ color: "blue" }} {...props} />,    })}  </div>);

12. 12

    Inhalt Ihrer Komponenten extrahieren

    Optional

    Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.

    Um diesen Prozess zu erleichtern, bietet Intlayer einen Compiler / Extractor an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.

    Um es einzurichten, können Sie einen compiler-Abschnitt in Ihrer intlayer.config.ts-Datei hinzufügen:

    intlayer.config.ts

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Rest Ihrer Konfiguration
      compiler: {
        /**
         * Gibt an, ob der Compiler aktiviert sein soll.
         */
        enabled: true,
    
        /**
         * Definiert den Pfad der Ausgabedateien
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
         */
        saveComponents: false,
    
        /**
         * Präfix für Wörterbuchschlüssel
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;

    ExtraktionsbefehlBabel-Compiler

    Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren

    bash

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    npx intlayer extract

    Aktualisieren Sie Ihre vite.config.ts, um das intlayerCompiler-Plugin aufzunehmen:

    vite.config.ts

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Fügt das Compiler-Plugin hinzu ],});

    bash

    Inhalt kopieren

    Code kopieren

    Kopieren Sie den Code in die Zwischenablage

    npm run build # Oder npm run dev

TypeScript konfigurieren

Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.

Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.

{  // ... Ihre bestehenden TypeScript-Konfigurationen  "compilerOptions": {    // ...    "jsx": "react-jsx",    "jsxImportSource": "preact", // Empfohlen für Preact 10+    // ...  },  "include": [    // ... Ihre bestehenden TypeScript-Konfigurationen    ".intlayer/**/*.ts", // Einbeziehung der automatisch generierten Typen  ],}

Stellen Sie sicher, dass Ihre tsconfig.json für Preact eingerichtet ist, insbesondere jsx und jsxImportSource oder jsxFactory/jsxFragmentFactory für ältere Preact-Versionen, falls Sie nicht die Standardwerte von preset-vite verwenden.

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen, zu vermeiden, dass sie in Ihr Git-Repository eingecheckt werden.

Dazu können Sie die folgenden Anweisungen in Ihre .gitignore-Datei einfügen:

#  Ignorieren Sie die von Intlayer generierten Dateien.intlayer

VS Code Erweiterung

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.

Vom VS Code Marketplace installieren

Diese Erweiterung bietet:

• Autovervollständigung für Übersetzungsschlüssel.
• Echtzeit-Fehlererkennung für fehlende Übersetzungen.
• Inline-Vorschauen von übersetzten Inhalten.
• Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

Weitere Details zur Verwendung der Erweiterung finden Sie in der Dokumentation zur Intlayer VS Code Erweiterung.

(Optional) Sitemap und robots.txt (Build-Zeit)

Intlayer stellt Hilfsfunktionen bereit - generateSitemap und getMultilingualUrls -, mit denen Sie mehrsprachige sitemap.xml- und robots.txt-Inhalte für Crawler formatieren und automatisch nach public/ schreiben können. Üblich ist ein kleines Node-Skript vor Vite (z. B. npm-predev-/prebuild-Hooks), damit die Dateien beim Build bzw. Dev-Server vorliegen.

Sitemap

Der Sitemap-Generator von Intlayer berücksichtigt Ihre Locales und die üblichen Metadaten für Crawler.

Die erzeugte Sitemap unterstützt den xhtml:link-Namensraum (Hreflang). Statt nur flacher URLs verknüpft Intlayer alle Sprachversionen einer Seite bidirektional (z. B. /about, /fr/about oder /about?lang=fr je nach Routing), was Suchmaschinen hilft.

Robots.txt

Mit getMultilingualUrls gelten Disallow-Regeln für alle lokalisierten Varianten sensibler Pfade.

1. generate-seo.mjs im Projektroot anlegen

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

intlayer muss installiert sein. Setzen Sie SITE_URL in der Produktion über die Umgebung (z. B. in der CI).

Nutzen Sie möglichst generate-seo.mjs für Node-ESM. Bei generate-seo.js "type": "module" in der package.json setzen oder Node mit ESM starten.

2. Skript vor Vite ausführen

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

Bei pnpm oder yarn die Befehle anpassen. Aufruf aus der CI ist ebenfalls möglich.

Weiter gehen

Um weiterzugehen, können Sie den visuellen Editor implementieren oder Ihre Inhalte mithilfe des CMS auslagern.