@intlayer/docs 7.1.9 → 7.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/generated/docs.entry.cjs +19 -0
  3. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  4. package/dist/esm/generated/docs.entry.mjs +19 -0
  5. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  6. package/dist/types/generated/docs.entry.d.ts +1 -0
  7. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  8. package/docs/ar/intlayer_with_svelte_kit.md +738 -0
  9. package/docs/ar/intlayer_with_vite+svelte.md +288 -104
  10. package/docs/de/intlayer_with_svelte_kit.md +738 -0
  11. package/docs/de/intlayer_with_vite+svelte.md +302 -101
  12. package/docs/en/intlayer_with_nextjs_16.md +10 -2
  13. package/docs/en/intlayer_with_svelte_kit.md +570 -0
  14. package/docs/en/intlayer_with_vite+svelte.md +22 -6
  15. package/docs/en/introduction.md +2 -0
  16. package/docs/en-GB/intlayer_with_svelte_kit.md +738 -0
  17. package/docs/en-GB/intlayer_with_vite+svelte.md +262 -84
  18. package/docs/es/intlayer_with_svelte_kit.md +738 -0
  19. package/docs/es/intlayer_with_vite+svelte.md +300 -107
  20. package/docs/fr/intlayer_with_svelte_kit.md +770 -0
  21. package/docs/fr/intlayer_with_vite+svelte.md +297 -101
  22. package/docs/hi/intlayer_with_svelte_kit.md +738 -0
  23. package/docs/hi/intlayer_with_vite+svelte.md +298 -108
  24. package/docs/id/intlayer_with_svelte_kit.md +738 -0
  25. package/docs/id/intlayer_with_vite+svelte.md +277 -99
  26. package/docs/it/intlayer_with_svelte_kit.md +770 -0
  27. package/docs/it/intlayer_with_vite+svelte.md +275 -99
  28. package/docs/ja/intlayer_with_svelte_kit.md +738 -0
  29. package/docs/ja/intlayer_with_vite+svelte.md +295 -110
  30. package/docs/ko/intlayer_with_svelte_kit.md +738 -0
  31. package/docs/ko/intlayer_with_vite+svelte.md +286 -199
  32. package/docs/pl/intlayer_with_svelte_kit.md +740 -0
  33. package/docs/pl/intlayer_with_vite+svelte.md +273 -101
  34. package/docs/pt/intlayer_with_svelte_kit.md +772 -0
  35. package/docs/pt/intlayer_with_vite+svelte.md +290 -96
  36. package/docs/ru/intlayer_with_svelte_kit.md +738 -0
  37. package/docs/ru/intlayer_with_vite+svelte.md +275 -99
  38. package/docs/tr/intlayer_with_svelte_kit.md +738 -0
  39. package/docs/tr/intlayer_with_vite+svelte.md +297 -119
  40. package/docs/vi/intlayer_with_svelte_kit.md +738 -0
  41. package/docs/vi/intlayer_with_vite+svelte.md +275 -102
  42. package/docs/zh/intlayer_with_svelte_kit.md +738 -0
  43. package/docs/zh/intlayer_with_vite+svelte.md +309 -107
  44. package/package.json +9 -9
  45. package/src/generated/docs.entry.ts +19 -0
@@ -1,8 +1,8 @@
1
1
  ---
2
2
  createdAt: 2025-04-18
3
- updatedAt: 2025-06-29
4
- title: كيفية ترجمة تطبيق Vite and Svelte – دليل i18n 2025
5
- description: اكتشف كيفية جعل موقعك باستخدام Vite و Svelte متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته.
3
+ updatedAt: 2025-11-19
4
+ title: كيفية ترجمة تطبيق Vite و Svelte الخاص بك – دليل i18n 2025
5
+ description: اكتشف كيفية جعل موقعك الإلكتروني باستخدام Vite و Svelte متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته.
6
6
  keywords:
7
7
  - التدويل
8
8
  - التوثيق
@@ -14,34 +14,47 @@ slugs:
14
14
  - doc
15
15
  - environment
16
16
  - vite-and-svelte
17
- # applicationTemplate: https://github.com/aymericzip/intlayer-vite-svelte-template
17
+ applicationTemplate: https://github.com/aymericzip/intlayer-vite-svelte-template
18
18
  history:
19
+ - version: 5.5.11
20
+ date: 2025-11-19
21
+ changes: تحديث الوثيقة
19
22
  - version: 5.5.10
20
23
  date: 2025-06-29
21
- changes: بداية التاريخ
24
+ changes: بدء السجل
22
25
  ---
23
26
 
24
- # ترجم Vite and Svelte باستخدام Intlayer | التدويل (i18n)
27
+ # ترجمة موقعك الإلكتروني باستخدام Vite و Svelte عبر Intlayer | التدويل (i18n)
25
28
 
26
- > هذه الحزمة قيد التطوير. راجع [المشكلة](https://github.com/aymericzip/intlayer/issues/114) لمزيد من المعلومات. أظهر اهتمامك بـ Intlayer لـ Svelte من خلال الإعجاب بالمشكلة
29
+ ## جدول المحتويات
27
30
 
28
- <!-- راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-solid-template) على GitHub. -->
31
+ <TOC/>
29
32
 
30
33
  ## ما هو Intlayer؟
31
34
 
32
- **Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم تعدد اللغات في تطبيقات الويب الحديثة.
35
+ **Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
33
36
 
34
37
  مع Intlayer، يمكنك:
35
38
 
36
- - **إدارة الترجمات بسهولة** باستخدام قواميس تصريحية على مستوى المكون.
37
- - **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
38
- - **ضمان دعم TypeScript** بأنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
39
- - **الاستفادة من الميزات المتقدمة**، مثل الكشف الديناميكي عن اللغة وتبديلها.
39
+ - **إدارة الترجمات بسهولة** باستخدام قواميس إعلانية على مستوى المكون.
40
+ - **توطين البيانات الوصفية والمسارات والمحتوى بشكل ديناميكي**.
41
+ - **ضمان دعم TypeScript** من خلال أنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
42
+ - **الاستفادة من ميزات متقدمة**، مثل الكشف الديناميكي عن اللغة والتبديل بينها.
40
43
 
41
44
  ---
42
45
 
43
46
  ## دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Svelte
44
47
 
48
+ <iframe
49
+ src="https://stackblitz.com/github/aymericzip/intlayer-vite-react-template?embed=1&ctl=1&file=intlayer.config.ts"
50
+ className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
51
+ title="Demo CodeSandbox - كيفية تدويل تطبيقك باستخدام Intlayer"
52
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
53
+ loading="lazy"
54
+ />
55
+
56
+ راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-vite-svelte-template) على GitHub.
57
+
45
58
  ### الخطوة 1: تثبيت التبعيات
46
59
 
47
60
  قم بتثبيت الحزم اللازمة باستخدام npm:
@@ -61,21 +74,26 @@ yarn add intlayer svelte-intlayer
61
74
  yarn add vite-intlayer --save-dev
62
75
  ```
63
76
 
77
+ ```bash packageManager="bun"
78
+ bun add intlayer svelte-intlayer
79
+ bun add vite-intlayer --save-dev
80
+ ```
81
+
64
82
  - **intlayer**
65
83
 
66
- الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، والترجمة، و[إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md)، والترجمة البرمجية، و[أوامر CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_cli.md).
84
+ الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، الترجمة، [إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md)، التحويل البرمجي، و[أوامر CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_cli.md).
67
85
 
68
86
  - **svelte-intlayer**
69
- الحزمة التي تدمج Intlayer مع تطبيق Svelte. توفر مزودي السياق وhooks لتدويل Svelte.
87
+ الحزمة التي تدمج Intlayer مع تطبيق Svelte. توفر مزودي السياق hooks للتدويل في Svelte.
70
88
 
71
89
  - **vite-intlayer**
72
- تتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط للكشف عن اللغة المفضلة للمستخدم، وإدارة الكوكيز، والتعامل مع إعادة توجيه URL.
90
+ يتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط للكشف عن اللغة المفضلة للمستخدم، وإدارة الكوكيز، والتعامل مع إعادة توجيه URL.
73
91
 
74
92
  ### الخطوة 2: تكوين مشروعك
75
93
 
76
- قم بإنشاء ملف تكوين لتحديد لغات تطبيقك:
94
+ أنشئ ملف تكوين لتحديد لغات تطبيقك:
77
95
 
78
- ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
96
+ ```typescript fileName="intlayer.config.ts"
79
97
  import { Locales, type IntlayerConfig } from "intlayer";
80
98
 
