Autor:

Erstellung:2026-06-12Letzte Aktualisierung:2026-06-12

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-AssistentenChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Versionshistorie

"Veröffentlichung der Funktion für Sammlungswörterbücher"
v9.0.012.6.2026

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Diese Dokumentation bearbeiten

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

Sammlungen

Eine Sammlung (Collection) ist ein Satz von Inhaltsdateien, die denselben Wörterbuchschlüssel (key) teilen, aber jeweils einen anderen item-Index deklarieren. Intlayer führt diese zur Build-Zeit zu einer einzigen geordneten Liste zusammen.

Deklarieren von Sammlungselementen

Jede Datei repräsentiert ein Element. Das Feld item bestimmt seine Position in der Liste (1-basiert).

faq.1.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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;

Nutzen einer Sammlung

Alle Elemente

FAQ.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "vanilla-intlayer";

const faq = useIntlayer("faq");

faq.forEach((item) => {
console.log(item.question);
console.log(item.answer);
});

Einzelnes Element nach Index

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Einzelnes Element mit explizitem Locale

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const faq2De = useIntlayer("faq", { item: 2, locale: "de" });

Typische Anwendungsfälle

FAQ-Listen
Tarife / Preisstufen
Karussell- / Slider-Folien
Schritt-für-Schritt-Anleitungen

Datei pro Locale Varianten