Treści w liczbie mnogiej / Liczba mnoga w Intlayer

Jak działa liczba mnoga

W Intlayer treści w liczbie mnogiej są realizowane za pomocą funkcji plural, która mapuje kategorie liczby mnogiej CLDR, zero, one, two, few, many, other, do odpowiadającej im treści. Prawidłowa kategoria jest wybierana automatycznie na podstawie aktywnego języka i wartości licznika, przy użyciu wbudowanego w platformę API Intl.PluralRules.

W przeciwieństwie do enu, który wybiera treści na podstawie zdefiniowanych przez Ciebie zakresów liczbowych, plural deleguje wybór do reguł CLDR. To właśnie sprawia, że jest on skalowalny dla języków o złożonych regułach pluralizacji, takich jak polski, rosyjski, arabski czy walijski, bez konieczności ręcznego pisania logiki modulo.

Kiedy używać plural vs 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);

Konfigurowanie treści w liczbie mnogiej

Aby skonfigurować treści w liczbie mnogiej w swoim projekcie Intlayer, utwórz moduł treści korzystający z pomocnika plural. Kategoria other jest wymagana i służy jako rezerwowa, gdy dany język nie definiuje bardziej szczegółowej kategorii.

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

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      pl: plural({
        one: "{{count}} wolne miejsce",
        few: "{{count}} wolne miejsca",
        many: "{{count}} wolnych miejsc",
        other: "{{count}} wolnych miejsc",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Obsługiwane kategorie to zero, one, two, few, many, other. Musisz zadeklarować tylko te kategorie, których używa Twój język docelowy, Intlayer powraca do other, gdy żadna konkretna kategoria nie pasuje.

Symbol zastępczy {{count}} jest automatycznie zastępowany wartością licznika przekazaną w czasie wykonywania. Możesz również dołączyć inne symbole zastępcze (patrz Niestandardowe symbole zastępcze poniżej).

Używanie treści w liczbie mnogiej z React Intlayer

Aby użyć treści w liczbie mnogiej w komponencie React, pobierz ją za pomocą hooka useIntlayer i wywołaj z licznikiem. Aktywny język i licznik są łączone, aby wybrać pasującą kategorię CLDR.

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

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

  return (
    <div>
      {/* W języku angielskim:                               */}
      {/*  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;

Możesz wywołać zwróconą funkcję na dwa równoważne sposoby:

totalOpenings(21); // skrót: tylko liczniktotalOpenings({ count: 21 }); // forma jawna

Niestandardowe symbole zastępcze

Ciągi znaków w liczbie mnogiej mogą zawierać symbole zastępcze inne niż {{count}}. Przekaż je w formie obiektu obok count:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, masz {{count}} nową wiadomość",
      few: "{{name}}, masz {{count}} nowe wiadomości",
      many: "{{name}}, masz {{count}} nowych wiadomości",
      other: "{{name}}, masz {{count}} nowych wiadomości",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

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

summary({ count: 1, name: "Alice" });
// → "Alice, masz 1 nową wiadomość"

summary({ count: 7, name: "Alice" });
// → "Alice, masz 7 nowych wiadomości"

Kategorie CLDR w skrócie

Różne języki używają różnych podzbiorów kategorii CLDR. Kilka typowych przypadków:

Nie musisz tego zapamiętywać, zadeklaruj kategorie, dla których masz tłumaczenia, a Intlayer w razie potrzeby powróci do other.

Ograniczenie

W przeciwieństwie do innych węzłów, węzeł plural nie może być jeszcze zagnieżdżany z węzłami podrzędnymi.

Przykład:

Prawidłowe:

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

Nieprawidłowe:

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

Dodatkowe zasoby

Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

• Dokumentacja wyliczeń (Enumeration)
• Dokumentacja wstawiania (Insertion)
• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer

Zasoby te oferują dalszy wgląd w konfigurację i użytkowanie Intlayer w różnych środowiskach i frameworkach.