81
99
  const config: IntlayerConfig = {
@@ -84,26 +102,7 @@ const config: IntlayerConfig = {
84
102
  Locales.ENGLISH,
85
103
  Locales.FRENCH,
86
104
  Locales.SPANISH,
87
- // لغاتك الأخرى
88
- ],
89
- defaultLocale: Locales.ENGLISH,
90
- },
91
- };
92
-
93
- export default config;
94
- ```
95
-
96
- ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
97
- import { Locales } from "intlayer";
98
-
99
- /** @type {import('intlayer').IntlayerConfig} */
100
- const config = {
101
- internationalization: {
102
- locales: [
103
- Locales.ENGLISH,
104
- Locales.FRENCH,
105
- Locales.SPANISH,
106
- // لغاتك الأخرى
105
+ // Your other locales
107
106
  ],
108
107
  defaultLocale: Locales.ENGLISH,
109
108
  },
@@ -112,43 +111,13 @@ const config = {
112
111
  export default config;
113
112
  ```
114
113
 
115
- ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
116
- const { Locales } = require("intlayer");
117
-
118
- /** @type {import('intlayer').IntlayerConfig} */
119
- const config = {
120
- internationalization: {
121
- locales: [
122
- Locales.ENGLISH,
123
- Locales.FRENCH,
124
- Locales.SPANISH,
125
- // لغاتك الأخرى
126
- ],
127
- defaultLocale: Locales.ENGLISH,
128
- },
129
- };
130
-
131
- module.exports = config;
132
- ```
133
-
134
- > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
114
+ > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، وإعادة توجيه الوسيط، وأسماء الكوكيز، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
135
115
 
136
116
  ### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
137
117
 
138
118
  أضف مكون intlayer الإضافي إلى تكوينك.
139
119
 
140
- ```typescript fileName="vite.config.ts" codeFormat="typescript"
141
- import { defineConfig } from "vite";
142
- import { svelte } from "@sveltejs/vite-plugin-svelte";
143
- import { intlayer } from "vite-intlayer";
144
-
145
- // https://vitejs.dev/config/
146
- export default defineConfig({
147
- plugins: [svelte(), intlayer()],
148
- });
149
- ```
150
-
151
- ```javascript fileName="vite.config.mjs" codeFormat="esm"
120
+ ```typescript fileName="vite.config.ts"
152
121
  import { defineConfig } from "vite";
153
122
  import { svelte } from "@sveltejs/vite-plugin-svelte";
154
123
  import { intlayer } from "vite-intlayer";
@@ -159,20 +128,9 @@ export default defineConfig({
159
128
  });
160
129
  ```
161
130
 
162
- ```javascript fileName="vite.config.cjs" codeFormat="commonjs"
163
- const { defineConfig } = require("vite");
164
- const react = require("@vitejs/plugin-react-swc");
165
- const { intlayer } = require("vite-intlayer");
131
+ > يُستخدم مكون Vite الإضافي `intlayer()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يعرّف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر ألقابًا لتحسين الأداء.
166
132
 
167
- // https://vitejs.dev/config/
168
- module.exports = defineConfig({
169
- plugins: [react(), intlayer()],
170
- });
171
- ```
172
-
173
- > يتم استخدام مكون Vite الإضافي `intlayer()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يعرّف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر ألقابًا لتحسين الأداء.
174
-
175
- ### الخطوة 4: أعلن عن محتواك
133
+ ### الخطوة 4: إعلان المحتوى الخاص بك
176
134
 
177
135
  قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
178
136
 
@@ -197,6 +155,7 @@ export default appContent;
197
155
  import { t } from "intlayer";
198
156
 
199
157
  /** @type {import('intlayer').Dictionary} */
