\n```\n\n> إذا كنت ترغب في استخدام محتواك في سمة `سلسلة` (string)، مثل `alt` و `title` و `href` و `aria-label` وما إلى ذلك، يمكنك استخدام قيمة الدالة، مثل:\n\n> ```html\n> \n> \n> \n> ```\n\n> **ملاحظة حول إعداد التوجيه:**\n> تعتمد بنية الدليل التي تستخدمها على إعداد `middleware.routing` في `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (افتراضي):** يحافظ على اللغة الافتراضية في الجذر (بدون بادئة) ويضيف بادئات للغات الأخرى. استخدم `[...locale]` لتغطية جميع الحالات.\n> - **`prefix-all`:** تحصل جميع الروابط على بادئة لغة. يمكنك استخدام `[locale]` القياسي إذا كنت لا تحتاج إلى معالجة الجذر بشكل منفصل.\n> - **`search-param` أو `no-prefix`:** لا يلزم وجود أدلة لغة. يتم التعامل مع اللغة عبر معلمات الاستعلام أو ملفات تعريف الارتباط.\n\n### الخطوة 6: إنشاء عنصر Lit مخصص\n\nأنشئ عنصر Lit مخصصًا. استدعِ `installIntlayer` في `connectedCallback` باستخدام خاصية `locale` المحملة من الخادم لتهيئة singleton الترجمة في جانب العميل.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // التهيئة باللغة المكتشفة من الخادم\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> يتم تمرير خاصية `locale` من صفحة Astro (اكتشاف الخادم) وتستخدم لتهيئة `installIntlayer` في `connectedCallback` ، مما يحدد اللغة الأولية لجميع خطافات `ReactiveController` داخل العنصر.\n\n> يتم تسجيل `useIntlayer` كـ `ReactiveController`. ويطلب تلقائيًا إعادة رندر العنصر عند تغيير اللغة، لذلك لا توجد حاجة لمنطق اشتراك (subscription logic) إضافي.\n\n### الخطوة 7: إضافة مبدل اللغة\n\nتتوفر وظيفة تغيير اللغة مباشرة داخل طريقة `render()` للعنصر المخصص لـ Lit (انظر الخطوة 6 أعلاه). وهي تستخدم `useLocale` من `lit-intlayer` وتنتقل إلى الرابط المترجم عندما يختار المستخدم لغة جديدة:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// داخل فئة LitElement ، بعد تهيئة useLocale في الخطوة 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // الانتقال إلى الرابط المترجم عند تغيير اللغة\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **ملاحظة حول تفاعلية Lit:**\n> تقوم `useLocale` بإرجاع `ReactiveController`. عند استدعاء `setLocale` ، يطلب المتحكم تلقائيًا إعادة رندر، مما يؤدي إلى تحديث حالة الزر النشط دون معالجة DOM يدويًا.\n\n> **ملاحظة حول الاستمرارية:**\n> يضمن استخدام `onLocaleChange` لإعادة التوجيه عبر `window.location.href` زيارة الرابط الجديد للغة، مما يسمح لوسيط Intlayer بتعيين كوكيز اللغة وتذكر تفضيلات المستخدم في الزيارات المستقبلية.\n\n### الخطوة 8: خريطة الموقع وRobots.txt\n\nتوفر Intlayer أدوات لإنشاء خريطة موقع مترجمة وملفات robots.txt ديناميكيًا.\n\n#### خريطة الموقع (Sitemap)\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nأنشئ `src/pages/sitemap.xml.ts` لإنشاء خريطة موقع تتضمن جميع مساراتك المترجمة.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nأنشئ `src/pages/robots.txt.ts` للتحكم في زحف محركات البحث.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### تكوين TypeScript\n\nتستخدم Intlayer تقنية توسيع الوحدات (module augmentation) للاستفادة من TypeScript، مما يجعل برمجتك أكثر قوة. إذا كنت تستخدم صيغة الـ decorators ، فتأكد من تفعيل `experimentalDecorators` في خيارات المترجم (compiler options).\n\n\n\n\n\nتأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المولدة تلقائيًا.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // مطلوب لدعم decorators في Lit\n },\n include: [\n // ... تكوين TypeScript الحالي الخاص بك\n \".intlayer/**/*.ts\", // تضمين الأنواع المولدة تلقائيًا\n ],\n}\n```\n\n### تكوين Git\n\nيوصى بتجاهل الملفات التي تنشئها Intlayer. هذا يتجنب إضافتها إلى مستودع Git الخاص بك.\n\nللقيام بذلك، أضف التعليمات التالية إلى ملف `.gitignore` الخاص بك:\n\n```bash\n# تجاهل الملفات المولدة بواسطة Intlayer\n.intlayer\n```\n\n### إضافة VS Code\n\nلتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.\n\n[التثبيت من VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nتوفر هذه الإضافة:\n\n- **إكمال تلقائي** لمفاتيح الترجمة.\n- **اكتشاف الأخطاء في الوقت الفعلي** للترجمات المفقودة.\n- **معاينة مضمنة** للمحتوى المترجم.\n- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.\n\nلمزيد من المعلومات حول استخدام الإضافة، راجع [توثيق إضافة VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Optional) Step 15: Extract the content of your components\n\nIf you have an existing codebase, transforming thousands of files can be time-consuming.\n\nTo ease this process, Intlayer propose a [compiler](/ar/doc/compiler) / [extractor](/ar/doc/concept/cli/extract) to transform your components and extract the content.\n\nTo set it up, you can add a `compiler` section in your `intlayer.config.ts` file:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Rest of your config\n compiler: {\n /**\n * Indicates if the compiler should be enabled.\n */\n enabled: true,\n\n /**\n * Defines the output files path\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indicates if the components should be saved after being transformed.\n *\n * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.\n *\n * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.\n */\n saveComponents: false,\n\n /**\n * Dictionary key prefix\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nRun the extractor to transform your components and extract the content\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\nUpdate your `vite.config.ts` to include the `intlayerCompiler` plugin:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Adds the compiler plugin\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Or 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إذا كنت تريد معرفة المزيد، يمكنك أيضًا تنفيذ [المحرر المرئي](/ar/doc/concept/editor) أو استخدام [نظام إدارة المحتوى (CMS)](/ar/doc/concept/cms) لإخراج محتواك خارجيًا.\n","about":"تعرف على كيفية إضافة التدويل (i18n) إلى موقع Astro + Lit الخاص بك باستخدام Intlayer. اتبع هذا الدليل لجعل موقعك متعدد اللغات.","url":"https://intlayer.org/ar/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"التدويل, توثيق, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"المطورون ومديرو المحتوى"}}

إنشاء:2026-04-24آخر تحديث:2026-05-06