Çoğul İçerik / Intlayer'da Çoğul

Çoğul Nasıl Çalışır?

Intlayer'da çoğul içerik, CLDR çoğul kategorilerini (zero, one, two, few, many, other) ilgili içerikleriyle eşleştiren plural işlevi aracılığıyla elde edilir. Doğru kategori, platformun yerleşik Intl.PluralRules API'si kullanılarak aktif yerele ve bir sayı değerine göre otomatik olarak seçilir.

Kendi tanımladığınız sayısal aralıklara göre içerik seçen enu işlevinden farklı olarak, plural seçimi CLDR kurallarına devreder. Rusça, Lehçe, Arapça veya Galce gibi karmaşık çoğullaştırma kurallarına sahip diller için, elle modülo mantığı yazmak zorunda kalmadan ölçeklenebilir olmasını sağlayan şey budur.

Ne Zaman plural vs enu Kullanılmalı?

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);

Çoğul İçeriği Ayarlama

Intlayer projenizde çoğul içeriği ayarlamak için plural yardımcısını kullanan bir içerik modülü oluşturun. other kategorisi zorunludur ve bir yerel daha spesifik bir kategori tanımlamadığında yedek olarak kullanılır.

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

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      tr: plural({
        one: "{{count}} açık pozisyon",
        other: "{{count}} açık pozisyon",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Desteklenen kategoriler zero, one, two, few, many, other'dır. Sadece hedef dilinizin kullandığı kategorileri beyan etmeniz yeterlidir, Intlayer, belirli bir kategori eşleşmediğinde other kategorisine geri döner.

{{count}} yer tutucusu, çalışma zamanında ilettiğiniz sayıyla otomatik olarak değiştirilir. Diğer yer tutucuları da dahil edebilirsiniz (aşağıdaki Özel yer tutucular bölümüne bakın).

React Intlayer ile Çoğul İçeriği Kullanma

React bileşeni içinde çoğul içeriği kullanmak için, useIntlayer kancası aracılığıyla içeriği alın ve bir sayıyla çağırın. Aktif yerel ve sayı, eşleşen CLDR kategorisini seçmek için birleştirilir.

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

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

  return (
    <div>
      {/* İngilizcede:                                 */}
      {/*  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;

Döndürülen işlevi iki eşdeğer şekilde çağırabilirsiniz:

totalOpenings(21); // kısa yol: sadece sayıtotalOpenings({ count: 21 }); // açık form

Özel yer tutucular

Çoğul dizeler {{count}} dışındaki yer tutucuları içerebilir. Bunları count ile birlikte nesne formunda iletin:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, {{count}} yeni mesajınız var",
      other: "{{name}}, {{count}} yeni mesajınız var",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

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

summary({ count: 1, name: "Alice" });
// → "Alice, 1 yeni mesajınız var"

summary({ count: 7, name: "Alice" });
// → "Alice, 7 yeni mesajınız var"

Bir Bakışta CLDR Kategorileri

Farklı diller CLDR kategorilerinin farklı alt kümelerini kullanır. Birkaç yaygın durum:

Bunu ezberlemenize gerek yok, çevirilerinizin olduğu kategorileri beyan edin, Intlayer gerektiğinde other kategorisine geri dönecektir.

Sınırlama

Diğer düğümlere kıyasla, plural henüz alt düğümlerle iç içe geçemez.

Örnek:

Geçerli:

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

Geçersiz:

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

Ek Kaynaklar

Yapılandırma ve kullanım hakkında daha ayrıntılı bilgi için aşağıdaki kaynaklara bakın:

• Enumeration Belgeleri
• Insertion Belgeleri
• Intlayer CLI Belgeleri
• React Intlayer Belgeleri
• Next Intlayer Belgeleri

Bu kaynaklar, Intlayer'ın çeşitli ortamlarda ve çerçevelerde kurulumu ve kullanımı hakkında daha fazla bilgi sunar.