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
    4. Inserimento
    Creazione:2025-03-13Ultimo aggiornamento:2025-06-29
    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. "Decorazione automatica del contenuto di inserimento"
      v8.0.018/01/2026
    2. "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

    Contenuto di Inserimento / Inserimento in Intlayer

    Come Funziona l'Inserimento

    In Intlayer, il contenuto di inserimento viene realizzato tramite la funzione insertion, che identifica i campi segnaposto in una stringa (come {{name}} o {{age}}) che possono essere sostituiti dinamicamente a runtime. Questo approccio ti permette di creare stringhe flessibili, simili a template, dove parti specifiche del contenuto sono determinate dai dati forniti dalla tua applicazione.

    Quando integrato con React Intlayer o Next Intlayer, puoi semplicemente fornire l'oggetto dati contenente i valori per ogni segnaposto, e Intlayer renderizzerà automaticamente il contenuto con i segnaposto sostituiti.

    Configurare il Contenuto di Inserimento

    Per configurare il contenuto di inserimento nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni di inserimento.

    Usa la funzione insert per dichiarare esplicitamente il contenuto dell'inserimento.

    Se la stringa contiene indicatori di inserimento comuni (come {{name}}), Intlayer la trasformerà automaticamente.

    Utilizzo del contenuto di inserimento con React Intlayer

    Per utilizzare il contenuto di inserimento all'interno di un componente React, importa e usa l'hook useIntlayer dal pacchetto react-intlayer. Questo hook recupera il contenuto per la chiave specificata e ti permette di passare un oggetto che mappa ogni segnaposto nel tuo contenuto al valore che desideri visualizzare.

    **/*.tsx
    Copiare il codice

    Copiare il codice nella clipboard

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const InsertionComponent: FC = () => {
      const { myInsertion } = useIntlayer("my_key");
    
      return (
        <div>
          <p>
            {
              /* Output: "Ciao, mi chiamo John e ho 30 anni!" */
              myInsertion({ name: "John", age: "30" })
            }
          </p>
          <p>
            {
              /* Puoi riutilizzare lo stesso inserimento con valori diversi */
              myInsertion({ name: "Alice", age: "25" })
            }
          </p>
        </div>
      );
    };
    
    export default InsertionComponent;

    Risorse Aggiuntive

    Per informazioni più dettagliate sulla configurazione e l'uso, consulta le seguenti risorse:

    • Documentazione CLI di Intlayer
    • Documentazione React Intlayer
    • Documentazione Next Intlayer

    Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'uso di Intlayer in diversi ambienti e framework.

    Genere
    File
    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.