في Intlayer، يتم تحقيق المحتوى الشرطي من خلال وظيفة cond، التي تربط شروطًا محددة (عادةً قيم منطقية) بالمحتوى المقابل لها. يتيح لك هذا النهج اختيار المحتوى ديناميكيًا بناءً على شرط معين. عند دمجه مع React Intlayer أو Next Intlayer، يتم اختيار المحتوى المناسب تلقائيًا وفقًا للشرط المقدم أثناء وقت التشغيل.

إعداد المحتوى الشرطي

لإعداد المحتوى الشرطي في مشروع Intlayer الخاص بك، قم بإنشاء وحدة محتوى تتضمن تعريفاتك الشرطية. فيما يلي أمثلة بتنسيقات مختلفة.

**/*.content.ts

نسخ الكود

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

import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "المحتوى الخاص بي عندما يكون الشرط صحيحًا",
      false: "المحتوى الخاص بي عندما يكون الشرط خاطئًا",
      fallback: "المحتوى الخاص بي عندما يفشل الشرط", // اختياري
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

إذا لم يتم إعلان fallback، سيتم أخذ المفتاح الأخير المعلن كـ fallback إذا لم يتم التحقق من الشرط.

استخدام المحتوى الشرطي مع React Intlayer

To utilize conditional content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.

**/*.tsx

نسخ الكود

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Output: my content when it's true */
        myCondition(true)
      }
    </p>
    <p>
      {
        /* Output: my content when it's false */
        myCondition(false)
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition("")
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition(undefined)
      }
    </p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional 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 ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional 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 { myCondition } = useIntlayer("my_key");</script><template><div>  <p>{{ myCondition(true) }}</p>  <p>{{ myCondition(false) }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myCondition } = useIntlayer("my_key");</script><template><div>  <p>{{ myCondition(true) }}</p>  <p>{{ myCondition(false) }}</p></div></template>

To utilize conditional 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("my_key");</script><div><p>{$content.myCondition(true)}</p><p>{$content.myCondition(false)}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myCondition(true)}</p><p>{$content.myCondition(false)}</p></div>

To utilize conditional 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 ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional 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 ConditionalComponent: Component = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional 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-conditional",template: `  <div>    <p>{{ content().myCondition(true) }}</p>    <p>{{ content().myCondition(false) }}</p>  </div>`,})export class ConditionalComponent {content = useIntlayer("my_key");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-conditional",template: `  <div>    <p>{{ content().myCondition(true) }}</p>    <p>{{ content().myCondition(false) }}</p>  </div>`,})export class ConditionalComponent {content = useIntlayer("my_key");}

To utilize conditional 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("my_key").onChange((newContent) => {
document.getElementById("true-content")!.textContent =
  newContent.myCondition(true);
document.getElementById("false-content")!.textContent =
  newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
content.myCondition(true);
document.getElementById("false-content")!.textContent =
content.myCondition(false);

موارد إضافية

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

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

تعداد

جنس