Creation:2025-09-07Last update:2025-09-07

    Çeviri

    Çevirileri Tanımlama

    intlayer'daki t fonksiyonu, içeriği birden fazla dilde bildirmenizi sağlar. Bu fonksiyon tür güvenliğini sağlar ve herhangi bir çeviri eksikse hata verir, bu özellikle TypeScript ortamlarında kullanışlıdır.

    İşte çevirilerle içerik bildirme örneği.

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    Yerel Ayarlar için Yapılandırma

    Uygun çeviri işlemini sağlamak için, intlayer.config.ts'de kabul edilen yerel ayarları yapılandırabilirsiniz. Bu yapılandırma, uygulamanızın desteklediği dilleri tanımlamanızı sağlar:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

    React Bileşenlerinde Çevirileri Kullanma

    react-intlayer ile React bileşenlerinde çevirileri kullanabilirsiniz. İşte bir örnek:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Bu bileşen, uygulamanızda ayarlanan mevcut yerel ayara göre karşılık gelen çeviriyi getirir.

    Özel İçerik Nesneleri

    intlayer, çeviri için özel içerik nesnelerini destekler ve tür güvenliğini sağlarken daha karmaşık yapılar tanımlamanızı sağlar. İşte özel bir nesne ile örnek:

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;
    İçerik Beyanı
    Çoğul