Контент во множественном числе / Множественное число в 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

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

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:

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

Чтобы настроить контент во множественном числе в вашем проекте 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 в различных средах и фреймворках.