158
+ // تعريف محتوى التطبيق
200
159
  const appContent = {
201
160
  key: "app",
202
161
  content: {
@@ -249,62 +208,287 @@ module.exports = appContent;
249
208
 
250
209
  > يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان داخل تطبيقك بمجرد تضمينها في دليل `contentDir` (افتراضيًا، `./src`). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
251
210
 
252
- > لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md).
211
+ > لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
253
212
 
254
213
  ### الخطوة 5: استخدام Intlayer في الكود الخاص بك
255
214
 
256
- [للاستكمال]
215
+ ```svelte fileName="src/App.svelte"
216
+ <script>
217
+ import { useIntlayer } from "svelte-intlayer";
218
+
219
+ const content = useIntlayer("app");
220
+ </script>
221
+
222
+ <div>
223
+
224
+
225
+ <!-- عرض المحتوى كمحتوى بسيط -->
226
+ <h1>{$content.title}</h1>
227
+ <!-- لعرض المحتوى قابل للتحرير باستخدام المحرر -->
228
+ <h1><svelte:component this={$content.title} /></h1>
229
+ <!-- لعرض المحتوى كسلسلة نصية -->
230
+ <div aria-label={$content.title.value}></div>
231
+ ```
257
232
 
258
233
  ### (اختياري) الخطوة 6: تغيير لغة المحتوى الخاص بك
259
234
 
260
- [للاستكمال]
235
+ ```svelte fileName="src/App.svelte"
236
+ <script lang="ts">
237
+ import { getLocaleName } from 'intlayer';
238
+ import { useLocale } from 'svelte-intlayer';
239
+
240
+ // الحصول على معلومات اللغة ودالة setLocale
241
+ const { locale, availableLocales, setLocale } = useLocale();
242
+
243
+ // التعامل مع تغيير اللغة
244
+ const changeLocale = (event: Event) => {
245
+ const target = event.target as HTMLSelectElement;
246
+ const newLocale = target.value;
247
+ setLocale(newLocale);
248
+ };
249
+ </script>
250
+
251
+ <div>
252
+ <select value={$locale} on:change={changeLocale}>
253
+ {#each availableLocales ?? [] as loc}
254
+ <option value={loc}>
255
+ {getLocaleName(loc)}
256
+ </option>
257
+ {/each}
258
+ </select>
259
+ </div>
260
+ ```
261
+
262
+ ### (اختياري) الخطوة 7: عرض Markdown
263
+
264
+ يدعم Intlayer عرض محتوى Markdown مباشرة في تطبيق Svelte الخاص بك. بشكل افتراضي، يتم التعامل مع Markdown كنص عادي. لتحويل Markdown إلى HTML غني، يمكنك دمج `@humanspeak/svelte-markdown`، أو أي محلل Markdown آخر.
265
+
266
+ > لرؤية كيفية إعلان محتوى markdown باستخدام حزمة `intlayer`، راجع [وثيقة markdown](https://github.com/aymericzip/intlayer/tree/main/docs/ar/dictionary/markdown.md).
267
+
268
+ ```svelte fileName="src/App.svelte"
269
+ <script>
270
+ import { setIntlayerMarkdown } from "svelte-intlayer";
271
+
272
+ setIntlayerMarkdown((markdown) =>
273
+ // عرض محتوى الماركداون كسلسلة نصية
274
+ return markdown;
275
+ );
276
+ </script>
277
+
278
+ <h1>{$content.markdownContent}</h1>
279
+ ```
280
+
281
+ > يمكنك أيضًا الوصول إلى بيانات الـ front-matter الخاصة بالماركداون باستخدام الخاصية `content.markdownContent.metadata.xxx`.
282
+
283
+ ### (اختياري) الخطوة 8: إعداد محرر intlayer / نظام إدارة المحتوى (CMS)
284
+
285
+ لإعداد محرر intlayer، يجب عليك اتباع [توثيق محرر intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md).
261
286
 
262
- ### (اختياري) الخطوة 7: إضافة التوجيه المحلي إلى تطبيقك
287
+ لإعداد نظام إدارة المحتوى (CMS) الخاص بـ intlayer، يجب عليك اتباع [توثيق نظام إدارة المحتوى intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).
263
288
 
264
- [للاستكمال]
289
+ بالتوازي، في تطبيق Svelte الخاص بك، يجب عليك إضافة السطر التالي في تخطيط (layout)، أو في جذر التطبيق:
290
+
291
+ ```svelte fileName="src/layout.svelte"
292
+ import { useIntlayerEditor } from "svelte-intlayer";
293
+
294
+ useIntlayerEditor();
295
+ ```
296
+
297
+ ### (اختياري) الخطوة 7: إضافة التوجيه المحلي (localized Routing) لتطبيقك
298
+
299
+ للتعامل مع التوجيه المحلي في تطبيق Svelte الخاص بك، يمكنك استخدام `svelte-spa-router` مع `localeFlatMap` من Intlayer لتوليد المسارات لكل لغة.
300
+
301
+ أولاً، قم بتثبيت `svelte-spa-router`:
302
+
303
+ ```bash packageManager="npm"
304
+ npm install svelte-spa-router
305
+ ```
306
+
307
+ ```bash packageManager="pnpm"
308
+ pnpm add svelte-spa-router
309
+ ```
310
+
311
+ ```bash packageManager="yarn"
312
+ yarn add svelte-spa-router
313
+ ```
314
+
315
+ ```bash packageManager="bun"
316
+ bun add svelte-spa-router
317
+ ```
318
+
319
+ ثم، أنشئ ملف `Router.svelte` لتعريف المسارات الخاصة بك:
320
+
321
+ ```svelte fileName="src/Router.svelte"
322
+ <script lang="ts">
323
+ import { localeFlatMap } from "intlayer";
324
+ import Router from "svelte-spa-router";
325
+ import { wrap } from "svelte-spa-router/wrap";
326
+ import App from "./App.svelte";
327
+
328
+ const routes = Object.fromEntries(
329
+ localeFlatMap(({locale, urlPrefix}) => [
330
+ [
331
+ urlPrefix || '/',
332
+ wrap({
333
+ component: App as any,
334
+ props: {
335
+ locale,
336
+ },
337
+ }),
338
+ ],
339
+ ])
340
+ );
341
+ </script>
342
+
343
+ <Router {routes} />
344
+ ```
345
+
346
+ قم بتحديث ملف `main.ts` لتركيب مكون `Router` بدلاً من `App`:
347
+
348
+ ```typescript fileName="src/main.ts"
349
+ import { mount } from "svelte";
350
+ import Router from "./Router.svelte";
351
+
352
+ const app = mount(Router, {
353
+ target: document.getElementById("app")!,
354
+ });
355
+
356
+ export default app;
357
+ ```
358
+
359
+ أخيرًا، قم بتحديث ملف `App.svelte` الخاص بك لاستقبال الخاصية `locale` واستخدامها مع `useIntlayer`:
360
+
361
+ ```svelte fileName="src/App.svelte"
362
+ <script lang="ts">
363
+ import type { Locale } from 'intlayer';
364
+ import { useIntlayer } from 'svelte-intlayer';
365
+ import Counter from './lib/Counter.svelte';
366
+ import LocaleSwitcher from './lib/LocaleSwitcher.svelte';
367
+
368
+ export let locale: Locale;
369
+
370
+ $: content = useIntlayer('app', locale);
371
+ </script>
372
+
373
+ <main>
374
+ <div class="locale-switcher-container">
375
+ <LocaleSwitcher currentLocale={locale} />
376
+ </div>
377
+
378
+ <!-- ... بقية تطبيقك ... -->
379
+ </main>
380
+ ```
381
+
382
+ #### تكوين التوجيه على جانب الخادم (اختياري)
383
+
384
+ بالتوازي، يمكنك أيضًا استخدام `intlayerProxy` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا الإضافة تلقائيًا باكتشاف اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط الخاص باللغة المناسبة. إذا لم يتم تحديد لغة، فسيحدد الإضافة اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم اكتشاف أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
385
+
386
+ > ملاحظة: لاستخدام `intlayerProxy` في بيئة الإنتاج، تحتاج إلى نقل حزمة `vite-intlayer` من `devDependencies` إلى `dependencies`.
387
+
388
+ ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
389
+ import { defineConfig } from "vite";
390
+ import { svelte } from "@sveltejs/vite-plugin-svelte";
391
+ import { intlayer, intlayerProxy } from "vite-intlayer";
392
+
393
+ typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
394
+ import { defineConfig } from "vite";
395
+ import { svelte } from "@sveltejs/vite-plugin-svelte";
396
+ import { intlayer, intlayerProxy } from "vite-intlayer";
397
+
398
+ // https://vitejs.dev/config/
399
+ export default defineConfig({
400
+ plugins: [svelte(), intlayer(), intlayerProxy()],
401
+ });
402
+ ```
403
+
404
+ ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
405
+ import { defineConfig } from "vite";
406
+ import { svelte } from "@sveltejs/vite-plugin-svelte";
407
+ import { intlayer, intlayerProxy } from "vite-intlayer";
408
+
409
+ // https://vitejs.dev/config/
410
+ export default defineConfig({
411
+ plugins: [svelte(), intlayer(), intlayerProxy()],
412
+ });
413
+ ```
414
+
415
+ ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
416
+ const { defineConfig } = require("vite");
417
+ const { svelte } = require("@sveltejs/vite-plugin-svelte");
418
+ const { intlayer, intlayerProxy } = require("vite-intlayer");
419
+
420
+ // https://vitejs.dev/config/
421
+ module.exports = defineConfig({
422
+ plugins: [svelte(), intlayer(), intlayerProxy()],
423
+ });
424
+ plugins: [svelte(), intlayer(), intlayerProxy()],
425
+ });
426
+ ```
265
427
 
266
428
  ### (اختياري) الخطوة 8: تغيير عنوان URL عند تغيير اللغة
267
429
 
268
- [للاستكمال]
430
+ للسماح للمستخدمين بتغيير اللغة وتحديث عنوان URL وفقًا لذلك، يمكنك إنشاء مكون `LocaleSwitcher`. سيستخدم هذا المكون `getLocalizedUrl` من `intlayer` و `push` من `svelte-spa-router`.
269
431
 
270
- ### (اختياري) الخطوة 9: تبديل خصائص اللغة واتجاه HTML
432
+ ```svelte fileName="src/lib/LocaleSwitcher.svelte"
433
+ <script lang="ts">
434
+ import { getLocaleName, getLocalizedUrl } from "intlayer";
435
+ import { useLocale } from "svelte-intlayer";
436
+ import { push } from "svelte-spa-router";
271
437
 
272
- [للاستكمال]
438
+ export let currentLocale: string | undefined = undefined;
273
439
 
274
- ### (اختياري) الخطوة 10: إنشاء مكون رابط محلي
440
+ // الحصول على معلومات اللغة
441
+ const { locale, availableLocales } = useLocale();
275
442
 
276
- [للاستكمال]
443
+ // التعامل مع تغيير اللغة
444
+ const changeLocale = (event: Event) => {
445
+ const target = event.target as HTMLSelectElement;
446
+ const newLocale = target.value;
447
+ const currentUrl = window.location.pathname;
448
+ const url = getLocalizedUrl( currentUrl, newLocale);
449
+ push(url);
450
+ };
451
+ </script>
452
+
453
+ <div class="locale-switcher">
454
+ <select value={currentLocale ?? $locale} onchange={changeLocale}>
455
+ {#each availableLocales ?? [] as loc}
456
+ <option value={loc}>
457
+ {getLocaleName(loc)}
458
+ </option>
459
+ {/each}
460
+ </select>
461
+ </div>
462
+ ```
277
463
 
278
- ### إعدادات Git
464
+ ### تكوين Git
279
465
 
280
466
  يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب إضافتها إلى مستودع Git الخاص بك.
281
467
 
282
468
  للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
283
469
 
284
470
  ```plaintext
285
- # تجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer
471
+ # تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
286
472
  .intlayer
287
473
  ```
288
474
 
289
475
  ### إضافة VS Code
290
476
 
291
- لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
477
+ لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **امتداد Intlayer الرسمي لـ VS Code**.
292
478
 
293
479
  [التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
294
480
 
295
- تقدم هذه الإضافة:
481
+ يوفر هذا الامتداد:
296
482
 
297
483
  - **الإكمال التلقائي** لمفاتيح الترجمة.
298
- - **كشف الأخطاء في الوقت الحقيقي** للترجمات المفقودة.
484
+ - **الكشف عن الأخطاء في الوقت الحقيقي** للترجمات المفقودة.
299
485
  - **معاينات داخلية** للمحتوى المترجم.
300
- - **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
486
+ - **إجراءات سريعة** لإنشاء التراجم وتحديثها بسهولة.
301
487
 
302
- لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع [توثيق إضافة Intlayer لـ VS Code](https://intlayer.org/doc/vs-code-extension).
488
+ لمزيد من التفاصيل حول كيفية استخدام الامتداد، راجع [توثيق امتداد Intlayer لـ VS Code](https://intlayer.org/doc/vs-code-extension).
303
489
 
304
490
  ---
305
491
 
306
- ### التقدم أكثر
492
+ ### التعمق أكثر
307
493
 
308
- للتقدم أكثر، يمكنك تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو إخراج محتواك باستخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).
309
-
310
- ---
494
+ للمضي قدمًا، يمكنك تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو إخراج محتواك باستخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).