\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (اختياري) الخطوة 6: إعداد التوجيه\n\nتوضح الخطوات التالية كيفية إعداد التوجيه بناءً على اللغة في SvelteKit. يتيح هذا لعناوين URL الخاصة بك أن تتضمن بادئة اللغة (مثل `/en/about`، `/fr/about`) لتحسين تحسين محركات البحث وتجربة المستخدم.\n\n```bash\n.\n└─── src\n ├── app.d.ts # تعريف نوع اللغة\n ├── hooks.server.ts # إدارة توجيه اللغة\n ├── lib\n │ └── getLocale.ts # التحقق من اللغة من الهيدر أو الكوكيز\n ├── params\n │ └── locale.ts # تعريف معامل اللغة\n └── routes\n ├── [[locale=locale]] # تغليف في مجموعة مسارات لتعيين اللغة\n │ ├── +layout.svelte # التخطيط المحلي للمسار\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # التخطيط الجذري للخطوط والأنماط العامة\n```\n\n### الخطوة 7: التعامل مع اكتشاف اللغة على جانب الخادم (Hooks)\n\nفي SvelteKit، يحتاج الخادم إلى معرفة لغة المستخدم لعرض المحتوى الصحيح أثناء العرض من جانب الخادم (SSR). نستخدم `hooks.server.ts` لاكتشاف اللغة من عنوان URL أو ملفات تعريف الارتباط.\n\nقم بإنشاء أو تعديل الملف `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // تحقق مما إذا كان المسار الحالي يبدأ بالفعل بلغة (مثل /fr، /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // إذا لم تكن هناك لغة في عنوان URL (مثل زيارة المستخدم لـ \"/\")، قم بإعادة توجيههم\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // إعادة توجيه مؤقتة\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nثم، أنشئ مساعدًا للحصول على لغة المستخدم من حدث الطلب:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * الحصول على لغة المستخدم من حدث الطلب.\n * تُستخدم هذه الدالة في الخطاف `handle` في الملف `src/hooks.server.ts`.\n *\n * تحاول أولاً الحصول على اللغة من تخزين Intlayer (الكوكيز أو رؤوس مخصصة).\n * إذا لم يتم العثور على اللغة، تعود إلى تفاوض \"Accept-Language\" الخاص بالمتصفح.\n *\n * @param event - حدث الطلب من SvelteKit\n * @returns لغة المستخدم\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // محاولة الحصول على اللغة من تخزين Intlayer (الكوكيز أو الرؤوس)\n const storedLocale = getLocaleFromStorage({\n // الوصول إلى ملفات تعريف الارتباط في SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // الوصول إلى رؤوس الطلب في SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // الرجوع إلى تفاوض \"Accept-Language\" في المتصفح\n const negotiatorHeaders: Record<string, string> = {};\n\n // تحويل كائن رؤوس SvelteKit إلى سجل بسيط Record<string, string>\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // التحقق من اللغة من رأس `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // إرجاع اللغة الافتراضية إذا لم يتم العثور على تطابق\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` سيتحقق من اللغة من الهيدر أو الكوكي حسب تكوينك. راجع [Configuration](https://intlayer.org/doc/configuration) لمزيد من التفاصيل.\n\n> دالة `localeDetector` ستتعامل مع هيدر `Accept-Language` وتعيد أفضل تطابق.\n\nإذا لم يتم تكوين اللغة، نريد إرجاع خطأ 404. لجعل الأمر أسهل، يمكننا إنشاء دالة `match` للتحقق مما إذا كانت اللغة صالحة:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **ملاحظة:** تأكد من أن ملف `src/app.d.ts` الخاص بك يتضمن تعريف اللغة:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nبالنسبة لملف `+layout.svelte`، يمكننا إزالة كل شيء، للاحتفاظ فقط بالمحتوى الثابت، غير المرتبط بالتدويل (i18n):\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nثم، أنشئ صفحة وتخطيط جديد تحت مجموعة `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// استخدم النوع العام Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// تهيئة Intlayer باستخدام اللغة من المسار\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// استخدام قاموس محتوى التخطيط\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// استخدم قاموس محتوى الصفحة الرئيسية\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (اختياري) الخطوة 8: الروابط الدولية\n\nمن أجل تحسين محركات البحث (SEO)، يُنصح بإضافة بادئة اللغة إلى مساراتك (على سبيل المثال، `/en/about`، `/fr/about`). يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية لأي رابط.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nإذا كنت تستخدم `goto` من SvelteKit، يمكنك استخدام نفس المنطق مع `getLocalizedUrl` للتنقل إلى عنوان URL المحلي:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب اللغة\n```\n\n### (اختياري) الخطوة 9: مبدل اللغة\n\nللسماح للمستخدمين بتغيير اللغة، قم بتحديث عنوان URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // سيقوم بتعيين اللغة في المتجر وتفعيل onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (اختياري) الخطوة 10: إضافة وكيل خلفي (backend proxy)\n\nلإضافة وكيل خلفي إلى تطبيق SvelteKit الخاص بك، يمكنك استخدام دالة `intlayerProxy` المقدمة من إضافة `vite-intlayer`. ستقوم هذه الإضافة بالكشف تلقائيًا عن أفضل لغة للمستخدم بناءً على عنوان URL، والكوكيز، وتفضيلات لغة المتصفح.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (اختياري) الخطوة 11: إعداد محرر / نظام إدارة محتوى intlayer\n\nلإعداد محرر intlayer، يجب عليك اتباع [توثيق محرر intlayer](/ar/doc/concept/editor).\n\nلإعداد نظام إدارة محتوى intlayer، يجب عليك اتباع [توثيق نظام إدارة محتوى intlayer](/ar/doc/concept/cms).\n\nلكي تتمكن من عرض محدد محرر intlayer، سيتعين عليك استخدام بناء جملة المكون في محتوى intlayer الخاص بك.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### إعدادات Git\n\nيوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer\n.intlayer\n```\n\n### (اختياري) خطوة 1 : استخراج محتوى مكوناتك\n\nإذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.\n\nلتسهيل هذه العملية، يقترح Intlayer [مترجمًا](/ar/doc/compiler) / [مستخرجًا](/ar/doc/concept/cli/extract) لتحويل مكوناتك واستخراج المحتوى.\n\nلإعداده، يمكنك إضافة قسم `compiler` في ملف `intlayer.config.ts` الخاص بك:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... بقية التكوين الخاص بك\n compiler: {\n /**\n * يشير إلى ما إذا كان يجب تمكين المترجم.\n */\n enabled: true,\n\n /**\n * يحدد مسار ملفات المخرجات\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * يشير إلى ما إذا كان يجب حفظ المكونات بعد تحويلها. بهذه الطريقة، يمكن تشغيل المترجم مرة واحدة فقط لتحويل التطبيق، ثم يمكن إزالته.\n */\n saveComponents: false,\n\n /**\n * بادئة مفتاح القاموس\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nقم بتشغيل المستخرج لتحويل مكوناتك واستخراج المحتوى\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\n```bash packageManager=\"npm\"\nnpm install @intlayer/babel --save-dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm add @intlayer/babel --save-dev\n```\n\n```bash packageManager=\"yarn\"\nyarn add @intlayer/babel --save-dev\n```\n\n```bash packageManager=\"bun\"\nbun add @intlayer/babel --dev\n```\n\n```js fileName=\"babel.config.js\"\nconst {\n intlayerExtractBabelPlugin,\n getExtractPluginOptions,\n} = require(\"@intlayer/babel\");\n\nmodule.exports = {\n presets: [\"next/babel\"],\n plugins: [\n // استخراج المحتوى من المكونات إلى القواميس\n [intlayerExtractBabelPlugin, getExtractPluginOptions()],\n ],\n};\n```\n\n```bash packageManager=\"npm\"\nnpm run build # أو npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### التعمق أكثر\n\n- **المحرر المرئي**: دمج [المحرر المرئي لـ Intlayer](/ar/doc/concept/editor) لتحرير الترجمات مباشرة من واجهة المستخدم.\n- **نظام إدارة المحتوى (CMS)**: قم بفصل إدارة المحتوى الخاصة بك باستخدام [نظام إدارة المحتوى Intlayer](/ar/doc/concept/cms).\n","about":"اكتشف كيفية جعل موقع SvelteKit الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته باستخدام العرض من جانب الخادم (SSR).","url":"https://intlayer.org/ar/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"التدويل, الوثائق, Intlayer, SvelteKit, جافا سكريبت, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"المطورون ومديرو المحتوى"}}

