@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.
- package/README.md +1 -0
- package/dist/cjs/generated/docs.entry.cjs +19 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +19 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_svelte_kit.md +738 -0
- package/docs/ar/intlayer_with_vite+svelte.md +288 -104
- package/docs/de/intlayer_with_svelte_kit.md +738 -0
- package/docs/de/intlayer_with_vite+svelte.md +302 -101
- package/docs/en/intlayer_with_nextjs_16.md +10 -2
- package/docs/en/intlayer_with_svelte_kit.md +570 -0
- package/docs/en/intlayer_with_vite+svelte.md +22 -6
- package/docs/en/introduction.md +2 -0
- package/docs/en-GB/intlayer_with_svelte_kit.md +738 -0
- package/docs/en-GB/intlayer_with_vite+svelte.md +262 -84
- package/docs/es/intlayer_with_svelte_kit.md +738 -0
- package/docs/es/intlayer_with_vite+svelte.md +300 -107
- package/docs/fr/intlayer_with_svelte_kit.md +770 -0
- package/docs/fr/intlayer_with_vite+svelte.md +297 -101
- package/docs/hi/intlayer_with_svelte_kit.md +738 -0
- package/docs/hi/intlayer_with_vite+svelte.md +298 -108
- package/docs/id/intlayer_with_svelte_kit.md +738 -0
- package/docs/id/intlayer_with_vite+svelte.md +277 -99
- package/docs/it/intlayer_with_svelte_kit.md +770 -0
- package/docs/it/intlayer_with_vite+svelte.md +275 -99
- package/docs/ja/intlayer_with_svelte_kit.md +738 -0
- package/docs/ja/intlayer_with_vite+svelte.md +295 -110
- package/docs/ko/intlayer_with_svelte_kit.md +738 -0
- package/docs/ko/intlayer_with_vite+svelte.md +286 -199
- package/docs/pl/intlayer_with_svelte_kit.md +740 -0
- package/docs/pl/intlayer_with_vite+svelte.md +273 -101
- package/docs/pt/intlayer_with_svelte_kit.md +772 -0
- package/docs/pt/intlayer_with_vite+svelte.md +290 -96
- package/docs/ru/intlayer_with_svelte_kit.md +738 -0
- package/docs/ru/intlayer_with_vite+svelte.md +275 -99
- package/docs/tr/intlayer_with_svelte_kit.md +738 -0
- package/docs/tr/intlayer_with_vite+svelte.md +297 -119
- package/docs/vi/intlayer_with_svelte_kit.md +738 -0
- package/docs/vi/intlayer_with_vite+svelte.md +275 -102
- package/docs/zh/intlayer_with_svelte_kit.md +738 -0
- package/docs/zh/intlayer_with_vite+svelte.md +309 -107
- package/package.json +9 -9
- package/src/generated/docs.entry.ts +19 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-04-18
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title: كيفية ترجمة تطبيق Vite
|
|
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
|
-
|
|
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
|
-
#
|
|
27
|
+
# ترجمة موقعك الإلكتروني باستخدام Vite و Svelte عبر Intlayer | التدويل (i18n)
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
## جدول المحتويات
|
|
27
30
|
|
|
28
|
-
|
|
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
|
-
الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين،
|
|
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. توفر مزودي السياق
|
|
87
|
+
الحزمة التي تدمج Intlayer مع تطبيق Svelte. توفر مزودي السياق hooks للتدويل في Svelte.
|
|
70
88
|
|
|
71
89
|
- **vite-intlayer**
|
|
72
|
-
|
|
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"
|
|
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
|
-
|
|
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"
|
|
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
|
-
|
|
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
|
-
|
|
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/
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
464
|
+
### تكوين Git
|
|
279
465
|
|
|
280
466
|
يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب إضافتها إلى مستودع Git الخاص بك.
|
|
281
467
|
|
|
282
468
|
للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
|
|
283
469
|
|
|
284
470
|
```plaintext
|
|
285
|
-
# تجاهل الملفات التي
|
|
471
|
+
# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
|
|
286
472
|
.intlayer
|
|
287
473
|
```
|
|
288
474
|
|
|
289
475
|
### إضافة VS Code
|
|
290
476
|
|
|
291
|
-
لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت
|
|
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
|
-
لمزيد من التفاصيل حول كيفية استخدام
|
|
488
|
+
لمزيد من التفاصيل حول كيفية استخدام الامتداد، راجع [توثيق امتداد Intlayer لـ VS Code](https://intlayer.org/doc/vs-code-extension).
|
|
303
489
|
|
|
304
490
|
---
|
|
305
491
|
|
|
306
|
-
###
|
|
492
|
+
### التعمق أكثر
|
|
307
493
|
|
|
308
|
-
|
|
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).
|