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 swoim projekcie Intlayer, najpierw definiujesz bazową treść, którą chcesz ponownie wykorzystać. Następnie, w osobnym module treści, używasz funkcji nest, aby zaimportować tę treść.

Bazowy słownik

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

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Odwołania za pomocą Nest

Teraz utwórz inny moduł zawartości, który używa funkcji nest do odwołania się do powyższej zawartości. Możesz odwołać się do całej zawartości lub do konkretnej zagnieżdżonej wartości:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Odwołuje się do całego słownika:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Odwołuje się do konkretnej zagnieżdżonej wartości:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

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

Używanie zagnieżdżenia z React Intlayer

Aby użyć zagnieżdżonej zawartości w komponencie React, skorzystaj z hooka useIntlayer z pakietu react-intlayer. Ten hook pobiera odpowiednią zawartość na podstawie podanego klucza. Oto przykład, jak go użyć:

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)}        {/* Wynik: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Częściowa wartość zagnieżdżona: {partialNestedContent}        {/* Wynik: 0 */}      </p>    </div>  );};export default NestComponent;

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 dostarczają dodatkowych informacji na temat konfiguracji i użytkowania Intlayer w różnych środowiskach oraz z różnymi frameworkami.