إنشاء:2025-11-20آخر تحديث:2026-05-06

عرض قالب التطبيق على GitHub

هذه الصفحة لديها قالب تطبيق متاح.

عرض تطبيق العرض

هذه الصفحة ترتبط بعرض مباشر للقالب.

استخدم هذه الصفحة والموفر AI الذي تريده

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

تاريخ الإصدارات

"تحديث استخدام واجهة برمجة تطبيقات useIntlayer في Solid للوصول المباشر إلى الخصائص"
v8.9.04‏/5‏/2026
"إضافة أمر init"
v7.5.930‏/12‏/2025
"بدء التاريخ"
v7.1.1020‏/11‏/2025

تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية

تعديل هذه الوثيقة

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

نسخ

نسخ الـ Markdown من المستند إلى الحافظة

ترجمة موقع SvelteKit الخاص بك باستخدام Intlayer | التدويل (i18n)

ide.intlayer.org

جدول المحتويات

ما هو Intlayer؟

Intlayer هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة. تعمل بسلاسة مع قدرات العرض من جانب الخادم (SSR) في SvelteKit.

مع Intlayer، يمكنك:

إدارة الترجمات بسهولة باستخدام قواميس إعلانية على مستوى المكون.
توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي.
ضمان دعم TypeScript بأنواع مولدة تلقائيًا.
الاستفادة من SSR في SvelteKit لتدويل صديق لمحركات البحث (SEO).

