@intlayer/docs 7.0.4 → 7.0.6
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/blog/ar/intlayer_with_i18next.md +72 -19
- package/blog/ar/intlayer_with_next-i18next.md +61 -36
- package/blog/ar/intlayer_with_next-intl.md +61 -13
- package/blog/ar/intlayer_with_react-i18next.md +67 -18
- package/blog/ar/intlayer_with_react-intl.md +66 -13
- package/blog/ar/intlayer_with_vue-i18n.md +180 -0
- package/blog/de/intlayer_with_i18next.md +61 -26
- package/blog/de/intlayer_with_next-i18next.md +66 -17
- package/blog/de/intlayer_with_next-intl.md +62 -13
- package/blog/de/intlayer_with_react-i18next.md +66 -17
- package/blog/de/intlayer_with_react-intl.md +66 -14
- package/blog/de/intlayer_with_vue-i18n.md +178 -0
- package/blog/en/intlayer_with_i18next.md +53 -2
- package/blog/en/intlayer_with_next-i18next.md +52 -16
- package/blog/en/intlayer_with_next-intl.md +49 -0
- package/blog/en/intlayer_with_react-i18next.md +50 -1
- package/blog/en/intlayer_with_react-intl.md +53 -0
- package/blog/en/intlayer_with_vue-i18n.md +178 -0
- package/blog/en-GB/intlayer_with_i18next.md +58 -7
- package/blog/en-GB/intlayer_with_next-i18next.md +55 -9
- package/blog/en-GB/intlayer_with_next-intl.md +55 -6
- package/blog/en-GB/intlayer_with_react-i18next.md +55 -6
- package/blog/en-GB/intlayer_with_react-intl.md +56 -3
- package/blog/en-GB/intlayer_with_vue-i18n.md +180 -0
- package/blog/es/intlayer_with_i18next.md +69 -18
- package/blog/es/intlayer_with_next-i18next.md +70 -24
- package/blog/es/intlayer_with_next-intl.md +64 -13
- package/blog/es/intlayer_with_react-i18next.md +61 -12
- package/blog/es/intlayer_with_react-intl.md +65 -12
- package/blog/es/intlayer_with_vue-i18n.md +178 -0
- package/blog/fr/intlayer_with_i18next.md +77 -16
- package/blog/fr/intlayer_with_next-i18next.md +55 -31
- package/blog/fr/intlayer_with_next-intl.md +57 -7
- package/blog/fr/intlayer_with_react-i18next.md +64 -7
- package/blog/fr/intlayer_with_react-intl.md +63 -10
- package/blog/fr/intlayer_with_vue-i18n.md +178 -0
- package/blog/hi/intlayer_with_i18next.md +67 -16
- package/blog/hi/intlayer_with_next-i18next.md +69 -23
- package/blog/hi/intlayer_with_next-intl.md +61 -8
- package/blog/hi/intlayer_with_react-i18next.md +63 -14
- package/blog/hi/intlayer_with_react-intl.md +66 -13
- package/blog/hi/intlayer_with_vue-i18n.md +180 -0
- package/blog/id/intlayer_with_i18next.md +65 -14
- package/blog/id/intlayer_with_next-i18next.md +58 -12
- package/blog/id/intlayer_with_next-intl.md +60 -11
- package/blog/id/intlayer_with_react-i18next.md +59 -10
- package/blog/id/intlayer_with_react-intl.md +66 -13
- package/blog/id/intlayer_with_vue-i18n.md +178 -0
- package/blog/it/intlayer_with_i18next.md +70 -19
- package/blog/it/intlayer_with_next-i18next.md +68 -22
- package/blog/it/intlayer_with_next-intl.md +62 -12
- package/blog/it/intlayer_with_react-i18next.md +65 -16
- package/blog/it/intlayer_with_react-intl.md +67 -14
- package/blog/it/intlayer_with_vue-i18n.md +178 -0
- package/blog/ja/intlayer_with_i18next.md +74 -24
- package/blog/ja/intlayer_with_next-i18next.md +60 -37
- package/blog/ja/intlayer_with_next-intl.md +63 -15
- package/blog/ja/intlayer_with_react-i18next.md +70 -21
- package/blog/ja/intlayer_with_react-intl.md +73 -21
- package/blog/ja/intlayer_with_vue-i18n.md +180 -0
- package/blog/ko/intlayer_with_i18next.md +60 -29
- package/blog/ko/intlayer_with_next-i18next.md +59 -32
- package/blog/ko/intlayer_with_next-intl.md +52 -23
- package/blog/ko/intlayer_with_react-i18next.md +65 -16
- package/blog/ko/intlayer_with_react-intl.md +74 -22
- package/blog/ko/intlayer_with_vue-i18n.md +180 -0
- package/blog/pl/intlayer_with_i18next.md +63 -12
- package/blog/pl/intlayer_with_next-i18next.md +74 -17
- package/blog/pl/intlayer_with_next-intl.md +59 -8
- package/blog/pl/intlayer_with_react-i18next.md +59 -10
- package/blog/pl/intlayer_with_react-intl.md +65 -12
- package/blog/pl/intlayer_with_vue-i18n.md +180 -0
- package/blog/pt/intlayer_with_i18next.md +67 -16
- package/blog/pt/intlayer_with_next-i18next.md +65 -19
- package/blog/pt/intlayer_with_next-intl.md +62 -12
- package/blog/pt/intlayer_with_react-i18next.md +67 -18
- package/blog/pt/intlayer_with_react-intl.md +62 -10
- package/blog/pt/intlayer_with_vue-i18n.md +178 -0
- package/blog/ru/intlayer_with_i18next.md +68 -15
- package/blog/ru/intlayer_with_next-i18next.md +71 -25
- package/blog/ru/intlayer_with_next-intl.md +56 -7
- package/blog/ru/intlayer_with_react-i18next.md +65 -16
- package/blog/ru/intlayer_with_react-intl.md +69 -16
- package/blog/ru/intlayer_with_vue-i18n.md +180 -0
- package/blog/tr/intlayer_with_i18next.md +67 -16
- package/blog/tr/intlayer_with_next-i18next.md +78 -21
- package/blog/tr/intlayer_with_next-intl.md +69 -18
- package/blog/tr/intlayer_with_react-i18next.md +65 -16
- package/blog/tr/intlayer_with_react-intl.md +71 -19
- package/blog/tr/intlayer_with_vue-i18n.md +180 -0
- package/blog/vi/intlayer_with_i18next.md +64 -13
- package/blog/vi/intlayer_with_next-i18next.md +72 -26
- package/blog/vi/intlayer_with_next-intl.md +62 -11
- package/blog/vi/intlayer_with_react-i18next.md +66 -17
- package/blog/vi/intlayer_with_react-intl.md +70 -17
- package/blog/vi/intlayer_with_vue-i18n.md +180 -0
- package/blog/zh/intlayer_with_i18next.md +67 -17
- package/blog/zh/intlayer_with_next-i18next.md +67 -22
- package/blog/zh/intlayer_with_next-intl.md +61 -13
- package/blog/zh/intlayer_with_react-i18next.md +67 -18
- package/blog/zh/intlayer_with_react-intl.md +69 -17
- package/blog/zh/intlayer_with_vue-i18n.md +180 -0
- package/dist/cjs/generated/blog.entry.cjs +19 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +19 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_nextjs_15.md +36 -9
- package/docs/ar/intlayer_with_nextjs_16.md +36 -9
- package/docs/de/intlayer_with_nextjs_15.md +36 -9
- package/docs/de/intlayer_with_nextjs_16.md +24 -6
- package/docs/en/intlayer_with_nextjs_14.md +37 -9
- package/docs/en/intlayer_with_nextjs_15.md +40 -10
- package/docs/en/intlayer_with_nextjs_16.md +40 -10
- package/docs/en/plugins/sync-json.md +152 -55
- package/docs/en/releases/v7.md +1 -1
- package/docs/en-GB/intlayer_with_nextjs_15.md +36 -9
- package/docs/en-GB/intlayer_with_nextjs_16.md +36 -9
- package/docs/en-GB/releases/v7.md +1 -1
- package/docs/es/intlayer_with_nextjs_15.md +36 -9
- package/docs/es/intlayer_with_nextjs_16.md +36 -9
- package/docs/fr/intlayer_with_nextjs_15.md +36 -9
- package/docs/fr/intlayer_with_nextjs_16.md +37 -24
- package/docs/hi/intlayer_with_nextjs_15.md +36 -9
- package/docs/hi/intlayer_with_nextjs_16.md +36 -9
- package/docs/id/intlayer_with_nextjs_16.md +36 -9
- package/docs/it/intlayer_with_nextjs_15.md +36 -9
- package/docs/it/intlayer_with_nextjs_16.md +36 -9
- package/docs/ja/intlayer_with_nextjs_15.md +36 -9
- package/docs/ja/intlayer_with_nextjs_16.md +36 -9
- package/docs/ko/intlayer_with_nextjs_15.md +36 -9
- package/docs/ko/intlayer_with_nextjs_16.md +36 -9
- package/docs/pl/intlayer_with_nextjs_16.md +36 -9
- package/docs/pt/intlayer_with_nextjs_15.md +36 -9
- package/docs/pt/intlayer_with_nextjs_16.md +36 -9
- package/docs/ru/intlayer_with_nextjs_15.md +36 -9
- package/docs/ru/intlayer_with_nextjs_16.md +36 -9
- package/docs/tr/intlayer_with_nextjs_15.md +36 -9
- package/docs/tr/intlayer_with_nextjs_16.md +39 -21
- package/docs/vi/intlayer_with_nextjs_16.md +36 -9
- package/docs/zh/intlayer_with_nextjs_15.md +36 -9
- package/docs/zh/intlayer_with_nextjs_16.md +36 -9
- package/package.json +14 -14
- package/src/generated/blog.entry.ts +19 -0
|
@@ -16,30 +16,38 @@ slugs:
|
|
|
16
16
|
- blog
|
|
17
17
|
- intlayer-with-react-intl
|
|
18
18
|
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: إضافة ملحق loadJSON
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
|
-
changes: التغيير إلى
|
|
24
|
+
changes: التغيير إلى ملحق syncJSON
|
|
22
25
|
---
|
|
23
26
|
|
|
24
27
|
# كيفية أتمتة ترجمات JSON الخاصة بـ react-intl باستخدام Intlayer
|
|
25
28
|
|
|
29
|
+
## جدول المحتويات
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
26
33
|
## ما هو Intlayer؟
|
|
27
34
|
|
|
28
35
|
**Intlayer** هي مكتبة تدويل مبتكرة ومفتوحة المصدر مصممة لمعالجة أوجه القصور في حلول i18n التقليدية. تقدم نهجًا حديثًا لإدارة المحتوى في تطبيقات React.
|
|
29
36
|
|
|
30
|
-
اطلع على مقارنة ملموسة مع react-intl في منشور
|
|
37
|
+
اطلع على مقارنة ملموسة مع react-intl في منشور المدونة الخاص بنا [react-i18next مقابل react-intl مقابل Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
31
38
|
|
|
32
39
|
## لماذا الجمع بين Intlayer و react-intl؟
|
|
33
40
|
|
|
34
41
|
بينما يوفر Intlayer حلاً ممتازًا مستقلاً لـ i18n (راجع دليل التكامل مع React الخاص بنا [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+react.md))، قد ترغب في دمجه مع react-intl لأسباب عدة:
|
|
35
42
|
|
|
36
|
-
1. **قاعدة الشيفرة الحالية**: لديك تنفيذ قائم لـ react-intl
|
|
37
|
-
2. **متطلبات
|
|
43
|
+
1. **قاعدة الشيفرة الحالية**: لديك تنفيذ قائم لـ react-intl وتريد الانتقال تدريجيًا إلى تجربة المطور المحسنة التي يقدمها Intlayer.
|
|
44
|
+
2. **متطلبات قديمة**: يتطلب مشروعك التوافق مع الإضافات أو سير العمل الحالي لـ react-intl.
|
|
38
45
|
3. **ألفة الفريق**: فريقك معتاد على react-intl لكنه يرغب في إدارة محتوى أفضل.
|
|
46
|
+
4. **استخدام ميزات Intlayer**: تريد استخدام ميزات Intlayer مثل إعلان المحتوى، أتمتة الترجمة، اختبار الترجمات، والمزيد.
|
|
39
47
|
|
|
40
48
|
**لهذا، يمكن تنفيذ Intlayer كمحول لـ react-intl للمساعدة في أتمتة ترجمات JSON الخاصة بك في واجهة الأوامر أو خطوط أنابيب CI/CD، اختبار ترجماتك، والمزيد.**
|
|
41
49
|
|
|
42
|
-
يوضح هذا الدليل كيفية الاستفادة من نظام إعلان المحتوى المتفوق
|
|
50
|
+
يوضح هذا الدليل كيفية الاستفادة من نظام إعلان المحتوى المتفوق الخاص بـ Intlayer مع الحفاظ على التوافق مع react-intl.
|
|
43
51
|
|
|
44
52
|
## جدول المحتويات
|
|
45
53
|
|
|
@@ -63,16 +71,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
63
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
64
72
|
```
|
|
65
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
66
78
|
**وصف الحزم:**
|
|
67
79
|
|
|
68
80
|
- **intlayer**: المكتبة الأساسية لإدارة التدويل، إعلان المحتوى، والبناء
|
|
69
|
-
- **@intlayer/sync-json-plugin**:
|
|
81
|
+
- **@intlayer/sync-json-plugin**: مكون إضافي لتصدير إعلانات محتوى Intlayer إلى تنسيق JSON متوافق مع react-intl
|
|
70
82
|
|
|
71
|
-
### الخطوة 2: تنفيذ
|
|
83
|
+
### الخطوة 2: تنفيذ مكون Intlayer الإضافي لتغليف JSON
|
|
72
84
|
|
|
73
85
|
قم بإنشاء ملف تكوين Intlayer لتعريف اللغات المدعومة لديك:
|
|
74
86
|
|
|
75
|
-
**إذا كنت
|
|
87
|
+
**إذا كنت ترغب أيضًا في تصدير قواميس JSON لـ react-intl**، أضف مكون `syncJSON` الإضافي:
|
|
76
88
|
|
|
77
89
|
```typescript fileName="intlayer.config.ts"
|
|
78
90
|
import { Locales, type IntlayerConfig } from "intlayer";
|
|
@@ -93,16 +105,57 @@ const config: IntlayerConfig = {
|
|
|
93
105
|
export default config;
|
|
94
106
|
```
|
|
95
107
|
|
|
96
|
-
|
|
108
|
+
سيقوم ملحق `syncJSON` تلقائيًا بتغليف ملفات JSON. سيقرأ ويكتب ملفات JSON دون تغيير هيكل المحتوى.
|
|
97
109
|
|
|
98
|
-
إذا كنت
|
|
110
|
+
إذا كنت ترغب في جعل ملفات JSON تتعايش مع ملفات إعلان محتوى intlayer (`.content` files)، فسيتبع Intlayer الطريقة التالية:
|
|
99
111
|
|
|
100
112
|
1. تحميل كل من ملفات JSON وملفات إعلان المحتوى وتحويلها إلى قاموس intlayer.
|
|
101
|
-
2. إذا كانت هناك تعارضات بين ملفات JSON وملفات إعلان المحتوى،
|
|
113
|
+
2. إذا كانت هناك تعارضات بين ملفات JSON وملفات إعلان المحتوى، سيقوم Intlayer بدمج جميع القواميس. وذلك يعتمد على أولوية الملحقات، وأولوية ملف إعلان المحتوى (كلها قابلة للتكوين).
|
|
114
|
+
|
|
115
|
+
إذا تم إجراء تغييرات باستخدام CLI لترجمة JSON، أو باستخدام نظام إدارة المحتوى (CMS)، سيقوم Intlayer بتحديث ملف JSON بالترجمات الجديدة.
|
|
116
|
+
|
|
117
|
+
للاطلاع على مزيد من التفاصيل حول ملحق `syncJSON`، يرجى الرجوع إلى [توثيق ملحق syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/plugins/sync-json.md).
|
|
118
|
+
|
|
119
|
+
### (اختياري) الخطوة 3: تنفيذ ترجمات JSON لكل مكون
|
|
120
|
+
|
|
121
|
+
بشكل افتراضي، سيقوم Intlayer بتحميل ودمج ومزامنة كل من ملفات JSON وملفات إعلان المحتوى. راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md) لمزيد من التفاصيل. ولكن إذا كنت تفضل، باستخدام ملحق Intlayer، يمكنك أيضًا تنفيذ إدارة JSON المترجمة لكل مكون في أي مكان في قاعدة الشيفرة الخاصة بك.
|
|
122
|
+
|
|
123
|
+
لهذا الغرض، يمكنك استخدام ملحق `loadJSON`.
|
|
124
|
+
|
|
125
|
+
```ts fileName="intlayer.config.ts"
|
|
126
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
127
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
128
|
+
|
|
129
|
+
const config: IntlayerConfig = {
|
|
130
|
+
internationalization: {
|
|
131
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
132
|
+
defaultLocale: Locales.ENGLISH,
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
// حافظ على تزامن ملفات JSON الحالية مع قواميس Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* سيقوم بتحميل جميع ملفات JSON في مجلد src التي تطابق النمط {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // يضمن أن هذه الملفات JSON لها أولوية على الملفات في `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* سيقوم بتحميل، وكتابة المخرجات والترجمات مرة أخرى إلى ملفات JSON في مجلد locales
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
102
154
|
|
|
103
|
-
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
104
157
|
|
|
105
|
-
|
|
158
|
+
سيقوم هذا بتحميل جميع ملفات JSON في مجلد `src` التي تطابق النمط `{key}.i18n.json` وتحميلها كقواميس Intlayer.
|
|
106
159
|
|
|
107
160
|
## إعدادات Git
|
|
108
161
|
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: إنتلاير و vue-i18n
|
|
5
|
+
description: دمج إنتلاير مع vue-i18n لحل شامل للتدويل في Vue.js
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- التدويل
|
|
10
|
+
- مدونة
|
|
11
|
+
- Vue.js
|
|
12
|
+
- Nuxt
|
|
13
|
+
- جافا سكريبت
|
|
14
|
+
- Vue
|
|
15
|
+
slugs:
|
|
16
|
+
- blog
|
|
17
|
+
- intlayer-with-vue-i18n
|
|
18
|
+
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: إضافة مكون loadJSON
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: التغيير إلى مكون syncJSON وإعادة كتابة شاملة
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# التدويل في Vue.js (i18n) باستخدام vue-i18n و Intlayer
|
|
28
|
+
|
|
29
|
+
## جدول المحتويات
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## ما هو Intlayer؟
|
|
34
|
+
|
|
35
|
+
**Intlayer** هي مكتبة تدويل مبتكرة ومفتوحة المصدر مصممة لمعالجة أوجه القصور في حلول i18n التقليدية. تقدم نهجًا حديثًا لإدارة المحتوى في تطبيقات Vue.js و Nuxt.
|
|
36
|
+
|
|
37
|
+
اطلع على مقارنة ملموسة مع vue-i18n في منشور مدونتنا [vue-i18n مقابل Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/vue-i18n_vs_intlayer.md).
|
|
38
|
+
|
|
39
|
+
## لماذا الجمع بين Intlayer و vue-i18n؟
|
|
40
|
+
|
|
41
|
+
بينما يوفر Intlayer حلاً مستقلاً ممتازًا للتدويل (راجع دليل التكامل مع Vue.js الخاص بنا [دليل التكامل مع Vue.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+vue.md))، قد ترغب في دمجه مع vue-i18n لأسباب عدة:
|
|
42
|
+
|
|
43
|
+
1. **قاعدة الشيفرة الحالية**: لديك تنفيذ قائم لـ vue-i18n وترغب في الانتقال تدريجيًا إلى تجربة المطور المحسنة التي يقدمها Intlayer.
|
|
44
|
+
2. **متطلبات قديمة**: يتطلب مشروعك التوافق مع الإضافات أو سير العمل الحالي لـ vue-i18n.
|
|
45
|
+
3. **ألفة الفريق**: فريقك معتاد على vue-i18n ولكنه يرغب في إدارة محتوى أفضل.
|
|
46
|
+
4. **استخدام ميزات Intlayer**: تريد استخدام ميزات Intlayer مثل إعلان المحتوى، وأتمتة الترجمة، واختبار الترجمات، والمزيد.
|
|
47
|
+
|
|
48
|
+
**لهذا، يمكن تنفيذ Intlayer كمحول لـ vue-i18n لمساعدتك في أتمتة ترجمات JSON الخاصة بك في واجهة الأوامر أو خطوط أنابيب CI/CD، واختبار ترجماتك، وأكثر من ذلك.**
|
|
49
|
+
|
|
50
|
+
يوضح هذا الدليل كيفية الاستفادة من نظام إعلان المحتوى المتفوق في Intlayer مع الحفاظ على التوافق مع vue-i18n.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## دليل خطوة بخطوة لإعداد Intlayer مع vue-i18n
|
|
55
|
+
|
|
56
|
+
### الخطوة 1: تثبيت التبعيات
|
|
57
|
+
|
|
58
|
+
قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
|
|
59
|
+
|
|
60
|
+
```bash packageManager="npm"
|
|
61
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```bash packageManager="pnpm"
|
|
65
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```bash packageManager="yarn"
|
|
69
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
```bash packageManager="bun"
|
|
73
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**توضيحات الحزم:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: المكتبة الأساسية لإعلان المحتوى وإدارته
|
|
79
|
+
- **@intlayer/sync-json-plugin**: مكون إضافي لمزامنة إعلانات محتوى Intlayer إلى تنسيق JSON الخاص بـ vue-i18n
|
|
80
|
+
|
|
81
|
+
### الخطوة 2: تنفيذ مكون Intlayer لتغليف JSON
|
|
82
|
+
|
|
83
|
+
قم بإنشاء ملف تكوين Intlayer لتعريف اللغات المدعومة لديك:
|
|
84
|
+
|
|
85
|
+
**إذا كنت ترغب أيضًا في تصدير قواميس JSON لـ vue-i18n**، أضف مكون `syncJSON` الإضافي:
|
|
86
|
+
|
|
87
|
+
```typescript fileName="intlayer.config.ts"
|
|
88
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
89
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
90
|
+
|
|
91
|
+
const config: IntlayerConfig = {
|
|
92
|
+
internationalization: {
|
|
93
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
94
|
+
defaultLocale: Locales.ENGLISH,
|
|
95
|
+
},
|
|
96
|
+
plugins: [
|
|
97
|
+
syncJSON({
|
|
98
|
+
source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
|
|
99
|
+
}),
|
|
100
|
+
],
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default config;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
سيقوم مكون الإضافة `syncJSON` تلقائيًا بتغليف JSON. سيقرأ ويكتب ملفات JSON دون تغيير هيكل المحتوى.
|
|
107
|
+
|
|
108
|
+
إذا كنت ترغب في جعل JSON يتعايش مع ملفات إعلان محتوى intlayer (`.content` ملفات)، فسيعمل Intlayer بهذه الطريقة:
|
|
109
|
+
|
|
110
|
+
1. تحميل كل من ملفات JSON وملفات إعلان المحتوى وتحويلها إلى قاموس intlayer.
|
|
111
|
+
2. إذا كانت هناك تعارضات بين JSON وملفات إعلان المحتوى، فسيقوم Intlayer بدمج جميع القواميس. وذلك اعتمادًا على أولوية المكونات الإضافية، وأولوية ملف إعلان المحتوى (كلها قابلة للتكوين).
|
|
112
|
+
|
|
113
|
+
إذا تم إجراء تغييرات باستخدام CLI لترجمة JSON، أو باستخدام CMS، فسيقوم Intlayer بتحديث ملف JSON بالترجمات الجديدة.
|
|
114
|
+
|
|
115
|
+
للاطلاع على مزيد من التفاصيل حول مكون `syncJSON` الإضافي، يرجى الرجوع إلى [توثيق مكون syncJSON الإضافي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/plugins/sync-json.md).
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### (اختياري) الخطوة 3: تنفيذ ترجمات JSON لكل مكون على حدة
|
|
120
|
+
|
|
121
|
+
بشكل افتراضي، سيقوم Intlayer بتحميل ودمج ومزامنة كل من ملفات JSON وملفات إعلان المحتوى. راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md) لمزيد من التفاصيل. ولكن إذا كنت تفضل، باستخدام مكون إضافي من Intlayer، يمكنك أيضًا تنفيذ إدارة JSON المترجمة لكل مكون في أي مكان في قاعدة الشيفرة الخاصة بك.
|
|
122
|
+
|
|
123
|
+
لهذا الغرض، يمكنك استخدام مكون `loadJSON` الإضافي.
|
|
124
|
+
|
|
125
|
+
```ts fileName="intlayer.config.ts"
|
|
126
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
127
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
128
|
+
|
|
129
|
+
const config: IntlayerConfig = {
|
|
130
|
+
internationalization: {
|
|
131
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
132
|
+
defaultLocale: Locales.ENGLISH,
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
// حافظ على تزامن ملفات JSON الحالية مع قواميس Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* سيقوم بتحميل جميع ملفات JSON في مجلد src التي تطابق النمط {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // يضمن أن هذه الملفات JSON لها أولوية على الملفات في `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* سيقوم بتحميل، وكتابة المخرجات والترجمات مرة أخرى إلى ملفات JSON في مجلد locales
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
سيقوم هذا بتحميل جميع ملفات JSON في مجلد `src` التي تطابق النمط `{key}.i18n.json` وتحميلها كقاموسات Intlayer.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## إعدادات Git
|
|
163
|
+
|
|
164
|
+
استثناء الملفات المُولدة من نظام التحكم في الإصدارات:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
يتم إعادة إنشاء هذه الملفات تلقائيًا أثناء عملية البناء ولا تحتاج إلى الالتزام بها في مستودعك.
|
|
173
|
+
|
|
174
|
+
### إضافة VS Code
|
|
175
|
+
|
|
176
|
+
لتحسين تجربة المطور، قم بتثبيت **إضافة Intlayer الرسمية لـ VS Code**:
|
|
177
|
+
|
|
178
|
+
[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
179
|
+
|
|
180
|
+
[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-12-24
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-11-01
|
|
4
4
|
title: Wie Sie Ihre i18next JSON-Übersetzungen mit Intlayer automatisieren
|
|
5
5
|
description: Automatisieren Sie Ihre JSON-Übersetzungen mit Intlayer und i18next für eine verbesserte Internationalisierung in JavaScript-Anwendungen.
|
|
6
6
|
keywords:
|
|
@@ -20,6 +20,9 @@ slugs:
|
|
|
20
20
|
- blog
|
|
21
21
|
- intlayer-with-i18next
|
|
22
22
|
history:
|
|
23
|
+
- version: 7.0.6
|
|
24
|
+
date: 2025-11-01
|
|
25
|
+
changes: Hinzufügen des loadJSON-Plugins
|
|
23
26
|
- version: 7.0.0
|
|
24
27
|
date: 2025-10-29
|
|
25
28
|
changes: Wechsel zum syncJSON-Plugin
|
|
@@ -31,19 +34,20 @@ history:
|
|
|
31
34
|
|
|
32
35
|
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in JavaScript-Anwendungen.
|
|
33
36
|
|
|
34
|
-
|
|
37
|
+
Siehe einen konkreten Vergleich mit i18next in unserem Blogbeitrag [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
35
38
|
|
|
36
39
|
## Warum Intlayer mit i18next kombinieren?
|
|
37
40
|
|
|
38
|
-
Während Intlayer eine
|
|
41
|
+
Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren [Next.js-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md)), möchten Sie es aus mehreren Gründen möglicherweise mit i18next kombinieren:
|
|
39
42
|
|
|
40
43
|
1. **Bestehender Codebestand**: Sie haben eine etablierte i18next-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
|
|
41
|
-
2. **
|
|
42
|
-
3. **Teamvertrautheit**: Ihr Team ist mit i18next vertraut, möchte
|
|
44
|
+
2. **Legacy-Anforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden i18next-Plugins oder Workflows.
|
|
45
|
+
3. **Teamvertrautheit**: Ihr Team ist mit i18next vertraut, möchte aber ein besseres Content-Management.
|
|
46
|
+
4. **Verwendung von Intlayer-Funktionen**: Sie möchten Intlayer-Funktionen wie Inhaltsdeklaration, Verwaltung von Übersetzungsschlüsseln, Übersetzungsstatus und mehr nutzen.
|
|
43
47
|
|
|
44
|
-
**Dafür kann Intlayer als Adapter für i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
|
|
48
|
+
**Dafür kann Intlayer als Adapter für i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und vieles mehr.**
|
|
45
49
|
|
|
46
|
-
|
|
50
|
+
Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem von Intlayer nutzen können und gleichzeitig die Kompatibilität mit i18next beibehalten.
|
|
47
51
|
|
|
48
52
|
## Inhaltsverzeichnis
|
|
49
53
|
|
|
@@ -67,12 +71,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
67
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
68
72
|
```
|
|
69
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
70
78
|
**Paketbeschreibungen:**
|
|
71
79
|
|
|
72
|
-
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement,
|
|
73
|
-
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-
|
|
80
|
+
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Inhaltsdeklaration und Build
|
|
81
|
+
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit i18next kompatibles JSON-Format
|
|
74
82
|
|
|
75
|
-
### Schritt 2: Implementieren Sie das Intlayer-Plugin
|
|
83
|
+
### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
|
|
76
84
|
|
|
77
85
|
Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
|
|
78
86
|
|
|
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
|
|
|
89
97
|
},
|
|
90
98
|
plugins: [
|
|
91
99
|
syncJSON({
|
|
92
|
-
source: ({ key, locale }) => `./
|
|
100
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
93
101
|
}),
|
|
94
102
|
],
|
|
95
103
|
};
|
|
@@ -99,37 +107,64 @@ export default config;
|
|
|
99
107
|
|
|
100
108
|
Das `syncJSON`-Plugin wird das JSON automatisch umschließen. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
|
|
101
109
|
|
|
102
|
-
Wenn Sie möchten, dass dieses JSON
|
|
110
|
+
Wenn Sie möchten, dass dieses JSON neben den Intlayer-Inhaltsdeklarationsdateien (`.content`-Dateien) koexistiert, wird Intlayer folgendermaßen vorgehen:
|
|
103
111
|
|
|
104
|
-
1.
|
|
112
|
+
1. Sowohl JSON- als auch Inhaltsdeklarationsdateien laden und in ein Intlayer-Wörterbuch umwandeln.
|
|
113
|
+
2. Wenn es Konflikte zwischen dem JSON und den Inhaltsdeklarationsdateien gibt, wird Intlayer alle Wörterbücher zusammenführen. Dies hängt von der Priorität der Plugins und der der Inhaltsdeklarationsdatei ab (alles ist konfigurierbar).
|
|
105
114
|
|
|
106
|
-
|
|
115
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder das CMS verwendet wird, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
107
116
|
|
|
108
|
-
|
|
117
|
+
Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
109
118
|
|
|
110
|
-
|
|
119
|
+
### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
|
|
111
120
|
|
|
112
|
-
|
|
121
|
+
Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON pro Komponente implementieren, die überall in Ihrem Code lokalisiert ist.
|
|
113
122
|
|
|
114
|
-
|
|
115
|
-
# Dateien, die von Intlayer generiert werden, ignorieren
|
|
116
|
-
.intlayer
|
|
117
|
-
```
|
|
123
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
118
124
|
|
|
119
|
-
|
|
125
|
+
```ts fileName="intlayer.config.ts"
|
|
126
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
127
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
120
128
|
|
|
121
|
-
|
|
129
|
+
const config: IntlayerConfig = {
|
|
130
|
+
internationalization: {
|
|
131
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
132
|
+
defaultLocale: Locales.ENGLISH,
|
|
133
|
+
},
|
|
122
134
|
|
|
123
|
-
|
|
135
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Lädt und schreibt die Ausgabe und Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
124
159
|
|
|
125
|
-
|
|
160
|
+
---
|
|
126
161
|
|
|
127
162
|
## Git-Konfiguration
|
|
128
163
|
|
|
129
164
|
Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
|
|
130
165
|
|
|
131
166
|
```plaintext fileName=".gitignore"
|
|
132
|
-
#
|
|
167
|
+
# Ignoriere von Intlayer generierte Dateien
|
|
133
168
|
.intlayer
|
|
134
169
|
```
|
|
135
170
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
createdAt: 2025-08-23
|
|
3
3
|
updatedAt: 2025-10-29
|
|
4
4
|
title: Intlayer und next-i18next
|
|
5
|
-
description: Integration von Intlayer mit next-i18next für eine umfassende
|
|
5
|
+
description: Integration von Intlayer mit next-i18next für eine umfassende Next.js Internationalisierungslösung
|
|
6
6
|
keywords:
|
|
7
7
|
- i18next
|
|
8
8
|
- next-i18next
|
|
@@ -16,9 +16,12 @@ slugs:
|
|
|
16
16
|
- blog
|
|
17
17
|
- intlayer-with-next-i18next
|
|
18
18
|
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: Hinzufügen des loadJSON-Plugins
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
|
-
changes: Wechsel zum syncJSON-Plugin und umfassende
|
|
24
|
+
changes: Wechsel zum syncJSON-Plugin und umfassende Neufassung
|
|
22
25
|
---
|
|
23
26
|
|
|
24
27
|
# Next.js Internationalisierung (i18n) mit next-i18next und Intlayer
|
|
@@ -34,22 +37,22 @@ history:
|
|
|
34
37
|
Allerdings bringt next-i18next einige Herausforderungen mit sich:
|
|
35
38
|
|
|
36
39
|
- **Komplexe Konfiguration**: Die Einrichtung von next-i18next erfordert mehrere Konfigurationsdateien und eine sorgfältige Einrichtung der i18n-Instanzen auf Server- und Client-Seite.
|
|
37
|
-
- **
|
|
40
|
+
- **Verteilte Übersetzungen**: Übersetzungsdateien werden typischerweise in separaten Verzeichnissen von den Komponenten gespeichert, was die Konsistenz erschwert.
|
|
38
41
|
- **Manuelle Namespace-Verwaltung**: Entwickler müssen Namespaces manuell verwalten und sicherstellen, dass die Übersetzungsressourcen korrekt geladen werden.
|
|
39
|
-
- **Begrenzte Typsicherheit**:
|
|
42
|
+
- **Begrenzte Typsicherheit**: TypeScript-Unterstützung erfordert zusätzliche Konfiguration und bietet keine automatische Typgenerierung für Übersetzungen.
|
|
40
43
|
|
|
41
44
|
## Was ist Intlayer?
|
|
42
45
|
|
|
43
46
|
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in Next.js-Anwendungen.
|
|
44
47
|
|
|
45
|
-
Eine konkrete Gegenüberstellung mit next-intl finden Sie in unserem Blogbeitrag [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/
|
|
48
|
+
Eine konkrete Gegenüberstellung mit next-intl finden Sie in unserem Blogbeitrag [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
46
49
|
|
|
47
50
|
## Warum Intlayer mit next-i18next kombinieren?
|
|
48
51
|
|
|
49
52
|
Während Intlayer eine ausgezeichnete eigenständige i18n-Lösung bietet (siehe unseren [Next.js-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md)), möchten Sie es möglicherweise aus mehreren Gründen mit next-i18next kombinieren:
|
|
50
53
|
|
|
51
54
|
1. **Bestehender Codebestand**: Sie haben eine etablierte next-i18next-Implementierung und möchten schrittweise zur verbesserten Entwicklererfahrung von Intlayer migrieren.
|
|
52
|
-
2. **
|
|
55
|
+
2. **Legacy-Anforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden i18next-Plugins oder Workflows.
|
|
53
56
|
3. **Teamvertrautheit**: Ihr Team ist mit next-i18next vertraut, möchte aber ein besseres Content-Management.
|
|
54
57
|
|
|
55
58
|
**Dafür kann Intlayer als Adapter für next-i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
|
|
@@ -76,16 +79,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
76
79
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
77
80
|
```
|
|
78
81
|
|
|
82
|
+
```bash packageManager="bun"
|
|
83
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
84
|
+
```
|
|
85
|
+
|
|
79
86
|
**Paket-Erklärungen:**
|
|
80
87
|
|
|
81
88
|
- **intlayer**: Kernbibliothek für Inhaltsdeklaration und -verwaltung
|
|
82
|
-
- **next-intlayer**: Next.js-Integrationsschicht mit Build-Plugins
|
|
83
|
-
- **i18next**: Kern-i18n-Framework
|
|
84
|
-
- **next-i18next**: Next.js-Wrapper für i18next
|
|
85
|
-
- **i18next-resources-to-backend**: Dynamisches Ressourcenladen für i18next
|
|
86
89
|
- **@intlayer/sync-json-plugin**: Plugin zum Synchronisieren von Intlayer-Inhaltsdeklarationen im i18next JSON-Format
|
|
87
90
|
|
|
88
|
-
### Schritt 2: Implementieren Sie das Intlayer-Plugin
|
|
91
|
+
### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
|
|
89
92
|
|
|
90
93
|
Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
|
|
91
94
|
|
|
@@ -102,7 +105,8 @@ const config: IntlayerConfig = {
|
|
|
102
105
|
},
|
|
103
106
|
plugins: [
|
|
104
107
|
syncJSON({
|
|
105
|
-
|
|
108
|
+
typescript fileName="intlayer.config.ts"
|
|
109
|
+
source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
|
|
106
110
|
}),
|
|
107
111
|
],
|
|
108
112
|
};
|
|
@@ -110,14 +114,59 @@ const config: IntlayerConfig = {
|
|
|
110
114
|
export default config;
|
|
111
115
|
```
|
|
112
116
|
|
|
113
|
-
Das `syncJSON`-Plugin
|
|
117
|
+
Das `syncJSON`-Plugin umschließt das JSON automatisch. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
|
|
114
118
|
|
|
115
|
-
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Inhaltsdeklarationsdateien (`.content
|
|
119
|
+
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Inhaltsdeklarationsdateien (`.content` Dateien) koexistiert, geht Intlayer folgendermaßen vor:
|
|
116
120
|
|
|
117
121
|
1. Lädt sowohl JSON- als auch Inhaltsdeklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
|
|
118
|
-
2. Wenn es Konflikte zwischen
|
|
122
|
+
2. Wenn es Konflikte zwischen dem JSON und den Inhaltsdeklarationsdateien gibt, führt Intlayer eine Zusammenführung aller Wörterbücher durch. Dies hängt von der Priorität der Plugins und der der Inhaltsdeklarationsdatei ab (alle sind konfigurierbar).
|
|
123
|
+
|
|
124
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder das CMS verwendet wird, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
125
|
+
|
|
126
|
+
Für weitere Details zum `syncJSON`-Plugin lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
|
|
131
|
+
|
|
132
|
+
Standardmäßig lädt, verbindet und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Codebasis lokalisiert sind.
|
|
133
|
+
|
|
134
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
135
|
+
|
|
136
|
+
```ts fileName="intlayer.config.ts"
|
|
137
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
138
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
139
|
+
|
|
140
|
+
const config: IntlayerConfig = {
|
|
141
|
+
internationalization: {
|
|
142
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
143
|
+
defaultLocale: Locales.ENGLISH,
|
|
144
|
+
},
|
|
145
|
+
|
|
146
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
147
|
+
plugins: [
|
|
148
|
+
/**
|
|
149
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
150
|
+
*/
|
|
151
|
+
loadJSON({
|
|
152
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
153
|
+
locale: Locales.ENGLISH,
|
|
154
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./public/locales/en/${key}.json` haben
|
|
155
|
+
}),
|
|
156
|
+
/**
|
|
157
|
+
* Lädt die JSON-Dateien und schreibt die Ausgabe sowie Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
158
|
+
*/
|
|
159
|
+
syncJSON({
|
|
160
|
+
source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
|
|
161
|
+
priority: 0,
|
|
162
|
+
}),
|
|
163
|
+
],
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
export default config;
|
|
167
|
+
```
|
|
119
168
|
|
|
120
|
-
|
|
169
|
+
Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
121
170
|
|
|
122
171
|
---
|
|
123
172
|
|
|
@@ -126,7 +175,7 @@ Wenn Änderungen über die CLI zur Übersetzung der JSON-Dateien oder über das
|
|
|
126
175
|
Schließen Sie generierte Dateien von der Versionskontrolle aus:
|
|
127
176
|
|
|
128
177
|
```plaintext fileName=".gitignore"
|
|
129
|
-
#
|
|
178
|
+
# Dateien ignorieren, die von Intlayer generiert werden
|
|
130
179
|
.intlayer
|
|
131
180
|
intl
|
|
132
181
|
```
|