AccueilBac à sableShowcaseAppDocBlog
    • Englishanglais
      EN
    • русскийrusse
      RU
    • 日本語japonais
      JA
    • françaisfrançais
      FR
    • 한국어coréen
      KO
    • 中文chinois
      ZH
    • españolespagnol
      ES
    • Deutschallemand
      DE
    • العربيةarabe
      AR
    • italianoitalien
      IT
    • British Englishanglais britannique
      EN-GB
    • portuguêsportugais
      PT
    • हिन्दीhindi
      HI
    • Türkçeturc
      TR
    • polskipolonais
      PL
    • Indonesiaindonésien
      ID
    • Tiếng Việtvietnamien
      VI
    • українськаukrainien
      UK
    /
    Filtrer la documentation par framework
    Alt+←
    Pourquoi Intlayer ?
    Commencer
    Concept
    • Comment Intlayer fonctionne
    • Configuration
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Éditeur visuel
    • CMS
    • Intégration CI/CD
    • TraductionPlurielÉnumérationConditionGenreInsertionFichierImbricationMarkdownHTMLRécupération de fonction
    • Fichier par locale
    • Compilateur
    • Remplissage automatique
    • Tests
    • Optimisation de bundle
    Environnement
    • Next.js 14 et App Router
      Next.js 15
      Next.js sans locale URL
      Next.js et Page Router
      Compiler
    • Tanstack Start Solid
    • Astro et React
      Astro et Svelte
      Astro et Vue
      Astro et Solid
      Astro et Preact
      Astro et Lit
      Astro et Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt et Vue
    • Vite et Solid
    • SvelteKit
    • Vite et Preact
    • Vite et Vanilla JS
    • Vite et Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native et Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx et React
    Plugins
    • JSON
    • gettext (.po)
    Extension VS Code
    Agent
    • Serveur MCP
    • Compétences de l’agent
    Versions
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Poser une question
    1. Documentation
    2. Concept
    3. Déclaration de contenu
    4. Insertion
    Création:2025-03-13Dernière mise à jour:2025-06-29
    Référencez cette doc à votre assistant AI préféré
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

    Historique des versions

    1. "Décoration automatique du contenu d'insertion"
      v8.0.018/01/2026
    2. "Historique initial"
      v5.5.1029/06/2025

    Le contenu de cette page a été traduit à l'aide d'une IA.

    Voir la dernière version du contenu original en anglais
    Modifier cette documentation

    Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

    Lien GitHub de la documentation
    Copier

    Copier le Markdown du doc dans le presse-papiers

    Contenu d'Insertion / Insertion dans Intlayer

    Comment fonctionne l'insertion

    Dans Intlayer, le contenu d'insertion est réalisé grâce à la fonction insertion, qui identifie les champs d'espaces réservés dans une chaîne (comme {{name}} ou {{age}}) pouvant être remplacés dynamiquement à l'exécution. Cette approche vous permet de créer des chaînes flexibles, semblables à des modèles, où des parties spécifiques du contenu sont déterminées par des données fournies par votre application.

    Lorsqu'elle est intégrée avec React Intlayer ou Next Intlayer, il vous suffit de fournir l'objet de données contenant les valeurs pour chaque espace réservé, et Intlayer rendra automatiquement le contenu avec les espaces réservés remplacés.

    Configuration du Contenu d'Insertion

    Pour configurer le contenu d'insertion dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions d'insertion.

    Utilisez la fonction insert pour déclarer explicitement du contenu d'insertion.

    Si la chaîne contient des indicateurs d'insertion courants (comme {{name}}), Intlayer la transformera automatiquement.

    Utilisation du contenu d'insertion avec React Intlayer

    Pour utiliser un contenu d'insertion dans un composant React, importez et utilisez le hook useIntlayer depuis le paquet react-intlayer. Ce hook récupère le contenu pour la clé spécifiée et vous permet de passer un objet qui associe chaque espace réservé dans votre contenu à la valeur que vous souhaitez afficher.

    **/*.tsx
    Copier le code

    Copier le code dans le presse-papiers

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const InsertionComponent: FC = () => {
      const { myInsertion } = useIntlayer("my_key");
    
      return (
        <div>
          <p>
            {
              /* Résultat : "Hello, my name is John and I am 30 years old!" */
              myInsertion({ name: "John", age: "30" })
            }
          </p>
          <p>
            {
              /* Vous pouvez réutiliser la même insertion avec des valeurs différentes */
              myInsertion({ name: "Alice", age: "25" })
            }
          </p>
        </div>
      );
    };
    
    export default InsertionComponent;

    Ressources supplémentaires

    Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

    • Documentation CLI Intlayer
    • Documentation React Intlayer
    • Documentation Next Intlayer

    Ces ressources offrent des informations complémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.

    Genre
    Fichier
    Alt+→

    Dans cette page

      Les discussions sont anonymes et régulièrement analysées pour traiter les problèmes fréquents. N'hésitez pas à partager vos idées de fonctionnalités, vos retours sur la documentation ou tout ce qui concerne Intlayer, nous utilisons ces retours pour construire notre roadmap et améliorer le produit.