في Intlayer، يتم تحقيق التعشيش من خلال وظيفة nest، التي تتيح لك الإشارة إلى وإعادة استخدام المحتوى من قاموس آخر. بدلاً من تكرار المحتوى، يمكنك الإشارة إلى وحدة محتوى موجودة باستخدام مفتاحها.

إعداد التداخل

لإعداد التداخل في مشروع Intlayer الخاص بك، تقوم أولاً بتعريف المحتوى الأساسي الذي تريد إعادة استخدامه. ثم، في وحدة محتوى منفصلة، تستخدم دالة nest لاستيراد هذا المحتوى.

القاموس الأساسي

فيما يلي مثال على قاموس أساسي للتداخل في قاموس آخر:

firstDictionary.content.ts

نسخ الكود

نسخ الكود إلى الحافظة

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;

إعداد التعشيش

To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

**/*.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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

نسخ الكود

نسخ الكود إلى الحافظة

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
  document.getElementById("nested")!.textContent =
    newContent.partialNestedContent;
}
);

// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;

استخدام التعشيش مع React Intlayer

لاستخدام المحتوى المتعشش في مكون React، استخدم الخطاف useIntlayer من حزمة react-intlayer. يسترجع هذا الخطاف المحتوى الصحيح بناءً على المفتاح المحدد. إليك مثال على كيفية استخدامه:

**/*.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>
        Full Nested Content: {JSON.stringify(fullNestedContent)}
        {/* الإخراج: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Partial Nested Value: {partialNestedContent}
        {/* الإخراج: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

موارد إضافية

لمزيد من المعلومات التفصيلية حول التكوين والاستخدام، راجع الموارد التالية:

توفر هذه الموارد مزيدًا من الأفكار حول إعداد واستخدام Intlayer في بيئات مختلفة ومع أطر عمل متنوعة.

ملف

Markdown