تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةالبدء في التدويل (i18n) باستخدام Intlayer و Vite و Preact
هذه الحزمة قيد التطوير. انظر المشكلة لمزيد من المعلومات. أظهر اهتمامك بـ Intlayer لـ Preact من خلال الإعجاب بالمشكلة.
راجع قالب التطبيق على GitHub.
ما هو Intlayer؟
Intlayer هو مكتبة مفتوحة المصدر مبتكرة للتدويل (i18n) مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
مع Intlayer، يمكنك:
- إدارة الترجمات بسهولة باستخدام القواميس التصريحية على مستوى المكونات.
- توطين البيانات الوصفية ديناميكيًا، والمسارات، والمحتوى.
- ضمان دعم TypeScript مع الأنواع المولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
- الاستفادة من الميزات المتقدمة، مثل اكتشاف اللغة الديناميكي والتبديل.
دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Preact
الخطوة 1: تثبيت التبعيات
قم بتثبيت الحزم الضرورية باستخدام npm:
npm install intlayer preact-intlayer vite-intlayer
intlayer
الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، الترجمة، إعلان المحتوى، الترجمة، وأوامر CLI.
preact-intlayer الحزمة التي تدمج Intlayer مع تطبيق Preact. توفر موفري السياق وخطافات لتدويل Preact.
vite-intlayer تتضمن مكون Vite الإضافي لدمج Intlayer مع Vite bundler، بالإضافة إلى وسيط لاكتشاف اللغة المفضلة للمستخدم، إدارة ملفات تعريف الارتباط، ومعالجة إعادة توجيه URL.
الخطوة 2: تكوين مشروعك
قم بإنشاء ملف تكوين لتكوين لغات تطبيقك:
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // لغاتك الأخرى ], defaultLocale: Locales.ENGLISH, },};export default config;
من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL المحلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع وثائق التكوين.
الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
أضف المكون الإضافي intlayer إلى تكوينك.
import { defineConfig } from "vite";import preact from "@preact/preset-vite";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [preact(), intlayerPlugin()],});
يتم استخدام المكون الإضافي intlayerPlugin() لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ومراقبتها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
الخطوة 4: إعلان محتواك
قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
import { t, type Dictionary } from "intlayer";const appContent = { key: "app", content: { viteLogo: t({ ar: "شعار Vite", en: "Vite logo", fr: "Logo Vite", es: "Logo Vite", }), preactLogo: t({ ar: "شعار Preact", en: "Preact logo", fr: "Logo Preact", es: "Logo Preact", }), title: "Vite + Preact", count: t({ ar: "العدد هو ", en: "count is ", fr: "le compte est ", es: "el recuento es ", }), edit: t({ ar: "قم بتعديل src/app.tsx واحفظ لاختبار HMR", en: "Edit src/app.tsx and save to test HMR", fr: "Éditez src/app.tsx et enregistrez pour tester HMR", es: "Edita src/app.tsx y guarda para probar HMR", }), readTheDocs: t({ ar: "انقر على شعاري Vite و Preact لمعرفة المزيد", en: "Click on the Vite and Preact logos to learn more", fr: "Cliquez sur les logos Vite et Preact pour en savoir plus", es: "Haga clic en los logotipos de Vite y Preact para obtener más información", }), },} satisfies Dictionary;export default appContent;
يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك طالما تم تضمينها في دليل contentDir (افتراضيًا، ./src). وتطابق امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).
لمزيد من التفاصيل، راجع وثائق إعلان المحتوى.
إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، قد تحتاج إلى استيراد import { h } from "preact"; أو التأكد من إعداد JSX pragma بشكل صحيح لـ Preact.
الخطوة 5: استخدام Intlayer في الكود الخاص بك
الوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء التطبيق:
import { useState } from "preact/hooks";import type { FunctionalComponent } from "preact";import preactLogo from "./assets/preact.svg"; // بافتراض أن لديك preact.svgimport viteLogo from "/vite.svg";import "./app.css"; // بافتراض أن ملف CSS الخاص بك يسمى app.cssimport { IntlayerProvider, useIntlayer } from "preact-intlayer";const AppContent: FunctionalComponent = () => { const [count, setCount] = useState(0); const content = useIntlayer("app"); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} class="logo" alt={content.viteLogo.value} /> </a> <a href="https://preactjs.com" target="_blank"> <img src={preactLogo} class="logo preact" alt={content.preactLogo.value} /> </a> </div> <h1>{content.title}</h1> <div class="card"> <button onClick={() => setCount((count) => count + 1)}> {content.count} {count} </button> <p>{content.edit}</p> </div> <p class="read-the-docs">{content.readTheDocs}</p> </> );};const App: FunctionalComponent = () => ( <IntlayerProvider> <AppContent /> </IntlayerProvider>);export default App;
إذا كنت ترغب في استخدام المحتوى الخاص بك في سمة string، مثل alt، title، href، aria-label، إلخ، يجب عليك استدعاء قيمة الوظيفة، مثل:
jsx<img src={content.image.src.value} alt={content.image.value} />
ملاحظة: في Preact، يتم كتابة className عادةً كـ class.
لمعرفة المزيد عن هوك useIntlayer، راجع الوثائق (واجهة برمجة التطبيقات مشابهة لـ preact-intlayer).
(اختياري) الخطوة 6: تغيير لغة المحتوى الخاص بك
لتغيير لغة المحتوى الخاص بك، يمكنك استخدام وظيفة setLocale المقدمة من هوك useLocale. تتيح لك هذه الوظيفة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.
import type { FunctionalComponent } from "preact";import { Locales } from "intlayer";import { useLocale } from "preact-intlayer";const LocaleSwitcher: FunctionalComponent = () => { const { setLocale } = useLocale(); return ( <button onClick={() => setLocale(Locales.ENGLISH)}> تغيير اللغة إلى الإنجليزيةimport { Locales } from "intlayer";import { useLocale } from "preact-intlayer";const LocaleSwitcher = () => { const { setLocale } = useLocale(); return ( <button onClick={() => setLocale(Locales.ENGLISH)}> تغيير اللغة إلى الإنجليزية </button> );};export default LocaleSwitcher;
لمعرفة المزيد عن الخطاف useLocale، راجع التوثيق (واجهة برمجة التطبيقات مشابهة لـ preact-intlayer).
(اختياري) الخطوة 7: إضافة التوجيه المحلي إلى تطبيقك
الغرض من هذه الخطوة هو إنشاء مسارات فريدة لكل لغة. هذا مفيد لتحسين محركات البحث (SEO) وعناوين URL الصديقة لمحركات البحث. مثال:
- https://example.com/about- https://example.com/es/about- https://example.com/fr/about
بشكل افتراضي، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت تريد إضافة بادئة للغة الافتراضية، يمكنك تعيين الخيار middleware.prefixDefault إلى true في إعداداتك. راجع توثيق الإعدادات لمزيد من المعلومات.
لإضافة التوجيه المحلي إلى تطبيقك، يمكنك إنشاء مكون LocaleRouter يلتف حول مسارات تطبيقك ويتعامل مع التوجيه المستند إلى اللغة. إليك مثال باستخدام preact-iso:
أولاً، قم بتثبيت preact-iso:
npm install preact-iso
import { type Locales, configuration, getPathWithoutLocale } from "intlayer";import { ComponentChildren, FunctionalComponent } from "preact";import { IntlayerProvider } from "preact-intlayer";import { LocationProvider, useLocation } from "preact-iso";import { useEffect } from "preact/hooks";const { internationalization, middleware } = configuration;const { locales, defaultLocale } = internationalization;const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({ to, replace,}) => { const { route } = useLocation(); useEffect(() => { route(to, replace); }, [to, replace, route]); return null;};/** * مكون يتعامل مع التوطين ويلتف حول الأطفال بسياق اللغة المناسب. * يدير الكشف عن اللغة المستندة إلى عنوان URL والتحقق من صحتها. */const AppLocalized: FunctionalComponent<{ children: ComponentChildren; locale?: Locales;}> = ({ children, locale }) => { const { path: pathname, url } = useLocation(); if (!url) { return null; } const search = url.substring(pathname.length); // تحديد اللغة الحالية، مع الرجوع إلى اللغة الافتراضية إذا لم يتم توفيرها const currentLocale = locale ?? defaultLocale; // إزالة بادئة اللغة من المسار لإنشاء مسار أساسي const pathWithoutLocale = getPathWithoutLocale( pathname // المسار الحالي لعنوان URL ); /** * إذا كان middleware.prefixDefault صحيحًا، يجب دائمًا إضافة بادئة للغة الافتراضية. */ if (middleware.prefixDefault) { // التحقق من صحة اللغة if (!locale || !locales.includes(locale)) { // إعادة التوجيه إلى اللغة الافتراضية مع تحديث المسار return ( <Navigate to={`/${defaultLocale}/${pathWithoutLocale}${search}`} replace // استبدال إدخال السجل الحالي بالجديد /> ); } // التفاف الأطفال بـ IntlayerProvider وتعيين اللغة الحالية return ( <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider> ); } else { /** * عندما يكون middleware.prefixDefault خاطئًا، لا يتم إضافة بادئة للغة الافتراضية. * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية. */ if ( currentLocale.toString() !== defaultLocale.toString() && !locales .filter( (loc) => loc.toString() !== defaultLocale.toString() // استبعاد اللغة الافتراضية ) .includes(currentLocale) // التحقق مما إذا كانت اللغة الحالية موجودة في قائمة اللغات الصالحة ) { // إعادة التوجيه إلى المسار بدون بادئة اللغة return <Navigate to={`${pathWithoutLocale}${search}`} replace />; } // التفاف الأطفال بـ IntlayerProvider وتعيين اللغة الحالية return ( <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider> ); }};const RouterContent: FunctionalComponent<{ children: ComponentChildren;}> = ({ children }) => { const { path } = useLocation(); if (!path) { return null; } const pathLocale = path.split("/")[1] as Locales; const isLocaleRoute = locales .filter((locale) => middleware.prefixDefault || locale !== defaultLocale) .some((locale) => locale.toString() === pathLocale); if (isLocaleRoute) { return <AppLocalized locale={pathLocale}>{children}</AppLocalized>; } return ( <AppLocalized locale={!middleware.prefixDefault ? defaultLocale : undefined} > {children} </AppLocalized> );};/** * مكون التوجيه الذي يقوم بإعداد المسارات الخاصة باللغة. * يستخدم preact-iso لإدارة التنقل وعرض المكونات المحلية. */export const LocaleRouter: FunctionalComponent<{ children: ComponentChildren;}> = ({ children }) => ( <LocationProvider> <RouterContent>{children}</RouterContent> </LocationProvider>);
ثم يمكنك استخدام مكون LocaleRouter في تطبيقك:
import { LocaleRouter } from "./components/LocaleRouter";import type { FunctionalComponent } from "preact";// ... مكون AppContent الخاص بك (المُعرّف في الخطوة 5)const App: FunctionalComponent = () => ( <LocaleRouter> <AppContent /> </LocaleRouter>);export default App;
بالتوازي، يمكنك أيضًا استخدام intLayerMiddlewarePlugin لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيكتشف هذا المكون الإضافي اللغة الحالية تلقائيًا بناءً على عنوان URL ويضبط ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة المتصفح للمستخدم. إذا لم يتم اكتشاف لغة، فسيعيد التوجيه إلى اللغة الافتراضية.
import { defineConfig } from "vite";import preact from "@preact/preset-vite";import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [preact(), intlayerPlugin(), intLayerMiddlewarePlugin()],});
(اختياري) الخطوة 8: تغيير عنوان URL عند تغيير اللغة
import { useLocation, route } from "preact-iso";import { Locales, getHTMLTextDir, getLocaleName, getLocalizedUrl,} from "intlayer";import { useLocale } from "preact-intlayer";import type { FunctionalComponent } from "preact";const LocaleSwitcher: FunctionalComponent = () => { const location = useLocation(); const { locale, availableLocales, setLocale } = useLocale({ onLocaleChange: (newLocale) => { const currentFullPath = location.url; // توفر مكتبة preact-iso العنوان الكامل // إنشاء عنوان URL مع اللغة المحلية المحدثة // مثال: /es/about?foo=bar const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale); // تحديث مسار عنوان URL route(pathWithLocale, true); // true للاستبدال }, }); return ( <div> <button popovertarget="localePopover">{getLocaleName(locale)}</button> <div id="localePopover" popover="auto"> {availableLocales.map((localeItem) => ( <a href={getLocalizedUrl(location.url, localeItem)} hreflang={localeItem} aria-current={locale === localeItem ? "page" : undefined} onClick={(e) => { e.preventDefault(); setLocale(localeItem); // سيتم التعامل مع التنقل البرمجي بعد تعيين اللغة المحلية بواسطة onLocaleChange }} key={localeItem} > <span> {/* اللغة المحلية - مثال: FR */} {localeItem} </span> <span> {/* اللغة بلغتها الخاصة - مثال: Français */} {getLocaleName(localeItem, localeItem)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* اللغة باللغة الحالية - مثال: Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */} {getLocaleName(localeItem, locale)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* اللغة بالإنجليزية - مثال: French */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </a> ))} </div> </div> );};export default LocaleSwitcher;
مراجع التوثيق:
- خطاف useLocale (تشابه API مع preact-intlayer)
(اختياري) الخطوة 9: تبديل سمات اللغة والاتجاه في HTML
عندما يدعم تطبيقك لغات متعددة، من المهم تحديث سمات lang و dir في علامة <html> لتتوافق مع اللغة المحلية الحالية. القيام بذلك يضمن:
- إمكانية الوصول: تعتمد قارئات الشاشة والتقنيات المساعدة على السمة lang الصحيحة لنطق المحتوى وتفسيره بدقة.
- عرض النصوص: تضمن السمة dir (الاتجاه) عرض النصوص بالترتيب الصحيح (مثلًا، من اليسار إلى اليمين للإنجليزية، ومن اليمين إلى اليسار للعربية أو العبرية)، وهو أمر ضروري للقراءة.
- تحسين محركات البحث (SEO): تستخدم محركات البحث السمة lang لتحديد لغة صفحتك، مما يساعد على تقديم المحتوى المحلي المناسب في نتائج البحث.
من خلال تحديث هذه السمات ديناميكيًا عند تغيير اللغة المحلية، تضمن تجربة متسقة وسهلة الوصول للمستخدمين عبر جميع اللغات المدعومة.
تنفيذ الخطاف
قم بإنشاء خطاف مخصص لإدارة سمات HTML. يستمع الخطاف لتغييرات اللغة المحلية ويقوم بتحديث السمات وفقًا لذلك:
import { useEffect } from "preact/hooks"; import { useLocale } from "preact-intlayer"; import { getHTMLTextDir } from "intlayer";
/**
- يقوم بتحديث سمات lang و dir لعنصر HTML بناءً على اللغة الحالية.
- lang: يُعلم المتصفحات ومحركات البحث بلغة الصفحة.
- dir: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، 'rtl' للعربية). -
- هذا التحديث الديناميكي ضروري لعرض النصوص بشكل صحيح، وتحسين الوصول، وتحسين محركات البحث. */ export const useI18nHTMLAttributes = () => { const { locale } = useLocale();
useEffect(() => { // تحديث سمة اللغة إلى اللغة الحالية. document.documentElement.lang = locale;
// تعيين اتجاه النص بناءً على اللغة الحالية. document.documentElement.dir = getHTMLTextDir(locale);}, [locale]); };
```jsx fileName="src/hooks/useI18nHTMLAttributes.jsx" codeFormat="esm" import { useEffect } from "preact/hooks"; import { useLocale } from "preact-intlayer"; import { getHTMLTextDir } from "intlayer"; /** * يقوم بتحديث سمات `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية. */ export const useI18nHTMLAttributes = () => { const { locale } = useLocale(); useEffect(() => { document.documentElement.lang = locale; document.documentElement.dir = getHTMLTextDir(locale); }, [locale]); };استخدام الخطاف في تطبيقك
قم بدمج الخطاف في المكون الرئيسي الخاص بك بحيث يتم تحديث سمات HTML كلما تغيرت اللغة:
import type { FunctionalComponent } from "preact";import { IntlayerProvider } from "preact-intlayer"; // تم استيراد useIntlayer بالفعل إذا كان AppContent يحتاجهimport { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";import "./app.css";// تعريف AppContent من الخطوة 5const AppWithHooks: FunctionalComponent = () => { // تطبيق الخطاف لتحديث سمات lang و dir لعلامة <html> بناءً على اللغة. useI18nHTMLAttributes(); // بافتراض أن AppContent هو مكون العرض الرئيسي الخاص بك من الخطوة 5 return <AppContent />;};const App: FunctionalComponent = () => ( <IntlayerProvider> <AppWithHooks /> </IntlayerProvider>);export default App;
من خلال تطبيق هذه التغييرات، سيقوم تطبيقك بـ:
- ضمان أن تعكس سمة اللغة (lang) اللغة الحالية بشكل صحيح، وهو أمر مهم لتحسين محركات البحث وسلوك المتصفح.
- ضبط اتجاه النص (dir) وفقًا للغة، مما يعزز قابلية القراءة وسهولة الاستخدام للغات ذات أوامر قراءة مختلفة.
- توفير تجربة أكثر وصولاً، حيث تعتمد تقنيات المساعدة على هذه السمات لتعمل بشكل مثالي.
(اختياري) الخطوة 10: إنشاء مكون رابط محلي
لضمان أن التنقل في تطبيقك يحترم اللغة الحالية، يمكنك إنشاء مكون Link مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة لعناوين URL الداخلية باللغة الحالية.
هذا السلوك مفيد لعدة أسباب:
- تحسين محركات البحث وتجربة المستخدم: تساعد عناوين URL المحلية محركات البحث على فهرسة الصفحات الخاصة باللغة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
- الاتساق: باستخدام رابط محلي في جميع أنحاء تطبيقك، تضمن أن التنقل يظل ضمن اللغة الحالية، مما يمنع التبديل غير المتوقع للغة.
- سهولة الصيانة: تبسيط إدارة عناوين URL من خلال مركزية منطق الترجمة في مكون واحد.
بالنسبة لـ Preact مع preact-iso، يتم استخدام علامات <a> القياسية عادةً للتنقل، ويتولى preact-iso التعامل مع التوجيه. إذا كنت بحاجة إلى التنقل البرمجي عند النقر (على سبيل المثال، لتنفيذ إجراءات قبل التنقل)، يمكنك استخدام وظيفة route من useLocation. إليك كيفية إنشاء مكون رابط مخصص يقوم بتوطين عناوين URL:
import { getLocalizedUrl } from "intlayer";import { useLocale, useLocation, route } from "preact-intlayer"; // بافتراض أن useLocation و route يمكن أن تكون من preact-iso عبر preact-intlayer إذا تم إعادة تصديرها، أو الاستيراد مباشرة// إذا لم يتم إعادة التصدير، قم بالاستيراد مباشرة: import { useLocation, route } from "preact-iso";import type { JSX } from "preact"; // للسمات HTMLimport { forwardRef } from "preact/compat"; // لإعادة توجيه المراجعexport interface LocalizedLinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> { href: string; replace?: boolean; // اختياري: لاستبدال حالة التاريخ}/** * وظيفة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا. * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا. */export const checkIsExternalLink = (href?: string): boolean => /^https?:\/\//.test(href ?? "");/** * مكون رابط مخصص يتكيف مع سمة href بناءً على اللغة الحالية. * بالنسبة للروابط الداخلية، يستخدم `getLocalizedUrl` لإضافة بادئة للعنوان باللغة (مثل /ar/about). * يضمن ذلك أن يظل التنقل ضمن نفس سياق اللغة. * يستخدم علامة <a> القياسية ولكنه يمكن أن يؤدي إلى التنقل على جانب العميل باستخدام وظيفة `route` الخاصة بـ preact-iso. */export const LocalizedLink = forwardRef<HTMLAnchorElement, LocalizedLinkProps>( ({ href, children, onClick, replace = false, ...props }, ref) => { const { locale } = useLocale(); const location = useLocation(); // من preact-iso const isExternalLink = checkIsExternalLink(href); const hrefI18n = href && !isExternalLink ? getLocalizedUrl(href, locale) : href; const handleClick = (event: JSX.TargetedMouseEvent<HTMLAnchorElement>) => { if (onClick) { onClick(event); } if ( !isExternalLink && href && // تأكد من أن href محدد event.button === 0 && // النقر الأيسر !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && // تحقق من المعدلات القياسية !props.target // عدم استهداف علامة تبويب/نافذة جديدة ) { event.preventDefault(); if (location.url !== hrefI18n) { // التنقل فقط إذا كان عنوان URL مختلفًا route(hrefI18n, replace); // استخدم وظيفة route الخاصة بـ preact-iso } } }; return ( <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}> {children} </a> ); });
كيف يعمل
- كشف الروابط الخارجية:
تقوم وظيفة المساعدة checkIsExternalLink بتحديد ما إذا كان الرابط خارجيًا. يتم ترك الروابط الخارجية دون تغيير. - استرجاع اللغة الحالية:
يوفر الخطاف useLocale اللغة الحالية. - توطين الرابط:
بالنسبة للروابط الداخلية، يضيف getLocalizedUrl بادئة الرابط باللغة الحالية. - التنقل على جانب العميل:
تتحقق وظيفة handleClick مما إذا كان الرابط داخليًا وما إذا كان يجب منع التنقل القياسي. إذا كان الأمر كذلك، فإنها تستخدم وظيفة route الخاصة بـ preact-iso (المستمدة عبر useLocation أو المستوردة مباشرة) لتنفيذ التنقل على جانب العميل. يوفر هذا سلوكًا يشبه تطبيقات SPA دون إعادة تحميل الصفحة بالكامل. - إرجاع الرابط:
تقوم المكونة بإرجاع عنصر <a> مع الرابط الموطّن ومعالج النقر المخصص.
إعداد TypeScript
يستخدم Intlayer توسيع الوحدات للحصول على فوائد TypeScript وجعل قاعدة الكود الخاصة بك أقوى.
تأكد من أن إعدادات TypeScript الخاصة بك تتضمن الأنواع التي يتم إنشاؤها تلقائيًا.
{ // ... إعدادات TypeScript الحالية "compilerOptions": { // ... "jsx": "react-jsx", "jsxImportSource": "preact", // موصى به لـ Preact 10+ // ... }, "include": [ // ... إعدادات TypeScript الحالية ".intlayer/**/*.ts", // تضمين الأنواع التي يتم إنشاؤها تلقائيًا ],}
تأكد من أن tsconfig.json الخاص بك معد لـ Preact، خاصةً jsx و jsxImportSource أو jsxFactory/jsxFragmentFactory للإصدارات الأقدم من Preact إذا لم تكن تستخدم الإعدادات الافتراضية لـ preset-vite.
إعداد Git
يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. يتيح لك ذلك تجنب إضافتها إلى مستودع Git الخاص بك.
للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:
# تجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer.intlayer
إضافة VS Code
لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت إضافة Intlayer الرسمية لـ VS Code.
توفر هذه الإضافة:
- الإكمال التلقائي لمفاتيح الترجمة.
- كشف الأخطاء في الوقت الفعلي للترجمات المفقودة.
- معاينات داخلية للمحتوى المترجم.
- إجراءات سريعة لإنشاء الترجمات وتحديثها بسهولة.
لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع وثائق إضافة Intlayer لـ VS Code.
الذهاب إلى أبعد من ذلك
للمزيد، يمكنك تنفيذ المحرر المرئي أو نقل المحتوى الخاص بك باستخدام CMS.
إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيق