HomeAmbiente di testVetrinaAppDocBlog
    • Englishinglese
      EN
    • русскийrusso
      RU
    • 日本語giapponese
      JA
    • françaisfrancese
      FR
    • 한국어coreano
      KO
    • 中文cinese
      ZH
    • españolspagnolo
      ES
    • Deutschtedesco
      DE
    • العربيةarabo
      AR
    • italianoitaliano
      IT
    • British Englishinglese britannico
      EN-GB
    • portuguêsportoghese
      PT
    • हिन्दीhindi
      HI
    • Türkçeturco
      TR
    • polskipolacco
      PL
    • Indonesiaindonesiano
      ID
    • Tiếng Việtvietnamita
      VI
    • українськаucraino
      UK
    /
    Filtra la documentazione per framework
    Alt+←
    Perché Intlayer?
    Iniziare
    Concetto
    • Come funziona Intlayer
    • Configurazione
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Editor visuale
    • CMS
    • Integrazione CI/CD
    • TraduzionePluraleEnumerazioneCondizioneGenereInserimentoFileAnnidamentoMarkdownHTMLRecupero funzione
    • File per locale
    • Compilatore
    • Compilazione automatica
    • Test
    • Ottimizzazione del bundle
    Ambiente
    • Next.js 14 e App Router
      Next.js 15
      Next.js senza locale URL
      Next.js e Page Router
      Compiler
    • Tanstack Start Solid
    • Astro e React
      Astro e Svelte
      Astro e Vue
      Astro e Solid
      Astro e Preact
      Astro e Lit
      Astro e Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt e Vue
    • Vite e Solid
    • SvelteKit
    • Vite e Preact
    • Vite e Vanilla JS
    • Vite e Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native e Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx e React
    Plugins
    • JSON
    • gettext (.po)
    Estensione VS Code
    Agente
    • Server MCP
    • Abilità dell’agente
    Versioni
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Fai una domanda
    1. Documentation
    2. Concetto
    3. Dichiarazione dei contenuti
    Creazione:2025-02-07Ultimo aggiornamento:2026-05-12
    Riferimento a questa documentazione al tuo assistente AI preferito
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

    Cronologia delle versioni

    1. "Aggiunto supporto per i formati di file YAML e Markdown"
      v8.10.019/05/2026
    2. "Aggiungi il tipo di nodo di contenuto `plural`"
      v8.9.012/05/2026
    3. "Aggiunto tipo di nodo contenuto `html`"
      v8.0.028/01/2026
    4. "Rename `live` import mode to `fetch` to better describe the underlying mechanism."
      v8.0.024/01/2026
    5. "Aggiunte opzioni dizionario `location` e `schema`"
      v8.0.018/01/2026
    6. "Aggiunto supporto per i formati ICU e i18next"
      v7.5.013/12/2025
    7. "Aggiunta documentazione dei campi"
      v6.0.020/09/2025
    8. "Inizio cronologia"
      v5.5.1029/06/2025

    Il contenuto di questa pagina è stato tradotto con un'IA.

    Vedi l'ultima versione del contenuto originale in inglese
    Modifica questa documentazione

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

    Collegamento GitHub alla documentazione
    Copia

    Copia il Markdown del documento nella porta-documenti

    File di Contenuto

    www.youtube.com

    Cos'è un File di Contenuto?

    Un file di contenuto in Intlayer è un file che contiene definizioni di dizionari. Questi file dichiarano il contenuto testuale, le traduzioni e le risorse della tua applicazione. I file di contenuto vengono elaborati da Intlayer per generare dizionari.

    I dizionari saranno il risultato finale che la tua applicazione importerà utilizzando l'hook useIntlayer.

    Concetti Chiave

    Dizionario

    Un dizionario è una raccolta strutturata di contenuti organizzati per chiavi. Ogni dizionario contiene:

    • Chiave: Un identificatore univoco per il dizionario
    • Contenuto: I valori effettivi del contenuto (testo, numeri, oggetti, ecc.)
    • Metadati: Informazioni aggiuntive come titolo, descrizione, tag, ecc.

    File di Contenuto

    Esempio di file di contenuto:

    src/example.content.tsx
    Copiare il codice

    Copiare il codice nella clipboard

    import { type ReactNode } from "react";
    import {
      t,
      enu,
      plural,
      cond,
      nest,
      md,
      insert,
      file,
      type Dictionary,
    } from "intlayer";
    
    interface Content {
      imbricatedContent: {
        imbricatedContent2: {
          stringContent: string;
          numberContent: number;
          booleanContent: boolean;
          javaScriptContent: string;
        };
      };
      multilingualContent: string;
      quantityContent: string;
      pluralContent: string;
      conditionalContent: string;
      markdownContent: never;
      htmlContent: never;
      externalContent: string;
      insertionContent: string;
      nestedContent: string;
      fileContent: string;
      jsxContent: ReactNode;
    }
    
    export default {
      key: "page",
      content: {
        imbricatedContent: {
          imbricatedContent2: {
            stringContent: "Ciao Mondo",
            numberContent: 123,
            booleanContent: true,
            javaScriptContent: `${process.env.NODE_ENV}`,
          },
        },
        multilingualContent: t({
          it: "Contenuto in inglese",
          en: "English content",
          "en-GB": "English content (UK)",
          fr: "French content",
          es: "Spanish content",
        }),
        quantityContent: enu({
          "<-1": "Meno di meno una macchina",
          "-1": "Meno una macchina",
          "0": "Nessuna macchina",
          "1": "Una macchina",
          ">5": "Alcune macchine",
          ">19": "Molte macchine",
        }),
        pluralContent: plural({
          one: "One car",
          other: "{{count}} cars",
        }),
        conditionalContent: cond({
          true: "La validazione è abilitata",
          false: "La validazione è disabilitata",
        }),
        insertionContent: insert("Ciao {{name}}!"),
        nestedContent: nest(
          "navbar", // La chiave del dizionario da annidare
          "login.button" // [Opzionale] Il percorso del contenuto da annidare
        ),
        fileContent: file("./path/to/file.txt"),
        externalContent: fetch("https://example.com").then((res) => res.json()),
        markdownContent: md("# Esempio di Markdown"),
        htmlContent: html("<p>Hello <strong>World</strong></p>"),
    
        /*
         * Disponibile solo usando `react-intlayer` o `next-intlayer`
         */
        jsxContent: <h1>Il mio titolo</h1>,
      },
    } satisfies Dictionary<Content>; // [opzionale] Dictionary è generico e ti permette di rafforzare il formato del tuo dizionario

    Nodi di Contenuto

    I nodi di contenuto sono i mattoni fondamentali del contenuto del dizionario. Possono essere:

    • Valori primitivi: stringhe, numeri, booleani, null, undefined
    • Nodi tipizzati: Tipi di contenuto speciali come traduzioni, condizioni, markdown, ecc.
    • Funzioni: Contenuto dinamico che può essere valutato a runtime vedi Recupero Funzioni
    • Contenuto Plurale: Vedere Contenuto Plurale Vedere Contenuto Plurale
    • Contenuto annidato: Riferimenti ad altri dizionari

    Tipi di Contenuto

    Intlayer supporta vari tipi di contenuto tramite nodi tipizzati:

    • Contenuto di Traduzione: Testo multilingue con valori specifici per locale vedi Contenuto di Traduzione
    • Contenuto Condizionale: Contenuto condizionale basato su espressioni booleane vedi Contenuto Condizionale
    • Contenuto di Enumerazione: Contenuto che varia in base a valori enumerati vedi Contenuto di Enumerazione
    • Contenuto di Inserimento: Contenuto che può essere inserito in altri contenuti vedi Contenuto di Inserimento
    • Contenuto Markdown: Contenuto di testo arricchito in formato Markdown vedi Contenuto Markdown
    • Contenuto HTML: Contenuto HTML ricco con componenti personalizzati opzionali vedi Contenuto HTML
    • Contenuto Annidato: Riferimenti ad altri dizionari vedi Contenuto Annidato
    • Contenuto di Genere: Contenuto che varia in base al genere vedi Contenuto di Genere
    • Contenuto File: Riferimenti a file esterni vedi Contenuto File

    Struttura del Dizionario

    Un dizionario in Intlayer è definito dal tipo Dictionary e contiene diverse proprietà che ne controllano il comportamento:

    Proprietà Obbligatorie

    key (stringa)

    L'identificatore per il dizionario. Se più dizionari hanno la stessa chiave, Intlayer li unirà automaticamente.

    Usa la convenzione di denominazione kebab-case (ad esempio, "about-page-meta").

    Content (stringa | numero | booleano | oggetto | array | funzione)

    La proprietà content contiene i dati effettivi del dizionario e supporta:

    • Valori primitivi: stringhe, numeri, booleani, null, undefined
    • Nodi tipizzati: Tipi di contenuto speciali usando le funzioni helper di Intlayer
    • Oggetti annidati: Strutture dati complesse
    • Array: Collezioni di contenuti
    • Funzioni: Valutazione dinamica del contenuto

    Proprietà Opzionali

    title (stringa)

    Titolo leggibile dall'utente per il dizionario che aiuta a identificarlo negli editor e nei sistemi CMS. Questo è particolarmente utile quando si gestiscono grandi quantità di dizionari o quando si lavora con interfacce di gestione dei contenuti.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    {  key: "about-page-meta",  title: "Metadati della pagina About",  content: { /* ... */ }}

    description (stringa)

    Descrizione dettagliata che spiega lo scopo del dizionario, le linee guida per l'uso e qualsiasi considerazione speciale. Questa descrizione viene anche utilizzata come contesto per la generazione di traduzioni assistita da AI, risultando preziosa per mantenere la qualità e la coerenza delle traduzioni.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    {  key: "about-page-meta",  description: [    "Questo dizionario gestisce i metadati della pagina About",    "Considera le buone pratiche per la SEO:",    "- Il titolo dovrebbe essere tra 50 e 60 caratteri",    "- La descrizione dovrebbe essere tra 150 e 160 caratteri",  ].join('\n'),  content: { /* ... */ }}

    tags (string[])

    Array di stringhe per categorizzare e organizzare i dizionari. I tag forniscono un contesto aggiuntivo e possono essere utilizzati per filtrare, cercare o organizzare i dizionari negli editor e nei sistemi CMS.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}

    format ('intlayer' | 'icu' | 'i18next')

    Specifica il formattatore da utilizzare per il contenuto del dizionario. Ciò consente di utilizzare diverse sintassi di formattazione dei messaggi.

    • 'intlayer': Il formattatore Intlayer predefinito.
    • 'icu': Utilizza la formattazione dei messaggi ICU.
    • 'i18next': Utilizza la formattazione dei messaggi i18next.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}

    locale (LocalesValues)

    Trasforma il dizionario in un dizionario per locale in cui ogni campo dichiarato nel contenuto sarà automaticamente trasformato in un nodo di traduzione. Quando questa proprietà è impostata:

    • Il dizionario è trattato come un dizionario a singola lingua
    • Ogni campo diventa un nodo di traduzione per quella specifica lingua
    • NON dovresti usare nodi di traduzione (t()) nel contenuto quando usi questa proprietà
    • Se mancante, il dizionario sarà trattato come un dizionario multilingue
    Vedi Dichiarazione di contenuti per lingua in Intlayer per maggiori informazioni.

    Esempio:

    json
    Copiare il codice

    Copiare il codice nella clipboard

    // Dizionario per lingua{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // Questo diventa un nodo di traduzione per 'en'    "description": "Learn more about our company"  }}

    schema (SchemaKeys)

    Lo schema del contenuto del dizionario. Se impostato, il contenuto sarà convalidato rispetto a questo schema. Questo ti consente di imporre una struttura specifica per il contenuto del tuo dizionario utilizzando schemi di convalida personalizzati definiti nella tua configurazione Intlayer.

    Esempio:

    intlayer.config.ts
    Copiare il codice

    Copiare il codice nella clipboard

    import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
    src/example.content.ts
    Copiare il codice

    Copiare il codice nella clipboard

    import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;

    location ('local' | 'remote' | 'hybrid' | string)

    Indica la posizione del dizionario e controlla come si sincronizza con il CMS:

    • 'local': Il dizionario è gestito solo localmente. Non verrà inviato al CMS remoto. Usa questo per contenuti che devono rimanere nella tua codebase.
    • 'remote': Il dizionario è gestito solo remotamente. Una volta inviato al CMS, verrà scollegato dal file locale. Al momento del caricamento del contenuto, il dizionario remoto verrà recuperato dal CMS. Un file .content con posizione remote verrà ignorato dopo l'invio iniziale.
    • 'hybrid': Il dizionario è gestito sia localmente che remotamente. Una volta inviato al CMS, rimarrà sincronizzato, le modifiche dal file locale vengono inviate al CMS, e le modifiche remote possono essere recuperate nel file locale.
    • string (es. 'plugin'): Il dizionario è gestito da un plugin o da una fonte personalizzata. Quando provi a inviarlo, il sistema ti chiederà cosa fare.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    {  key: "about-page",  location: "local", // Il contenuto rimane solo nella tua codebase  content: {    title: "About Us"  }}

    autoFill (AutoFill)

    Istruzioni per il riempimento automatico del contenuto del dizionario da fonti esterne. Questo può essere configurato globalmente in intlayer.config.ts o per singolo dizionario. Supporta più formati:

    • true: Abilita il riempimento automatico per tutte le localizzazioni
    • string: Percorso a un singolo file o modello con variabili
    • object: Percorsi file per locale

    Esempi:

    json
    Copiare il codice

    Copiare il codice nella clipboard

    // Abilita per tutte le localizzazioni{  "autoFill": true}// File singolo{  "autoFill": "./translations/aboutPage.content.json"}// Modello con variabili{  "autoFill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Configurazione dettagliata per locale{  "autoFill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}

    Variabili disponibili:

    • {{locale}} – Codice della localizzazione (es. fr, es)
    • {{fileName}} – Nome del file (es. example)
    • {{key}} – Chiave del dizionario (es. example)
    Vedi Configurazione Auto-Fill in Intlayer per maggiori informazioni.
    priority (numero)

    Indica la priorità del dizionario per la risoluzione dei conflitti. Quando più dizionari hanno la stessa chiave, il dizionario con il numero di priorità più alto sovrascriverà gli altri. Questo è utile per gestire gerarchie di contenuti e sovrascritture.

    Esempio:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    // Dizionario base{  key: "welcome-message",  priority: 1,  content: { message: "Benvenuto!" }}// Dizionario di override{  key: "welcome-message",  priority: 10,  content: { message: "Benvenuto nel nostro servizio premium!" }}// Questo sovrascriverà il dizionario base

    Proprietà CMS

    version (stringa)

    Identificatore di versione per dizionari remoti. Aiuta a tracciare quale versione del dizionario è attualmente in uso, particolarmente utile quando si lavora con sistemi di gestione contenuti remoti.

    importMode ('static' | 'dynamic' | 'fetch')

    La modalità di importazione determina come il tuo dizionario viene importato nella tua applicazione.

    • 'static': Il dizionario viene importato staticamente in fase di build. Questa è la modalità predefinita.
    • 'dynamic': Il dizionario viene importato dinamicamente a runtime utilizzando l'API di suspense.
    • 'fetch': Il dizionario viene importato dinamicamente utilizzando l'API di sincronizzazione live.

    Se impostato, questa proprietà sovrascrive il importMode globale definito in the dictionaryproperty ofintlayer.config.ts``.

    Proprietà di Sistema (Generato automaticamente)

    Queste proprietà sono generate automaticamente da Intlayer e non devono essere modificate manualmente:

    $schema (stringa)

    Schema JSON utilizzato per la validazione della struttura del dizionario. Aggiunto automaticamente da Intlayer per garantire l'integrità del dizionario.

    id (stringa)

    Per i dizionari remoti, questo è l'identificatore univoco del dizionario nel server remoto. Utilizzato per il recupero e la gestione dei contenuti remoti.

    localId (LocalDictionaryId)

    Identificatore univoco per i dizionari locali. Generato automaticamente da Intlayer per aiutare a identificare il dizionario e determinare se è locale o remoto, insieme alla sua posizione.

    localIds (LocalDictionaryId[])

    Per i dizionari uniti, questo array contiene gli ID di tutti i dizionari che sono stati uniti insieme. Utile per tracciare la fonte del contenuto unito.

    filePath (string)

    Il percorso del file del dizionario locale, che indica da quale file .content è stato generato il dizionario. Aiuta nel debug e nel tracciamento della fonte.

    versions (string[])

    Per i dizionari remoti, questo array contiene tutte le versioni disponibili del dizionario. Aiuta a tracciare quali versioni sono disponibili per l'uso.

    autoFilled (true)

    Indica se il dizionario è stato compilato automaticamente da fonti esterne. In caso di conflitti, i dizionari base sovrascriveranno quelli compilati automaticamente.

    location ('distant' | 'locale')

    Indica la posizione del dizionario:

    • 'locale': Dizionario locale (da file di contenuto)
    • 'distant': Dizionario remoto (da fonte esterna)

    Tipi di Nodi di Contenuto

    Intlayer fornisce diversi tipi specializzati di nodi di contenuto che estendono i valori primitivi di base:

    Contenuto di Traduzione (t)

    Contenuto multilingue che varia in base alla localizzazione:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
    Vedere Contenuto di Traduzione (t) Doc per ulteriori informazioni.

    Contenuto Condizionale (cond)

    Contenuto che cambia in base a condizioni booleane:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { cond } from "intlayer";conditionalContent: cond({  true: "User is logged in",  false: "Please log in to continue",});
    Vedere Contenuto Condizionale (cond) Doc per ulteriori informazioni.

    Contenuto Enumerato (enu)

    Contenuto che varia in base a valori enumerati:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { enu } from "intlayer";statusContent: enu({  pending: "La tua richiesta è in sospeso",  approved: "La tua richiesta è stata approvata",  rejected: "La tua richiesta è stata rifiutata",});
    Vedere Contenuto Enumerato (enu) Doc per ulteriori informazioni.

    Contenuto Plurale (plural)

    Contenuto che varia in base alle regole del plurale:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
    Vedere Contenuto Plurale Doc per ulteriori informazioni.

    Contenuto di Inserimento (insert)

    Contenuto che può essere inserito in altri contenuti:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { insert } from "intlayer";insertionContent: insert("Questo testo può essere inserito ovunque");
    Vedere Contenuto di Inserimento (insert) Doc per ulteriori informazioni.

    Contenuto Nidificato (nest)

    Riferimenti ad altri dizionari:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { nest } from "intlayer";nestedContent: nest("about-page");
    Vedere Contenuto Nidificato (nest) Doc per ulteriori informazioni.

    Contenuto Markdown (md)

    Contenuto di testo ricco in formato Markdown:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { md } from "intlayer";markdownContent: md(  "# Benvenuto\n\nQuesto è un testo in **grassetto** con [link](https://example.com)");
    Vedere Contenuto Markdown (md) Doc per ulteriori informazioni.

    Contenuto HTML (html)

    Contenuto HTML ricco che può usare tag standard o componenti personalizzati:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { html, file, t } from "intlayer";// HTML inlinehtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML per locale da file esternilocalizedHtmlContent: t({  en: html(file("./content.en.html")),  it: html(file("./content.it.html")),});
    Vedere Contenuto HTML (html) Doc per ulteriori informazioni.

    Contenuto per Genere (gender)

    Contenuto che varia in base al genere:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { gender } from "intlayer";genderContent: gender({  male: "Lui è uno sviluppatore",  female: "Lei è una sviluppatrice",  other: "Loro sono sviluppatori",});
    Vedere Contenuto per Genere (gender) Doc per ulteriori informazioni.

    Contenuto da File (file)

    Riferimenti a file esterni:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    import { file } from "intlayer";fileContent: file("./path/to/content.txt");
    Vedere Contenuto da File (file) Doc per ulteriori informazioni.

    Creazione di File di Contenuto

    Struttura Base di un File di Contenuto

    Un file di contenuto esporta un oggetto di default che soddisfa il tipo Dictionary:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Contenuto della Pagina di Benvenuto",  description:    "Contenuto per la pagina principale di benvenuto, inclusa la sezione hero e le funzionalità",  tags: ["pagina", "benvenuto", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          it: "Facile da Usare",          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          it: "Interfaccia intuitiva per tutti i livelli di abilità",          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;

    File di Contenuto JSON

    Puoi anche creare file di contenuto in formato JSON:

    json
    Copiare il codice

    Copiare il codice nella clipboard

    {  "key": "welcome-page",  "title": "Contenuto della Pagina di Benvenuto",  "description": "Contenuto per la pagina principale di benvenuto",  "tags": ["pagina", "benvenuto"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Benvenuto sulla nostra piattaforma",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Crea applicazioni straordinarie con facilità",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    File di Contenuto Markdown

    markdown
    Copiare il codice

    Copiare il codice nella clipboard

    ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease

    File di Contenuto YAML

    yaml
    Copiare il codice

    Copiare il codice nella clipboard

    key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease

    File di Contenuto per Locale

    Per dizionari per locale, specifica la proprietà locale:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    // welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Benvenuto sulla nostra piattaforma",      subtitle: "Crea applicazioni straordinarie con facilità",    },  },} satisfies Dictionary;
    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;

    Estensioni dei File di Contenuto

    Intlayer consente di personalizzare le estensioni per i file di dichiarazione del contenuto. Questa personalizzazione offre flessibilità nella gestione di progetti su larga scala e aiuta a evitare conflitti con altri moduli.

    Estensioni Predefinite

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

    • .content.json
    • .content.json5
    • .content.jsonc
    • .content.ts
    • .content.tsx
    • .content.js
    • .content.jsx
    • .content.mjs
    • .content.mjx
    • .content.cjs
    • .content.cjx
    • .content.md
    • .content.mdx
    • .content.yaml
    • .content.yml

    Queste estensioni predefinite sono adatte alla maggior parte delle applicazioni. Tuttavia, quando si hanno esigenze specifiche, è possibile definire estensioni personalizzate per semplificare il processo di build e ridurre il rischio di conflitti con altri componenti.

    Per personalizzare le estensioni dei file che Intlayer utilizza per identificare i file di dichiarazione dei contenuti, è possibile specificarle nel file di configurazione di Intlayer. Questo approccio è utile per progetti su larga scala in cui limitare l'ambito del processo di watch migliora le prestazioni della build.

    Concetti Avanzati

    Fusione dei Dizionari

    Quando più dizionari hanno la stessa chiave, Intlayer li unisce automaticamente. Il comportamento della fusione dipende da diversi fattori:

    • Priorità: I dizionari con valori di priority più alti sovrascrivono quelli con valori più bassi
    • Auto-fill vs Base: I dizionari base sovrascrivono i dizionari auto-compilati
    • Posizione: I dizionari locali sovrascrivono i dizionari remoti (quando le priorità sono uguali)

    Sicurezza dei Tipi

    Intlayer fornisce pieno supporto TypeScript per i file di contenuto:

    typescript
    Copiare il codice

    Copiare il codice nella clipboard

    // Definisci il tipo del tuo contenutointerface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Usalo nel tuo dizionarioexport default {  key: "welcome-page",  content: {    // TypeScript fornirà completamento automatico e controllo dei tipi    hero: {      title: "Benvenuto",      subtitle: "Crea app straordinarie",      cta: "Inizia ora",    },  },} satisfies Dictionary<WelcomePageContent>;

    Imbricazione di Nodi

    Puoi senza problemi imbricare funzioni dentro altre funzioni.

    Esempio :

    src/example.content.tsx
    Copiare il codice

    Copiare il codice nella clipboard

    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 `['Hi', ' ', 'John Doe']`
        hiMessage: [
          t({
            en: "Hi",
            fr: "Salut",
            es: "Hola",
          }),
          " ",
          getName(),
        ],
        // Contenuto composito che imbrica condizione, enumerazione e contenuto multilingue
        // `getIntlayer('page','en').advancedContent(true)(10)` restituisce 'Multiple items found'
        advancedContent: cond({
          true: enu({
            "0": t({
              en: "No items found",
              fr: "Aucun article trouvé",
              es: "No se encontraron artículos",
            }),
            "1": t({
              en: "One item found",
              fr: "Un article trouvé",
              es: "Se encontró un artículo",
            }),
            ">1": t({
              en: "Multiple items found",
              fr: "Plusieurs articles trouvés",
              es: "Se encontraron múltiples artículos",
            }),
          }),
          false: t({
            en: "No valid data available",
            fr: "Aucune donnée valide disponible",
            es: "No hay datos válidos disponibles",
          }),
        }),
      },
    } satisfies Dictionary;

    Best Practices

    1. Convenzioni di denominazione:

      • Usa il kebab-case per le chiavi del dizionario ("about-page-meta")
      • Raggruppa i contenuti correlati sotto lo stesso prefisso di chiave
    2. Organizzazione dei contenuti:

      • Mantieni insieme i contenuti correlati nello stesso dizionario
      • Usa oggetti annidati per organizzare strutture di contenuto complesse
      • Sfrutta i tag per la categorizzazione
      • Usa autoFill per compilare automaticamente le traduzioni mancanti
    3. Prestazioni:

      • Regola la configurazione dei contenuti per limitare l'ambito dei file monitorati
      • Usa dizionari live solo quando sono necessari aggiornamenti in tempo reale (ad esempio A/B testing, ecc.)
      • Assicurati che il plugin di trasformazione alla build (@intlayer/swc o @intlayer/babel) sia abilitato per ottimizzare il dizionario durante la build
    Integrazione CI/CD
    Traduzione
    Alt+→

    In questa pagina

      Le discussioni sono anonime e vengono regolarmente esaminate per affrontare problemi comuni. Sentiti libero di condividere idee per nuove funzionalità, feedback sulla documentazione o qualsiasi cosa relativa a Intlayer, utilizziamo questi input per definire la nostra roadmap e migliorare il prodotto.

      {  key: "about-page-meta",  title: "Metadati della pagina About",  content: { /* ... */ }}
      {  key: "about-page-meta",  description: [    "Questo dizionario gestisce i metadati della pagina About",    "Considera le buone pratiche per la SEO:",    "- Il titolo dovrebbe essere tra 50 e 60 caratteri",    "- La descrizione dovrebbe essere tra 150 e 160 caratteri",  ].join('\n'),  content: { /* ... */ }}
      {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}
      {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}
      // Dizionario per lingua{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // Questo diventa un nodo di traduzione per 'en'    "description": "Learn more about our company"  }}
      import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
      import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;
      {  key: "about-page",  location: "local", // Il contenuto rimane solo nella tua codebase  content: {    title: "About Us"  }}
      // Abilita per tutte le localizzazioni{  "autoFill": true}// File singolo{  "autoFill": "./translations/aboutPage.content.json"}// Modello con variabili{  "autoFill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Configurazione dettagliata per locale{  "autoFill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}
      // Dizionario base{  key: "welcome-message",  priority: 1,  content: { message: "Benvenuto!" }}// Dizionario di override{  key: "welcome-message",  priority: 10,  content: { message: "Benvenuto nel nostro servizio premium!" }}// Questo sovrascriverà il dizionario base
      import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
      import { cond } from "intlayer";conditionalContent: cond({  true: "User is logged in",  false: "Please log in to continue",});
      import { enu } from "intlayer";statusContent: enu({  pending: "La tua richiesta è in sospeso",  approved: "La tua richiesta è stata approvata",  rejected: "La tua richiesta è stata rifiutata",});
      import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
      import { insert } from "intlayer";insertionContent: insert("Questo testo può essere inserito ovunque");
      import { nest } from "intlayer";nestedContent: nest("about-page");
      import { md } from "intlayer";markdownContent: md(  "# Benvenuto\n\nQuesto è un testo in **grassetto** con [link](https://example.com)");
      import { html, file, t } from "intlayer";// HTML inlinehtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML per locale da file esternilocalizedHtmlContent: t({  en: html(file("./content.en.html")),  it: html(file("./content.it.html")),});
      import { gender } from "intlayer";genderContent: gender({  male: "Lui è uno sviluppatore",  female: "Lei è una sviluppatrice",  other: "Loro sono sviluppatori",});
      import { file } from "intlayer";fileContent: file("./path/to/content.txt");
      // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Contenuto della Pagina di Benvenuto",  description:    "Contenuto per la pagina principale di benvenuto, inclusa la sezione hero e le funzionalità",  tags: ["pagina", "benvenuto", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          it: "Facile da Usare",          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          it: "Interfaccia intuitiva per tutti i livelli di abilità",          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;
      {  "key": "welcome-page",  "title": "Contenuto della Pagina di Benvenuto",  "description": "Contenuto per la pagina principale di benvenuto",  "tags": ["pagina", "benvenuto"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Benvenuto sulla nostra piattaforma",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Crea applicazioni straordinarie con facilità",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease
      key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease
      // welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Benvenuto sulla nostra piattaforma",      subtitle: "Crea applicazioni straordinarie con facilità",    },  },} satisfies Dictionary;
      // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;
      // Definisci il tipo del tuo contenutointerface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Usalo nel tuo dizionarioexport default {  key: "welcome-page",  content: {    // TypeScript fornirà completamento automatico e controllo dei tipi    hero: {      title: "Benvenuto",      subtitle: "Crea app straordinarie",      cta: "Inizia ora",    },  },} satisfies Dictionary<WelcomePageContent>;