\n\n \n ```\n\n \n \n ```svelte fileName=\"FAQ.svelte\"\n \n\n

\n {item.question}\n
{item.answer}
\n

\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {item.question}\n
{item.answer}
\n

\n );\n };\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n import { For } from \"solid-js\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {(item) => (\n

\n {item.question}\n

{item.answer}

\n

\n )}\n

\n );\n };\n ```\n\n \n \n ```typescript fileName=\"faq.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-faq\",\n template: `\n

\n {{ item.question }}\n
{{ item.answer }}
\n

\n `,\n })\n export class FAQComponent {\n items = useIntlayer(\"faq\");\n }\n ```\n\n \n \n ```javascript fileName=\"faq.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const faq = useIntlayer(\"faq\");\n\n faq.forEach((item) => {\n console.log(item.question);\n console.log(item.answer);\n });\n ```\n\n \n\n\n### Un seul élément par index\n\n```tsx\nconst faq2 = useIntlayer(\"faq\", { item: 2 });\n// → { question: string; answer: string }\n```\n\n### Un seul élément avec une locale explicite\n\n```tsx\nconst faq2Fr = useIntlayer(\"faq\", { item: 2, locale: \"fr\" });\n```\n\n## Cas d'utilisation typiques\n\n- Listes de FAQ (Questions Fréquentes)\n- Grilles de tarifs / offres commercialisables\n- Diapositives de carrousel / slider\n- Instructions étape par étape\n","description":"Utilisez le champ de métadonnées item dans les fichiers de contenu d'Intlayer pour créer des collections ordonnées d'éléments localisés sélectionnables par index au moment de l'exécution.","url":"https://intlayer.org/fr/doc/concept/collections","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Collections, Liste de Contenu, Contenu Dynamique, Intlayer, Internationalisation","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

Création:2026-06-12Dernière mise à jour:2026-06-12

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

"Lancement de la fonctionnalité des collections de dictionnaires"
v9.0.012/06/2026

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

Collections

Une collection est un ensemble de fichiers de contenu qui partagent la même clé de dictionnaire (key) mais déclarent chacun un index d'élément (item) différent. Intlayer les fusionne en une seule liste ordonnée au moment de la compilation.

Déclarer des éléments de collection

Chaque fichier représente un élément. Le champ item correspond à sa position dans la liste (basée sur 1).

faq.1.content.ts

Copier le code

Copier le code dans le presse-papiers

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;

faq.2.content.ts

Copier le code

Copier le code dans le presse-papiers

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

Consommer une collection

Tous les éléments

FAQ.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "react-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "next-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.vue

Copier le code

Copier le code dans le presse-papiers

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

FAQ.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

FAQ.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "preact-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

faq.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-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

faq.js

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

Un seul élément par index

tsx

Copier le code

Copier le code dans le presse-papiers

const faq2 = useIntlayer("faq", { item: 2 });// → { question: string; answer: string }

Un seul élément avec une locale explicite

tsx

Copier le code

Copier le code dans le presse-papiers

const faq2Fr = useIntlayer("faq", { item: 2, locale: "fr" });

Cas d'utilisation typiques

Listes de FAQ (Questions Fréquentes)
Grilles de tarifs / offres commercialisables
Diapositives de carrousel / slider
Instructions étape par étape

Fichier par locale Variantes