\n\n\n```\n\n \n \n\nTo use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

Full Nested Content: {JSON.stringify($content.fullNestedContent)}

\n

Partial Nested Value: {$content.partialNestedContent}

\n

\n```\n\n \n \n\nTo use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst NestComponent: Component = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-nest\",\n template: `\n

\n

\n Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}\n

\n

Partial Nested Value: {{ content().partialNestedContent }}

\n

\n `,\n})\nexport class NestComponent {\n content = useIntlayer(\"key_of_my_second_dictionary\");\n JSON = JSON;\n}\n```\n\n \n \n\nTo use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"key_of_my_second_dictionary\").onChange(\n (newContent) => {\n document.getElementById(\"nested\")!.textContent =\n newContent.partialNestedContent;\n }\n);\n\n// Initial render\ndocument.getElementById(\"nested\")!.textContent = content.partialNestedContent;\n```\n\n \n\n\n## Utilisation de l'imbrication avec React Intlayer\n\n\n \n\nTo use nested content in a React component, leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\n\"use client\";\n\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"next-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```vue fileName=\"**/*.vue\"\n\n\n\n```\n\n \n \n\nTo use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

Full Nested Content: {JSON.stringify($content.fullNestedContent)}

\n

Partial Nested Value: {$content.partialNestedContent}

\n

\n```\n\n \n \n\nTo use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst NestComponent: Component = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-nest\",\n template: `\n

\n

\n Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}\n

\n

Partial Nested Value: {{ content().partialNestedContent }}

\n

\n `,\n})\nexport class NestComponent {\n content = useIntlayer(\"key_of_my_second_dictionary\");\n JSON = JSON;\n}\n```\n\n \n \n\nTo use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"key_of_my_second_dictionary\").onChange(\n (newContent) => {\n document.getElementById(\"nested\")!.textContent =\n newContent.partialNestedContent;\n }\n);\n\n// Initial render\ndocument.getElementById(\"nested\")!.textContent = content.partialNestedContent;\n```\n\n \n\n## Ressources supplémentaires\n\nPour plus d'informations détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :\n\n- [Documentation CLI Intlayer](/fr/doc/concept/cli)\n- [Documentation React Intlayer](/fr/doc/environment/create-react-app)\n- [Documentation Next Intlayer](/fr/doc/environment/nextjs/15)\n\nCes ressources fournissent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et avec divers frameworks.\n","description":"Découvrez comment utiliser l’imbrication de contenu dans Intlayer pour réutiliser et structurer efficacement votre contenu multilingue. Suivez cette documentation pour implémenter l’imbrication facilement dans votre projet.","url":"https://intlayer.org/fr/doc/concept/content/nesting","datePublished":"2025-02-07","dateModified":"2025-06-29","keywords":"Nesting, Réutilisation de contenu, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

Création:2025-02-07Derniè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

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

Imbrication / Référencement de Sous-Contenu

Comment fonctionne l'imbrication

Dans Intlayer, l'imbrication est réalisée via la fonction nest, qui vous permet de référencer et de réutiliser du contenu provenant d'un autre dictionnaire. Au lieu de dupliquer le contenu, vous pouvez pointer vers un module de contenu existant en utilisant sa clé.

Configuration de l'imbrication

To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copier le code

Copier le code dans le presse-papiers

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const NestComponent: Component = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Copier le code

Copier le code dans le presse-papiers

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copier le code

Copier le code dans le presse-papiers

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
  document.getElementById("nested")!.textContent =
    newContent.partialNestedContent;
}
);

// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;

Utilisation de l'imbrication avec React Intlayer

To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copier le code

Copier le code dans le presse-papiers

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const NestComponent: Component = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Copier le code

Copier le code dans le presse-papiers

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copier le code

Copier le code dans le presse-papiers

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
  document.getElementById("nested")!.textContent =
    newContent.partialNestedContent;
}
);

// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;

Ressources supplémentaires

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

Ces ressources fournissent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et avec divers frameworks.

Fichier Markdown