Autor:
    Aymeric PINEAU
    Data utworzenia:2025-02-07Ostatnia aktualizacja:2026-10-08

    Zagnieżdżanie / Odwołania do podtreści

    Jak działa zagnieżdżanie

    W Intlayer zagnieżdżanie realizowane jest za pomocą funkcji nest, która pozwala na odwoływanie się do treści z innego słownika i jej ponowne wykorzystanie. Zamiast duplikować treść, możesz wskazać istniejący moduł treści za pomocą jego klucza.

    Konfiguracja zagnieżdżania

    Aby skonfigurować zagnieżdżanie w projekcie Intlayer, najpierw definiujesz zawartość bazową, którą chcesz ponownie wykorzystać. Następnie w osobnym module zawartości używasz funkcji nest do zaimportowania tej zawartości.

    Słownik podstawowy

    Poniżej znajduje się przykład słownika podstawowego do zagnieżdżenia w innym słowniku:

    firstDictionary.content.ts
    import { t, type Dictionary } from "intlayer";

const myFirstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    mySubContent: t({
      pl: "Cześć",
      en: "Hello",
      fr: "Bonjour",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default myFirstDictionary;

    Odwoływanie się ze słownika bazowego

    Następnie w drugim słowniku używasz funkcji nest do odwołania się do pierwszego słownika:

    secondDictionary.content.ts
    import { nest, type Dictionary } from "intlayer";

const mySecondDictionary = {
  key: "key_of_my_second_dictionary",
  content: {
    // Odwołaj się do całego słownika:
    fullNestedContent: nest("key_of_my_first_dictionary"),

    // Lub odwołaj się do konkretnej wartości zagnieżdżonej:
    partialNestedContent: nest("key_of_my_first_dictionary", "mySubContent"),
  },
} satisfies Dictionary;

export default mySecondDictionary;

    Jako drugi parametr możesz określić ścieżkę do wartości zagnieżdżonej w ramach tej zawartości. Jeśli nie zostanie podana żadna ścieżka, zwracana jest cała zawartość wskazanego słownika.

    Używanie zagnieżdżania

    Aby użyć zagnieżdżonej treści w komponencie React, skorzystaj z hooka useIntlayer z pakietu react-intlayer. Hook ten pobiera odpowiednią treść na podstawie podanego klucza. Oto przykład użycia:

    **/*.tsx
    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>Pełna zagnieżdżona treść: {JSON.stringify(fullNestedContent)}</p>
      <p>Częściowa zagnieżdżona wartość: {partialNestedContent}</p>
    </div>
  );
};

export default NestComponent;

    Aby użyć zagnieżdżonej treści w komponentach klienckich Next.js (Client Components), pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    "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>{JSON.stringify(fullNestedContent)}</p>
      <p>{partialNestedContent}</p>
    </div>
  );
};

export default NestComponent;

    Aby użyć zagnieżdżonej treści w komponentach Vue, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);
</script>

<template>
  <div>
    <p>{{ JSON.stringify(fullNestedContent) }}</p>
    <p>{{ partialNestedContent }}</p>
  </div>
</template>

    Aby użyć zagnieżdżonej treści w komponentach Svelte, pobierz ją za pomocą hooka useIntlayer. Dostęp do magazynu (store) uzyskujemy przez $. Oto przykład:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("key_of_my_second_dictionary");
</script>

<div>
  <p>{JSON.stringify($content.fullNestedContent)}</p>
  <p>{$content.partialNestedContent}</p>
</div>

    Aby użyć zagnieżdżonej treści w komponentach Preact, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    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>{JSON.stringify(fullNestedContent)}</p>
      <p>{partialNestedContent}</p>
    </div>
  );
};

export default NestComponent;

    Aby użyć zagnieżdżonej treści w komponentach SolidJS, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    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>{JSON.stringify(fullNestedContent)}</p>
      <p>{partialNestedContent}</p>
    </div>
  );
};

export default NestComponent;

    Aby użyć zagnieżdżonej treści w komponentach Angular, pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-nest",
  template: `
    <div>
      <p>{{ fullNestedContent }}</p>
      <p>{{ content().partialNestedContent }}</p>
    </div>
  `,
})
export class NestComponent {
  content = useIntlayer("key_of_my_second_dictionary");

  get fullNestedContent() {
    return JSON.stringify(this.content().fullNestedContent);
  }
}

    Aby użyć zagnieżdżonej treści w czystym JavaScript (vanilla-intlayer), pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
  (newContent) => {
    document.getElementById("full-nested-content")!.textContent =
      JSON.stringify(newContent.fullNestedContent);
    document.getElementById("partial-nested-content")!.textContent =
      newContent.partialNestedContent;
  }
);

// Pierwsze renderowanie
document.getElementById("full-nested-content")!.textContent = JSON.stringify(
  content.fullNestedContent
);
document.getElementById("partial-nested-content")!.textContent =
  content.partialNestedContent;

    Dodatkowe zasoby

    Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

    Dokumentacja Intlayer CLI
    Dokumentacja React Intlayer
    Dokumentacja Next Intlayer

    Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach oraz frameworkach.

    PlikMarkdown