دليل خطوة بخطوة لإعداد Intlayer في تطبيق SvelteKit

للبدء، أنشئ مشروع SvelteKit جديد. إليك الهيكل النهائي الذي سننشئه:

bash

نسخ الكود

نسخ الكود إلى الحافظة

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

الخطوة 1: تثبيت التبعيات

قم بتثبيت الحزم اللازمة باستخدام npm:

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: الحزمة الأساسية للترجمة الدولية (i18n).
svelte-intlayer: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
vite-intlayer: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.

الخطوة 2: تكوين مشروعك

قم بإنشاء ملف تكوين في جذر مشروعك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك

قم بتحديث ملف vite.config.ts الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

الخطوة 4: إعلان المحتوى الخاص بك

قم بإنشاء ملفات إعلان المحتوى في أي مكان داخل مجلد src الخاص بك (مثلًا، src/lib/content أو بجانب مكوناتك). تقوم هذه الملفات بتعريف المحتوى القابل للترجمة لتطبيقك باستخدام دالة t() لكل لغة.

الخطوة 5: استخدام Intlayer في مكوناتك

الآن يمكنك استخدام دالة useIntlayer في أي مكون Svelte. فهي تُرجع مخزنًا تفاعليًا يتم تحديثه تلقائيًا عند تغيير اللغة. ستلتزم الدالة تلقائيًا باللغة الحالية (سواء أثناء SSR أو التنقل على جانب العميل).

