Iniziare la dichiarazione del tuo contenuto

Estensioni dei file

Per impostazione predefinita, Intlayer monitora tutti i file con le seguenti estensioni per le dichiarazioni di contenuto:

.content.json
.content.ts
.content.tsx
.content.js
.content.jsx
.content.mjs
.content.mjx
.content.cjs
.content.cjx

L'applicazione cercherà i file che corrispondono al pattern glob ./src/**/*.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} per impostazione predefinita.

Queste estensioni predefinite sono adatte per la maggior parte delle applicazioni. Tuttavia, se hai requisiti specifici, consulta la guida alla personalizzazione delle estensioni di contenuto per istruzioni su come gestirle.

Per un elenco completo delle opzioni di configurazione, visita la documentazione di configurazione.

Dichiarare il tuo contenuto

Crea e gestisci i tuoi dizionari:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";interface Content {  imbricatedContent: {    imbricatedContent2: {      stringContent: string;      numberContent: number;      booleanContent: boolean;      javaScriptContent: string;    };  };  multilingualContent: string;  quantityContent: string;  conditionalContent: string;  externalContent: string;  insertionContent: string;  fileContent: string;  nestedContent: any;  markdownContent: any;  jsxContent: any;}export default {  key: "page",  content: {    imbricatedContent: {      imbricatedContent2: {        stringContent: "Ciao Mondo",        numberContent: 123,        booleanContent: true,        javaScriptContent: `${process.env.NODE_ENV}`,      },    },    multilingualContent: t({      en: "Contenuto in inglese",      "en-GB": "Contenuto in inglese (UK)",      fr: "Contenuto in francese",      es: "Contenuto in spagnolo",    }),    quantityContent: enu({      "<-1": "Meno di meno una macchina",      "-1": "Meno una macchina",      "0": "Nessuna macchina",      "1": "Una macchina",      ">5": "Alcune macchine",      ">19": "Molte macchine",    }),    conditionalContent: cond({      true: "La validazione è abilitata",      false: "La validazione è disabilitata",    }),    nestedContent: nest(      "navbar", // La chiave del dizionario da annidare      "login.button" // [Opzionale] Il percorso del contenuto da annidare    ),    externalContent: fetch("https://example.com").then((res) => res.json())    markdownContent: md("# Esempio di Markdown"),    /*     * Disponibile solo utilizzando `react-intlayer` o `next-intlayer`     */    jsxContent: <h1>Il mio titolo</h1>,  },} satisfies Dictionary<Content>; // [opzionale] Dictionary è generico e ti permette di rafforzare la formattazione del tuo dizionario

Imbricazione delle funzioni

Puoi senza problemi imbricare funzioni in altre.

Esempio:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";const getName = async () => "John Doe";export default {  key: "page",  content: {    // `getIntlayer('page','en').hiMessage` restituisce `['Ciao', ' ', 'John Doe']`    hiMessage: [      t({        en: "Ciao",        fr: "Salut",        es: "Hola",      }),      " ",      getName(),    ],    // Contenuto composito che imbrica condizione, enumerazione e contenuto multilingue    // `getIntlayer('page','en').advancedContent(true)(10) restituisce 'Trovati più elementi'`    advancedContent: cond({      true: enu({        "0": t({          en: "Nessun elemento trovato",          fr: "Aucun élément trouvé",          es: "Ningún elemento encontrado",        }),        "1": t({          en: "Un elemento trovato",          fr: "Un élément trouvé",          es: "Un elemento encontrado",        }),        ">1": t({          en: "Trovati più elementi",          fr: "Plusieurs éléments trouvés",          es: "Se encontraron múltiples elementos",        }),      }),      false: t({        en: "Nessun dato valido disponibile",        fr: "Aucune donnée valide disponible",        es: "No hay datos válidos disponibles",      }),    }),  },} satisfies Dictionary;

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Intlayer CMS Traduzione