محتوى الجمع / الجمع في Intlayer

كيف يعمل الجمع

في Intlayer، يتم تحقيق محتوى الجمع من خلال وظيفة plural التي تربط فئات الجمع في CLDR, zero و one و two و few و many و other, بالمحتوى المقابل لها. يتم اختيار الفئة الصحيحة تلقائيًا بناءً على اللغة النشطة وقيمة العدد، باستخدام واجهة برمجة تطبيقات Intl.PluralRules المدمجة في النظام الأساسي.

على عكس enu، الذي يختار المحتوى بناءً على نطاقات رقمية تحددها بنفسك، تفوض وظيفة plural الاختيار لقواعد CLDR. وهذا ما يجعلها قابلة للتوسع للغات ذات قواعد الجمع المعقدة, مثل الروسية أو البولندية أو العربية أو الويلزية, دون الحاجة إلى كتابة منطق الحساب يدويًا.

متى تستخدم plural مقابل enu

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

"use client";

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

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

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

إعداد محتوى الجمع

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

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      ar: plural({
        zero: "لا توجد وظائف شاغرة",
        one: "وظيفة شاغرة واحدة",
        two: "وظيفتان شاغرتان",
        few: "{{count}} وظائف شاغرة",
        many: "{{count}} وظيفة شاغرة",
        other: "{{count}} وظيفة شاغرة",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

الفئات المدعومة هي zero و one و two و few و many و other. تحتاج فقط إلى التصريح عن الفئات التي تستخدمها لغتك المستهدفة, يعود Intlayer إلى other عندما لا تتطابق أي فئة محددة.

يتم استبدال العنصر النائب {{count}} تلقائيًا بالعدد الذي تمرره في وقت التشغيل. يمكنك تضمين عناصر نائبة أخرى أيضًا (انظر العناصر النائبة المخصصة أدناه).

استخدام محتوى الجمع مع React Intlayer

لاستخدام محتوى الجمع داخل مكون React، قم باسترجاعه عبر خطاف useIntlayer واستدعه مع العدد. يتم دمج اللغة النشطة والعدد لاختيار فئة CLDR المطابقة.

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* باللغة الإنجليزية:                                 */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

يمكنك استدعاء الوظيفة المرجعة بطريقتين متكافئتين:

totalOpenings(21); // اختصار: العدد فقطtotalOpenings({ count: 21 }); // النموذج الصريح

العناصر النائبة المخصصة

يمكن أن تتضمن سلاسل الجمع عناصر نائبة أخرى غير {{count}}. قم بتمريرها في شكل كائن بجانب count:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}، لديك رسالة جديدة واحدة",
      other: "{{name}}، لديك {{count}} رسائل جديدة",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice، لديك رسالة جديدة واحدة"

summary({ count: 7, name: "Alice" });
// → "Alice، لديك 7 رسائل جديدة"

فئات CLDR في لمحة

تستخدم اللغات المختلفة مجموعات فرعية مختلفة من فئات CLDR. بعض الحالات الشائعة:

لا تحتاج إلى حفظ هذا, صرح عن الفئات التي لديك ترجمات لها، وسيعود Intlayer إلى other عند الحاجة.

قيود

مقارنة بالعقد الأخرى، لا يمكن تداخل العقدة plural مع العقد الفرعية حتى الآن.

مثال:

صالح:

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

غير صالح:

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

موارد إضافية

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

• توثيق التعداد (Enumeration)
• توثيق الإدراج (Insertion)
• توثيق Intlayer CLI
• توثيق React Intlayer
• توثيق Next Intlayer

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