ملاحظة: تُرجع useIntlayer مخزن Svelte، لذا تحتاج إلى استخدام بادئة `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: كيفية ترجمة تطبيق SvelteKit الخاص بك – دليل i18n 2026 description: اكتشف كيفية جعل موقع SvelteKit الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته باستخدام العرض من جانب الخادم (SSR). keywords:

التدويل
الوثائق
Intlayer
SvelteKit
جافا سكريبت
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: بدء التاريخ

ترجمة موقع SvelteKit الخاص بك باستخدام Intlayer | التدويل (i18n)

جدول المحتويات

ما هو Intlayer؟

مع Intlayer، يمكنك:

إدارة الترجمات بسهولة باستخدام قواميس إعلانية على مستوى المكون.
توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي.
ضمان دعم TypeScript بأنواع مولدة تلقائيًا.
الاستفادة من SSR في SvelteKit لتدويل صديق لمحركات البحث (SEO).

دليل خطوة بخطوة لإعداد Intlayer في تطبيق SvelteKit

للبدء، أنشئ مشروع SvelteKit جديد. إليك الهيكل النهائي الذي سننشئه:

bash

نسخ الكود

نسخ الكود إلى الحافظة

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

الخطوة 1: تثبيت التبعيات

قم بتثبيت الحزم اللازمة باستخدام npm:

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: الحزمة الأساسية للترجمة الدولية (i18n).
svelte-intlayer: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
vite-intlayer: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.

الخطوة 2: تكوين مشروعك

قم بإنشاء ملف تكوين في جذر مشروعك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك

قم بتحديث ملف vite.config.ts الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

الخطوة 4: إعلان المحتوى الخاص بك

الخطوة 5: استخدام Intlayer في مكوناتك

للوصول إلى قيمته التفاعلية (مثلًا، $content.title).

src/lib/components/Component.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" تتوافق مع المفتاح المُعرف في الخطوة 4  const content = useIntlayer("hero-section");</script><!-- عرض المحتوى كمحتوى بسيط --><h1>{$content.title}</h1><!-- لعرض المحتوى قابل للتحرير باستخدام المحرر --><h1>{@const Title = $content.title}<Title /></h1><!-- لعرض المحتوى كنص --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(اختياري) الخطوة 6: إعداد التوجيه

توضح الخطوات التالية كيفية إعداد التوجيه بناءً على اللغة في SvelteKit. يتيح هذا لعناوين URL الخاصة بك أن تتضمن بادئة اللغة (مثل /en/about، /fr/about) لتحسين تحسين محركات البحث وتجربة المستخدم.

bash

نسخ الكود

نسخ الكود إلى الحافظة

.└─── src    ├── app.d.ts                  # تعريف نوع اللغة    ├── hooks.server.ts           # إدارة توجيه اللغة    ├── lib    │   └── getLocale.ts          # التحقق من اللغة من الهيدر أو الكوكيز    ├── params    │   └── locale.ts             # تعريف معامل اللغة    └── routes        ├── [[locale=locale]]     # تغليف في مجموعة مسارات لتعيين اللغة        │   ├── +layout.svelte    # التخطيط المحلي للمسار        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # التخطيط الجذري للخطوط والأنماط العامة

الخطوة 7: التعامل مع اكتشاف اللغة على جانب الخادم (Hooks)

في SvelteKit، يحتاج الخادم إلى معرفة لغة المستخدم لعرض المحتوى الصحيح أثناء العرض من جانب الخادم (SSR). نستخدم hooks.server.ts لاكتشاف اللغة من عنوان URL أو ملفات تعريف الارتباط.

قم بإنشاء أو تعديل الملف src/hooks.server.ts:

src/hooks.server.ts

نسخ الكود

نسخ الكود إلى الحافظة

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // تحقق مما إذا كان المسار الحالي يبدأ بالفعل بلغة (مثل /fr، /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // إذا لم تكن هناك لغة في عنوان URL (مثل زيارة المستخدم لـ "/")، قم بإعادة توجيههم  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // إعادة توجيه مؤقتة    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

ثم، أنشئ مساعدًا للحصول على لغة المستخدم من حدث الطلب:

src/lib/getLocale.ts

نسخ الكود

نسخ الكود إلى الحافظة

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * الحصول على لغة المستخدم من حدث الطلب. * تُستخدم هذه الدالة في الخطاف `handle` في الملف `src/hooks.server.ts`. * * تحاول أولاً الحصول على اللغة من تخزين Intlayer (الكوكيز أو رؤوس مخصصة). * إذا لم يتم العثور على اللغة، تعود إلى تفاوض "Accept-Language" الخاص بالمتصفح. * * @param event - حدث الطلب من SvelteKit * @returns لغة المستخدم */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // محاولة الحصول على اللغة من تخزين Intlayer (الكوكيز أو الرؤوس)  const storedLocale = getLocaleFromStorage({    // الوصول إلى ملفات تعريف الارتباط في SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // الوصول إلى رؤوس الطلب في SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // الرجوع إلى تفاوض "Accept-Language" في المتصفح  const negotiatorHeaders: Record<string, string> = {};  // تحويل كائن رؤوس SvelteKit إلى سجل بسيط Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // التحقق من اللغة من رأس `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // إرجاع اللغة الافتراضية إذا لم يتم العثور على تطابق  return defaultLocale;};

getLocaleFromStorage سيتحقق من اللغة من الهيدر أو الكوكي حسب تكوينك. راجع Configuration لمزيد من التفاصيل.

دالة localeDetector ستتعامل مع هيدر Accept-Language وتعيد أفضل تطابق.

إذا لم يتم تكوين اللغة، نريد إرجاع خطأ 404. لجعل الأمر أسهل، يمكننا إنشاء دالة match للتحقق مما إذا كانت اللغة صالحة:

/src/params/locale.ts

نسخ الكود

نسخ الكود إلى الحافظة

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

ملاحظة: تأكد من أن ملف src/app.d.ts الخاص بك يتضمن تعريف اللغة:
typescript
نسخ الكود
نسخ الكود إلى الحافظة
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

بالنسبة لملف +layout.svelte، يمكننا إزالة كل شيء، للاحتفاظ فقط بالمحتوى الثابت، غير المرتبط بالتدويل (i18n):

src/+layout.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

