ترجمة
تعريف الترجمة
تتيح لك وظيفة t في intlayer الإشارة إلى المحتوى بعدة لغات. تضمن هذه الوظيفة أمان النوع، مما يؤدي إلى رفع خطأ إذا كانت أي ترجمات مفقودة، وهو أمر مفيد بشكل خاص في بيئات TypeScript.
استخدام TypeScript
إليك مثال على كيفية إعلانات المحتوى مع الترجمة.
**/*.content.ts
import { t, type DeclarationContent } 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", ar: "مرحبًا بكم في تطبيقنا", }), },} satisfies DeclarationContent<Content>;إعداد اللغات
لضمان التعامل الصحيح مع الترجمات، يمكنك ضبط اللغات المقبولة في intlayer.config.ts. يتيح لك هذا التكوين تحديد اللغات التي تدعمها تطبيقك:
intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.ARABIC], },};export default config;استخدام الترجمات في مكونات React
مع react-intlayer، يمكنك استخدام الترجمات في مكونات React. إليك مثال:
**/*.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;تقوم هذه المكونة بجلب الترجمة المناسبة بناءً على اللغة الحالية المحددة في التطبيق الخاص بك.
كائنات المحتوى المخصصة
يدعم intlayer كائنات المحتوى المخصصة للترجمة، مما يتيح لك تعريف هياكل أكثر تعقيدًا مع ضمان أمان النوع. إليك مثال على كائن مخصص:
**/*.content.ts
import { t, type DeclarationContent } 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", }, ar: { title: "عنوان الصفحة", content: "محتوى الصفحة", }, }), },} satisfies DeclarationContent;export default customContent;إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيق