Контент во множественном числе / Множественное число в Intlayer

Как работает множественное число

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

Когда использовать plural вместо enu

Если вы ориентируетесь только на английский (где есть только one / other), подойдут оба варианта. Для языков с формами few / many / two выбирайте plural.

Настройка контента во множественном числе

Чтобы настроить контент во множественном числе в вашем проекте 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",
      }),
      ru: plural({
        one: "{{count}} вакансия",
        few: "{{count}} вакансии",
        many: "{{count}} вакансий",
        other: "{{count}} вакансий",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Поддерживаемые категории: zero, one, two, few, many, other. Вам нужно объявить только те категории, которые использует ваш целевой язык, Intlayer возвращается к other, когда ни одна конкретная категория не подходит.

Заполнитель {{count}} автоматически заменяется счетчиком, который вы передаете во время выполнения. Вы также можете включить другие заполнители (см. Пользовательские заполнители ниже).

Использование контента во множественном числе с React Intlayer

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

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

totalOpenings(21); // сокращение: только счетчик
totalOpenings({ count: 21 }); // явная форма

Пользовательские заполнители

Строки во множественном числе могут включать заполнители, отличные от {{count}}. Передайте их в форме объекта вместе с count:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, у вас {{count}} новое сообщение",
      other: "{{name}}, у вас {{count}} новых сообщений",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

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

summary({ count: 1, name: "Alice" });
// → "Alice, у вас 1 новое сообщение"

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 в различных средах и фреймворках.