ثم، أنشئ صفحة وتخطيط جديد تحت مجموعة [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

نسخ الكود

نسخ الكود إلى الحافظة

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// استخدم النوع العام Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // تهيئة Intlayer باستخدام اللغة من المسار  $effect(() => {      setupIntlayer(data.locale);  });    // استخدام قاموس محتوى التخطيط    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

نسخ الكود

نسخ الكود إلى الحافظة

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // استخدم قاموس محتوى الصفحة الرئيسية    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(اختياري) الخطوة 8: الروابط الدولية

من أجل تحسين محركات البحث (SEO)، يُنصح بإضافة بادئة اللغة إلى مساراتك (على سبيل المثال، /en/about، /fr/about). يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية لأي رابط.

src/lib/components/LocalizedLink.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // مساعد لإضافة بادئة اللغة إلى عنوان URL الحالي  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

إذا كنت تستخدم goto من SvelteKit، يمكنك استخدام نفس المنطق مع getLocalizedUrl للتنقل إلى عنوان URL المحلي:

typescript

نسخ الكود

نسخ الكود إلى الحافظة

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب اللغة

(اختياري) الخطوة 9: مبدل اللغة

للسماح للمستخدمين بتغيير اللغة، قم بتحديث عنوان URL.

src/lib/components/LanguageSwitcher.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // سيقوم بتعيين اللغة في المتجر وتفعيل onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(اختياري) الخطوة 10: إضافة وكيل خلفي (backend proxy)

لإضافة وكيل خلفي إلى تطبيق SvelteKit الخاص بك، يمكنك استخدام دالة intlayerProxy المقدمة من إضافة vite-intlayer. ستقوم هذه الإضافة بالكشف تلقائيًا عن أفضل لغة للمستخدم بناءً على عنوان URL، والكوكيز، وتفضيلات لغة المتصفح.

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(اختياري) الخطوة 11: إعداد محرر / نظام إدارة محتوى intlayer

لإعداد محرر intlayer، يجب عليك اتباع توثيق محرر intlayer.

لإعداد نظام إدارة محتوى intlayer، يجب عليك اتباع توثيق نظام إدارة محتوى intlayer.

لكي تتمكن من عرض محدد محرر intlayer، سيتعين عليك استخدام بناء جملة المكون في محتوى intlayer الخاص بك.

Component.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- عرض المحتوى كمحتوى بسيط -->  <h1>{$content.title}</h1>  <!-- عرض المحتوى كمكون (مطلوب من قبل المحرر) -->  {@const Component = $content.component}<Component /></div>

إعدادات Git

يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer.

.gitignore

نسخ الكود

نسخ الكود إلى الحافظة

# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer

(اختياري) خطوة 1 : استخراج محتوى مكوناتك

إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.

لتسهيل هذه العملية، يقترح Intlayer مترجمًا / مستخرجًا لتحويل مكوناتك واستخراج المحتوى.

لإعداده، يمكنك إضافة قسم compiler في ملف intlayer.config.ts الخاص بك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... بقية التكوين الخاص بك
  compiler: {
    /**
     * يشير إلى ما إذا كان يجب تمكين المترجم.
     */
    enabled: true,

    /**
     * يحدد مسار ملفات المخرجات
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * يشير إلى ما إذا كان يجب حفظ المكونات بعد تحويلها. بهذه الطريقة، يمكن تشغيل المترجم مرة واحدة فقط لتحويل التطبيق، ثم يمكن إزالته.
     */
    saveComponents: false,

    /**
     * بادئة مفتاح القاموس
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

قم بتشغيل المستخرج لتحويل مكوناتك واستخراج المحتوى

bash

نسخ الكود

نسخ الكود إلى الحافظة

npx intlayer extract

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install @intlayer/babel --save-dev

babel.config.js

نسخ الكود

نسخ الكود إلى الحافظة

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // استخراج المحتوى من المكونات إلى القواميس   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm run build # أو npm run dev

التعمق أكثر

المحرر المرئي: دمج المحرر المرئي لـ Intlayer لتحرير الترجمات مباشرة من واجهة المستخدم.
نظام إدارة المحتوى (CMS): قم بفصل إدارة المحتوى الخاصة بك باستخدام نظام إدارة المحتوى Intlayer.

Vite و Svelte

Vite و Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // سيقوم بتعيين اللغة في المتجر وتفعيل onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

إنشاء:2025-11-20آخر تحديث:2026-05-06

عرض قالب التطبيق على GitHub

هذه الصفحة لديها قالب تطبيق متاح.

عرض تطبيق العرض

هذه الصفحة ترتبط بعرض مباشر للقالب.

استخدم هذه الصفحة والموفر AI الذي تريده

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

تاريخ الإصدارات

"تحديث استخدام واجهة برمجة تطبيقات useIntlayer في Solid للوصول المباشر إلى الخصائص"
v8.9.04‏/5‏/2026
"إضافة أمر init"
v7.5.930‏/12‏/2025
"بدء التاريخ"
v7.1.1020‏/11‏/2025

تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية

تعديل هذه الوثيقة

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

نسخ

نسخ الـ Markdown من المستند إلى الحافظة

ترجمة موقع SvelteKit الخاص بك باستخدام Intlayer | التدويل (i18n)

ide.intlayer.org

جدول المحتويات

ما هو Intlayer؟

مع Intlayer، يمكنك:

إدارة الترجمات بسهولة باستخدام قواميس إعلانية على مستوى المكون.
توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي.
ضمان دعم TypeScript بأنواع مولدة تلقائيًا.
الاستفادة من SSR في SvelteKit لتدويل صديق لمحركات البحث (SEO).

دليل خطوة بخطوة لإعداد Intlayer في تطبيق SvelteKit

للبدء، أنشئ مشروع SvelteKit جديد. إليك الهيكل النهائي الذي سننشئه:

bash

نسخ الكود

نسخ الكود إلى الحافظة

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

الخطوة 1: تثبيت التبعيات

قم بتثبيت الحزم اللازمة باستخدام npm:

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: الحزمة الأساسية للترجمة الدولية (i18n).
svelte-intlayer: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
vite-intlayer: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.

الخطوة 2: تكوين مشروعك

قم بإنشاء ملف تكوين في جذر مشروعك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك

قم بتحديث ملف vite.config.ts الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

الخطوة 4: إعلان المحتوى الخاص بك

الخطوة 5: استخدام Intlayer في مكوناتك

ملاحظة: تُرجع useIntlayer مخزن Svelte، لذا تحتاج إلى استخدام بادئة `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: كيفية ترجمة تطبيق SvelteKit الخاص بك – دليل i18n 2026 description: اكتشف كيفية جعل موقع SvelteKit الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته باستخدام العرض من جانب الخادم (SSR). keywords:

التدويل
الوثائق
Intlayer
SvelteKit
جافا سكريبت
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: بدء التاريخ

ترجمة موقع SvelteKit الخاص بك باستخدام Intlayer | التدويل (i18n)

جدول المحتويات

ما هو Intlayer؟

مع Intlayer، يمكنك:

إدارة الترجمات بسهولة باستخدام قواميس إعلانية على مستوى المكون.
توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي.
ضمان دعم TypeScript بأنواع مولدة تلقائيًا.
الاستفادة من SSR في SvelteKit لتدويل صديق لمحركات البحث (SEO).

دليل خطوة بخطوة لإعداد Intlayer في تطبيق SvelteKit

للبدء، أنشئ مشروع SvelteKit جديد. إليك الهيكل النهائي الذي سننشئه:

bash

نسخ الكود

نسخ الكود إلى الحافظة

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

الخطوة 1: تثبيت التبعيات

قم بتثبيت الحزم اللازمة باستخدام npm:

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: الحزمة الأساسية للترجمة الدولية (i18n).
svelte-intlayer: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
vite-intlayer: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.

الخطوة 2: تكوين مشروعك

قم بإنشاء ملف تكوين في جذر مشروعك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك

قم بتحديث ملف vite.config.ts الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // ترتيب الإضافات مهم، يجب وضع Intlayer قبل SvelteKit});

الخطوة 4: إعلان المحتوى الخاص بك

الخطوة 5: استخدام Intlayer في مكوناتك

للوصول إلى قيمته التفاعلية (مثلًا، $content.title).

src/lib/components/Component.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" تتوافق مع المفتاح المُعرف في الخطوة 4  const content = useIntlayer("hero-section");</script><!-- عرض المحتوى كمحتوى بسيط --><h1>{$content.title}</h1><!-- لعرض المحتوى قابل للتحرير باستخدام المحرر --><h1>{@const Title = $content.title}<Title /></h1><!-- لعرض المحتوى كنص --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" تتوافق مع المفتاح المُعرف في الخطوة 4  const content = useIntlayer("hero-section");</script><!-- عرض المحتوى كمحتوى بسيط --><h1>{$content.title}</h1><!-- لعرض المحتوى قابل للتحرير باستخدام المحرر --><h1>{@const Title = $content.title}<Title /></h1><!-- لعرض المحتوى كنص --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(اختياري) الخطوة 6: إعداد التوجيه

bash

نسخ الكود

نسخ الكود إلى الحافظة

.└─── src    ├── app.d.ts                  # تعريف نوع اللغة    ├── hooks.server.ts           # إدارة توجيه اللغة    ├── lib    │   └── getLocale.ts          # التحقق من اللغة من الهيدر أو الكوكيز    ├── params    │   └── locale.ts             # تعريف معامل اللغة    └── routes        ├── [[locale=locale]]     # تغليف في مجموعة مسارات لتعيين اللغة        │   ├── +layout.svelte    # التخطيط المحلي للمسار        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # التخطيط الجذري للخطوط والأنماط العامة

.└─── src    ├── app.d.ts                  # تعريف نوع اللغة    ├── hooks.server.ts           # إدارة توجيه اللغة    ├── lib    │   └── getLocale.ts          # التحقق من اللغة من الهيدر أو الكوكيز    ├── params    │   └── locale.ts             # تعريف معامل اللغة    └── routes        ├── [[locale=locale]]     # تغليف في مجموعة مسارات لتعيين اللغة        │   ├── +layout.svelte    # التخطيط المحلي للمسار        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # التخطيط الجذري للخطوط والأنماط العامة

الخطوة 7: التعامل مع اكتشاف اللغة على جانب الخادم (Hooks)

قم بإنشاء أو تعديل الملف src/hooks.server.ts:

src/hooks.server.ts

نسخ الكود

نسخ الكود إلى الحافظة

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // تحقق مما إذا كان المسار الحالي يبدأ بالفعل بلغة (مثل /fr، /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // إذا لم تكن هناك لغة في عنوان URL (مثل زيارة المستخدم لـ "/")، قم بإعادة توجيههم  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // إعادة توجيه مؤقتة    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // تحقق مما إذا كان المسار الحالي يبدأ بالفعل بلغة (مثل /fr، /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // إذا لم تكن هناك لغة في عنوان URL (مثل زيارة المستخدم لـ "/")، قم بإعادة توجيههم  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // إعادة توجيه مؤقتة    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

ثم، أنشئ مساعدًا للحصول على لغة المستخدم من حدث الطلب:

src/lib/getLocale.ts

نسخ الكود

نسخ الكود إلى الحافظة

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * الحصول على لغة المستخدم من حدث الطلب. * تُستخدم هذه الدالة في الخطاف `handle` في الملف `src/hooks.server.ts`. * * تحاول أولاً الحصول على اللغة من تخزين Intlayer (الكوكيز أو رؤوس مخصصة). * إذا لم يتم العثور على اللغة، تعود إلى تفاوض "Accept-Language" الخاص بالمتصفح. * * @param event - حدث الطلب من SvelteKit * @returns لغة المستخدم */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // محاولة الحصول على اللغة من تخزين Intlayer (الكوكيز أو الرؤوس)  const storedLocale = getLocaleFromStorage({    // الوصول إلى ملفات تعريف الارتباط في SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // الوصول إلى رؤوس الطلب في SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // الرجوع إلى تفاوض "Accept-Language" في المتصفح  const negotiatorHeaders: Record<string, string> = {};  // تحويل كائن رؤوس SvelteKit إلى سجل بسيط Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // التحقق من اللغة من رأس `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // إرجاع اللغة الافتراضية إذا لم يتم العثور على تطابق  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * الحصول على لغة المستخدم من حدث الطلب. * تُستخدم هذه الدالة في الخطاف `handle` في الملف `src/hooks.server.ts`. * * تحاول أولاً الحصول على اللغة من تخزين Intlayer (الكوكيز أو رؤوس مخصصة). * إذا لم يتم العثور على اللغة، تعود إلى تفاوض "Accept-Language" الخاص بالمتصفح. * * @param event - حدث الطلب من SvelteKit * @returns لغة المستخدم */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // محاولة الحصول على اللغة من تخزين Intlayer (الكوكيز أو الرؤوس)  const storedLocale = getLocaleFromStorage({    // الوصول إلى ملفات تعريف الارتباط في SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // الوصول إلى رؤوس الطلب في SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // الرجوع إلى تفاوض "Accept-Language" في المتصفح  const negotiatorHeaders: Record<string, string> = {};  // تحويل كائن رؤوس SvelteKit إلى سجل بسيط Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // التحقق من اللغة من رأس `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // إرجاع اللغة الافتراضية إذا لم يتم العثور على تطابق  return defaultLocale;};

getLocaleFromStorage سيتحقق من اللغة من الهيدر أو الكوكي حسب تكوينك. راجع Configuration لمزيد من التفاصيل.

دالة localeDetector ستتعامل مع هيدر Accept-Language وتعيد أفضل تطابق.

/src/params/locale.ts

نسخ الكود

نسخ الكود إلى الحافظة

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

ملاحظة: تأكد من أن ملف src/app.d.ts الخاص بك يتضمن تعريف اللغة:
typescript
نسخ الكود
نسخ الكود إلى الحافظة
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

بالنسبة لملف +layout.svelte، يمكننا إزالة كل شيء، للاحتفاظ فقط بالمحتوى الثابت، غير المرتبط بالتدويل (i18n):

src/+layout.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

ثم، أنشئ صفحة وتخطيط جديد تحت مجموعة [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

نسخ الكود

نسخ الكود إلى الحافظة

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// استخدم النوع العام Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// استخدم النوع العام Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // تهيئة Intlayer باستخدام اللغة من المسار  $effect(() => {      setupIntlayer(data.locale);  });    // استخدام قاموس محتوى التخطيط    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // تهيئة Intlayer باستخدام اللغة من المسار  $effect(() => {      setupIntlayer(data.locale);  });    // استخدام قاموس محتوى التخطيط    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

نسخ الكود

نسخ الكود إلى الحافظة

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // استخدم قاموس محتوى الصفحة الرئيسية    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // استخدم قاموس محتوى الصفحة الرئيسية    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(اختياري) الخطوة 8: الروابط الدولية

src/lib/components/LocalizedLink.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // مساعد لإضافة بادئة اللغة إلى عنوان URL الحالي  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // مساعد لإضافة بادئة اللغة إلى عنوان URL الحالي  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

إذا كنت تستخدم goto من SvelteKit، يمكنك استخدام نفس المنطق مع getLocalizedUrl للتنقل إلى عنوان URL المحلي:

typescript

نسخ الكود

نسخ الكود إلى الحافظة

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب اللغة

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب اللغة

(اختياري) الخطوة 9: مبدل اللغة

للسماح للمستخدمين بتغيير اللغة، قم بتحديث عنوان URL.

src/lib/components/LanguageSwitcher.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // سيقوم بتعيين اللغة في المتجر وتفعيل onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // سيقوم بتعيين اللغة في المتجر وتفعيل onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(اختياري) الخطوة 10: إضافة وكيل خلفي (backend proxy)

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(اختياري) الخطوة 11: إعداد محرر / نظام إدارة محتوى intlayer

لإعداد محرر intlayer، يجب عليك اتباع توثيق محرر intlayer.

لإعداد نظام إدارة محتوى intlayer، يجب عليك اتباع توثيق نظام إدارة محتوى intlayer.

لكي تتمكن من عرض محدد محرر intlayer، سيتعين عليك استخدام بناء جملة المكون في محتوى intlayer الخاص بك.

Component.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- عرض المحتوى كمحتوى بسيط -->  <h1>{$content.title}</h1>  <!-- عرض المحتوى كمكون (مطلوب من قبل المحرر) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- عرض المحتوى كمحتوى بسيط -->  <h1>{$content.title}</h1>  <!-- عرض المحتوى كمكون (مطلوب من قبل المحرر) -->  {@const Component = $content.component}<Component /></div>

إعدادات Git

يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer.

.gitignore

نسخ الكود

نسخ الكود إلى الحافظة

# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer

# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer

(اختياري) خطوة 1 : استخراج محتوى مكوناتك

إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.

لتسهيل هذه العملية، يقترح Intlayer مترجمًا / مستخرجًا لتحويل مكوناتك واستخراج المحتوى.

لإعداده، يمكنك إضافة قسم compiler في ملف intlayer.config.ts الخاص بك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... بقية التكوين الخاص بك
  compiler: {
    /**
     * يشير إلى ما إذا كان يجب تمكين المترجم.
     */
    enabled: true,

    /**
     * يحدد مسار ملفات المخرجات
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * يشير إلى ما إذا كان يجب حفظ المكونات بعد تحويلها. بهذه الطريقة، يمكن تشغيل المترجم مرة واحدة فقط لتحويل التطبيق، ثم يمكن إزالته.
     */
    saveComponents: false,

    /**
     * بادئة مفتاح القاموس
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

قم بتشغيل المستخرج لتحويل مكوناتك واستخراج المحتوى

bash

نسخ الكود

نسخ الكود إلى الحافظة

npx intlayer extract

npx intlayer extract

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm install @intlayer/babel --save-dev

npm install @intlayer/babel --save-dev

babel.config.js

نسخ الكود

نسخ الكود إلى الحافظة

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // استخراج المحتوى من المكونات إلى القواميس   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // استخراج المحتوى من المكونات إلى القواميس   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm run build # أو npm run dev

npm run build # أو npm run dev

التعمق أكثر

المحرر المرئي: دمج المحرر المرئي لـ Intlayer لتحرير الترجمات مباشرة من واجهة المستخدم.
نظام إدارة المحتوى (CMS): قم بفصل إدارة المحتوى الخاصة بك باستخدام نظام إدارة المحتوى Intlayer.

Vite و Svelte

Vite و Preact