Một bộ sưu tập (collection) là một tập hợp các tệp nội dung chia sẻ cùng một khóa từ điển (key) nhưng mỗi tệp khai báo một chỉ mục mục (item) khác nhau. Intlayer hợp nhất chúng thành một danh sách có thứ tự duy nhất tại thời điểm build.

Khai báo các mục trong bộ sưu tập

Mỗi tệp đại diện cho một mục. Trường item là vị trí của nó trong danh sách (bắt đầu bằng 1).

faq.1.content.ts

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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;

Sử dụng bộ sưu tập

Tất cả các mục

FAQ.tsx

Sao chép mã

Sao chép mã vào clipboard

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>  );};

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

Sao chép mã

Sao chép mã vào clipboard

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>  );};

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

Sao chép mã

Sao chép mã vào clipboard

<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>

<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

Sao chép mã

Sao chép mã vào clipboard

<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>

<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

Sao chép mã

Sao chép mã vào clipboard

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>  );};

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

Sao chép mã

Sao chép mã vào clipboard

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>  );};

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

Sao chép mã

Sao chép mã vào clipboard

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");}

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Mục đơn theo chỉ mục (index)

tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

Mục đơn với ngôn ngữ (locale) rõ ràng

tsx

Sao chép mã

Sao chép mã vào clipboard

const faq2Vi = useIntlayer("faq", { item: 2, locale: "vi" });

const faq2Vi = useIntlayer("faq", { item: 2, locale: "vi" });

Các trường hợp sử dụng điển hình

Danh sách Câu hỏi thường gặp (FAQ)
Các gói định giá
Các slide trình chiếu / carousel
Hướng dẫn từng bước

File cho mỗi ngôn ngữ

Biến thể