@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
|
@@ -18,16 +18,19 @@ slugs:
|
|
|
18
18
|
- blog
|
|
19
19
|
- intlayer-with-react-i18next
|
|
20
20
|
history:
|
|
21
|
+
- version: 7.0.6
|
|
22
|
+
date: 2025-11-01
|
|
23
|
+
changes: loadJSON eklentisi eklendi
|
|
21
24
|
- version: 7.0.0
|
|
22
25
|
date: 2025-10-29
|
|
23
|
-
changes: syncJSON eklentisine
|
|
26
|
+
changes: syncJSON eklentisine geçildi
|
|
24
27
|
---
|
|
25
28
|
|
|
26
29
|
# Intlayer kullanarak react-i18next JSON çevirilerinizi nasıl otomatikleştirirsiniz
|
|
27
30
|
|
|
28
31
|
## Intlayer nedir?
|
|
29
32
|
|
|
30
|
-
**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. React uygulamalarında içerik
|
|
33
|
+
**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. React uygulamalarında içerik yönetimi için modern bir yaklaşım sunar.
|
|
31
34
|
|
|
32
35
|
react-i18next ile somut bir karşılaştırma için [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md) blog yazımıza bakabilirsiniz.
|
|
33
36
|
|
|
@@ -38,10 +41,11 @@ Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bakınız [React en
|
|
|
38
41
|
1. **Mevcut kod tabanı**: Yerleşik bir react-i18next uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
|
|
39
42
|
2. **Eski gereksinimler**: Projeniz mevcut react-i18next eklentileri veya iş akışları ile uyumluluk gerektiriyor.
|
|
40
43
|
3. **Ekip aşinalığı**: Ekibiniz react-i18next ile rahat ancak daha iyi içerik yönetimi istiyor.
|
|
44
|
+
4. **Intlayer özelliklerini kullanma**: İçerik beyanı, çeviri otomasyonu, çevirilerin test edilmesi ve daha fazlası gibi Intlayer özelliklerini kullanmak istiyorsunuz.
|
|
41
45
|
|
|
42
|
-
**Bunun için, Intlayer
|
|
46
|
+
**Bunun için, Intlayer, JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirmeye, çevirilerinizi test etmeye ve daha fazlasına yardımcı olmak için react-i18next için bir adaptör olarak uygulanabilir.**
|
|
43
47
|
|
|
44
|
-
Bu rehber, Intlayer'ın üstün içerik beyan sistemi
|
|
48
|
+
Bu rehber, Intlayer'ın üstün içerik beyan sistemi kullanılırken react-i18next ile uyumluluğun nasıl korunacağını gösterir.
|
|
45
49
|
|
|
46
50
|
## İçindekiler
|
|
47
51
|
|
|
@@ -65,6 +69,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
65
69
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
66
70
|
```
|
|
67
71
|
|
|
72
|
+
```bash packageManager="bun"
|
|
73
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
74
|
+
```
|
|
75
|
+
|
|
68
76
|
**Paket açıklamaları:**
|
|
69
77
|
|
|
70
78
|
- **intlayer**: Uluslararasılaştırma yönetimi, içerik beyanı ve derleme için temel kütüphane
|
|
@@ -72,7 +80,7 @@ yarn add intlayer @intlayer/sync-json-plugin
|
|
|
72
80
|
|
|
73
81
|
### Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın
|
|
74
82
|
|
|
75
|
-
|
|
83
|
+
Desteklenen yerel ayarları tanımlamak için bir Intlayer yapılandırma dosyası oluşturun:
|
|
76
84
|
|
|
77
85
|
**Eğer react-i18next için JSON sözlüklerini de dışa aktarmak istiyorsanız**, `syncJSON` eklentisini ekleyin:
|
|
78
86
|
|
|
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
|
|
|
87
95
|
},
|
|
88
96
|
plugins: [
|
|
89
97
|
syncJSON({
|
|
90
|
-
source: ({ key, locale }) => `./
|
|
98
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
91
99
|
}),
|
|
92
100
|
],
|
|
93
101
|
};
|
|
@@ -95,30 +103,71 @@ const config: IntlayerConfig = {
|
|
|
95
103
|
export default config;
|
|
96
104
|
```
|
|
97
105
|
|
|
98
|
-
`syncJSON` eklentisi JSON'u otomatik olarak
|
|
106
|
+
`syncJSON` eklentisi JSON'u otomatik olarak saracaktır. İçerik mimarisini değiştirmeden JSON dosyalarını okuyup yazacaktır.
|
|
99
107
|
|
|
100
|
-
Eğer JSON'
|
|
108
|
+
Eğer bu JSON'u intlayer içerik beyan dosyaları (`.content` dosyaları) ile birlikte kullanmak isterseniz, Intlayer şu şekilde ilerleyecektir:
|
|
101
109
|
|
|
102
110
|
1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları bir intlayer sözlüğüne dönüştürür.
|
|
103
|
-
2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirme
|
|
111
|
+
2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirme işlemi yapar. Bu, eklentilerin önceliğine ve içerik beyan dosyasının önceliğine bağlıdır (tüm bunlar yapılandırılabilir).
|
|
112
|
+
|
|
113
|
+
CLI kullanılarak JSON'un çevirisi yapılırsa veya CMS kullanılırsa, Intlayer JSON dosyasını yeni çevirilerle güncelleyecektir.
|
|
114
|
+
|
|
115
|
+
`syncJSON` eklentisi hakkında daha fazla detay görmek için lütfen [syncJSON eklenti dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/plugins/sync-json.md) bakınız.
|
|
116
|
+
|
|
117
|
+
### (İsteğe Bağlı) Adım 3: Bileşen başına JSON çevirilerini uygulama
|
|
118
|
+
|
|
119
|
+
Varsayılan olarak, Intlayer hem JSON hem de içerik beyan dosyalarını yükler, birleştirir ve senkronize eder. Daha fazla detay için [içerik beyan dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakabilirsiniz. Ancak isterseniz, Intlayer eklentisi kullanarak kod tabanınızın herhangi bir yerinde yerelleştirilmiş JSON'un bileşen bazında yönetimini de uygulayabilirsiniz.
|
|
120
|
+
|
|
121
|
+
Bunun için `loadJSON` eklentisini kullanabilirsiniz.
|
|
122
|
+
|
|
123
|
+
```ts fileName="intlayer.config.ts"
|
|
124
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
125
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
126
|
+
|
|
127
|
+
const config: IntlayerConfig = {
|
|
128
|
+
internationalization: {
|
|
129
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
130
|
+
defaultLocale: Locales.ENGLISH,
|
|
131
|
+
},
|
|
132
|
+
|
|
133
|
+
// Mevcut JSON dosyalarınızı Intlayer sözlükleri ile senkronize tutun
|
|
134
|
+
plugins: [
|
|
135
|
+
/**
|
|
136
|
+
* src içindeki {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler
|
|
137
|
+
*/
|
|
138
|
+
loadJSON({
|
|
139
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
140
|
+
locale: Locales.ENGLISH,
|
|
141
|
+
priority: 1, // Bu JSON dosyalarının `./locales/en/${key}.json` dosyalarından öncelikli olmasını sağlar
|
|
142
|
+
}),
|
|
143
|
+
/**
|
|
144
|
+
* locales dizinindeki JSON dosyalarını yükler ve çıktı ile çevirileri geri yazar
|
|
145
|
+
*/
|
|
146
|
+
syncJSON({
|
|
147
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
148
|
+
priority: 0,
|
|
149
|
+
}),
|
|
150
|
+
],
|
|
151
|
+
};
|
|
104
152
|
|
|
105
|
-
|
|
153
|
+
export default config;
|
|
154
|
+
```
|
|
106
155
|
|
|
107
|
-
`
|
|
156
|
+
Bu, `src` dizinindeki `{key}.i18n.json` desenine uyan tüm JSON dosyalarını yükleyecek ve bunları Intlayer sözlükleri olarak kullanacaktır.
|
|
108
157
|
|
|
109
158
|
## Git Yapılandırması
|
|
110
159
|
|
|
111
|
-
Otomatik oluşturulan Intlayer dosyalarını
|
|
160
|
+
Otomatik oluşturulan Intlayer dosyalarını yok saymanız önerilir:
|
|
112
161
|
|
|
113
162
|
```plaintext fileName=".gitignore"
|
|
114
|
-
# Intlayer tarafından oluşturulan dosyaları
|
|
163
|
+
# Intlayer tarafından oluşturulan dosyaları yok say
|
|
115
164
|
.intlayer
|
|
116
165
|
```
|
|
117
166
|
|
|
118
|
-
Bu dosyalar
|
|
167
|
+
Bu dosyalar derleme süreciniz sırasında yeniden oluşturulabilir ve sürüm kontrolüne dahil edilmesi gerekmez.
|
|
119
168
|
|
|
120
169
|
### VS Code Eklentisi
|
|
121
170
|
|
|
122
|
-
Geliştirici deneyimini iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni
|
|
171
|
+
Geliştirici deneyimini iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni kurun:
|
|
123
172
|
|
|
124
|
-
[VS Code Marketinden
|
|
173
|
+
[VS Code Marketinden Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-01-02
|
|
3
3
|
updatedAt: 2025-10-29
|
|
4
|
-
title:
|
|
4
|
+
title: React-intl JSON çevirilerinizi Intlayer kullanarak nasıl otomatikleştirirsiniz
|
|
5
5
|
description: React uygulamalarında gelişmiş uluslararasılaştırma için Intlayer ve react-intl ile JSON çevirilerinizi otomatikleştirin.
|
|
6
6
|
keywords:
|
|
7
7
|
- react-intl
|
|
@@ -16,36 +16,44 @@ 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 eklentisi eklendi
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
|
-
changes: syncJSON eklentisine
|
|
24
|
+
changes: syncJSON eklentisine geçildi
|
|
22
25
|
---
|
|
23
26
|
|
|
24
|
-
#
|
|
27
|
+
# React-intl JSON çevirilerinizi Intlayer kullanarak nasıl otomatikleştirirsiniz
|
|
25
28
|
|
|
26
|
-
##
|
|
29
|
+
## İçindekiler
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Intlayer Nedir?
|
|
27
34
|
|
|
28
|
-
**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. React uygulamalarında içerik
|
|
35
|
+
**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. React uygulamalarında içerik yönetimine modern bir yaklaşım sunar.
|
|
29
36
|
|
|
30
|
-
react-intl ile somut bir karşılaştırma için [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/
|
|
37
|
+
react-intl ile somut bir karşılaştırma için [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/tr/react-i18next_vs_react-intl_vs_intlayer.md) blog yazımıza bakabilirsiniz.
|
|
31
38
|
|
|
32
39
|
## Neden Intlayer'ı react-intl ile Birleştirmelisiniz?
|
|
33
40
|
|
|
34
|
-
Intlayer mükemmel bir bağımsız i18n çözümü sunarken (
|
|
41
|
+
Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bkz. [React entegrasyon rehberimiz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_with_vite+react.md)), react-intl ile birleştirmek isteyebileceğiniz birkaç neden olabilir:
|
|
35
42
|
|
|
36
43
|
1. **Mevcut kod tabanı**: Yerleşik bir react-intl uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
|
|
37
44
|
2. **Eski gereksinimler**: Projeniz mevcut react-intl eklentileri veya iş akışları ile uyumluluk gerektiriyor.
|
|
38
45
|
3. **Ekip aşinalığı**: Ekibiniz react-intl ile rahat ancak daha iyi içerik yönetimi istiyor.
|
|
46
|
+
4. **Intlayer özelliklerini kullanma**: İçerik beyanı, çeviri otomasyonu, çevirilerin test edilmesi ve daha fazlası gibi Intlayer özelliklerini kullanmak istiyorsunuz.
|
|
39
47
|
|
|
40
48
|
**Bunun için, Intlayer react-intl için bir adaptör olarak uygulanabilir; böylece JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirebilir, çevirilerinizi test edebilir ve daha fazlasını yapabilirsiniz.**
|
|
41
49
|
|
|
42
|
-
Bu rehber, Intlayer'ın üstün içerik beyan sistemi
|
|
50
|
+
Bu rehber, react-intl ile uyumluluğu korurken Intlayer'ın üstün içerik beyan sistemi nasıl kullanılacağını gösterir.
|
|
43
51
|
|
|
44
52
|
## İçindekiler
|
|
45
53
|
|
|
46
54
|
<TOC/>
|
|
47
55
|
|
|
48
|
-
## Intlayer'ı react-intl ile Kurmak
|
|
56
|
+
## Intlayer'ı react-intl ile Kurmak için Adım Adım Rehber
|
|
49
57
|
|
|
50
58
|
### Adım 1: Bağımlılıkları Yükleyin
|
|
51
59
|
|
|
@@ -63,9 +71,13 @@ 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
|
**Paket açıklamaları:**
|
|
67
79
|
|
|
68
|
-
- **intlayer**: Uluslararasılaştırma yönetimi, içerik beyanı ve
|
|
80
|
+
- **intlayer**: Uluslararasılaştırma yönetimi, içerik beyanı ve derleme için temel kütüphane
|
|
69
81
|
- **@intlayer/sync-json-plugin**: Intlayer içerik beyanlarını react-intl uyumlu JSON formatına aktarmak için eklenti
|
|
70
82
|
|
|
71
83
|
### Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın
|
|
@@ -93,31 +105,71 @@ const config: IntlayerConfig = {
|
|
|
93
105
|
export default config;
|
|
94
106
|
```
|
|
95
107
|
|
|
96
|
-
`syncJSON` eklentisi JSON'u otomatik olarak saracaktır. İçerik mimarisini değiştirmeden JSON dosyalarını okuyup
|
|
108
|
+
`syncJSON` eklentisi JSON'u otomatik olarak saracaktır. İçerik mimarisini değiştirmeden JSON dosyalarını okuyup yazacaktır.
|
|
97
109
|
|
|
98
110
|
Eğer bu JSON'un intlayer içerik beyan dosyaları (`.content` dosyaları) ile birlikte var olmasını istiyorsanız, Intlayer şu şekilde ilerleyecektir:
|
|
99
111
|
|
|
100
|
-
1. Hem JSON hem de içerik beyan dosyalarını
|
|
112
|
+
1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları bir intlayer sözlüğüne dönüştürür.
|
|
113
|
+
2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirme işlemi yapar. Bu işlem, eklentilerin önceliğine ve içerik beyan dosyasının önceliğine bağlıdır (hepsi yapılandırılabilir).
|
|
101
114
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
JSON'u çevirmek için CLI kullanılarak veya CMS aracılığıyla değişiklik yapılırsa, Intlayer JSON dosyasını yeni çevirilerle güncelleyecektir.
|
|
115
|
+
CLI kullanılarak JSON'un çevirisi yapılırsa veya CMS kullanılırsa, Intlayer JSON dosyasını yeni çevirilerle güncelleyecektir.
|
|
105
116
|
|
|
106
117
|
`syncJSON` eklentisi hakkında daha fazla ayrıntı için lütfen [syncJSON eklenti dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/plugins/sync-json.md) bakınız.
|
|
107
118
|
|
|
119
|
+
### (İsteğe Bağlı) Adım 3: Bileşen başına JSON çevirilerini uygulama
|
|
120
|
+
|
|
121
|
+
Varsayılan olarak, Intlayer hem JSON hem de içerik beyan dosyalarını yükler, birleştirir ve senkronize eder. Daha fazla bilgi için [içerik beyan dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakabilirsiniz. Ancak isterseniz, Intlayer eklentisi kullanarak kod tabanınızda herhangi bir yerde yerelleştirilmiş JSON'un bileşen bazında yönetimini de uygulayabilirsiniz.
|
|
122
|
+
|
|
123
|
+
Bunun için `loadJSON` eklentisini kullanabilirsiniz.
|
|
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
|
+
// Mevcut JSON dosyalarınızı Intlayer sözlükleri ile senkronize tutun
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* src içindeki {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Bu JSON dosyalarının `./locales/en/${key}.json` dosyalarından öncelikli olmasını sağlar
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* locales dizinindeki JSON dosyalarını yükler ve çıktı ile çevirileri geri yazar
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Bu, `src` dizininde `{key}.i18n.json` desenine uyan tüm JSON dosyalarını yükler ve bunları Intlayer sözlükleri olarak kullanır.
|
|
159
|
+
|
|
108
160
|
## Git Yapılandırması
|
|
109
161
|
|
|
110
|
-
Otomatik oluşturulan Intlayer dosyalarını
|
|
162
|
+
Otomatik oluşturulan Intlayer dosyalarını göz ardı etmek önerilir:
|
|
111
163
|
|
|
112
164
|
```plaintext fileName=".gitignore"
|
|
113
|
-
# Intlayer tarafından oluşturulan dosyaları
|
|
165
|
+
# Intlayer tarafından oluşturulan dosyaları göz ardı et
|
|
114
166
|
.intlayer
|
|
115
167
|
```
|
|
116
168
|
|
|
117
|
-
Bu dosyalar
|
|
169
|
+
Bu dosyalar derleme süreciniz sırasında yeniden oluşturulabilir ve sürüm kontrolüne dahil edilmesi gerekmez.
|
|
118
170
|
|
|
119
171
|
### VS Code Eklentisi
|
|
120
172
|
|
|
121
173
|
Geliştirici deneyimini iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyin:
|
|
122
174
|
|
|
123
|
-
[VS Code
|
|
175
|
+
[VS Code Marketplace'ten yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Intlayer ve vue-i18n
|
|
5
|
+
description: Kapsamlı bir Vue.js uluslararasılaştırma çözümü için Intlayer'ı vue-i18n ile entegre edin
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- Uluslararasılaştırma
|
|
10
|
+
- Blog
|
|
11
|
+
- Vue.js
|
|
12
|
+
- Nuxt
|
|
13
|
+
- JavaScript
|
|
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 eklentisi eklendi
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: syncJSON eklentisine geçiş ve kapsamlı yeniden yazım
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# vue-i18n ve Intlayer ile Vue.js Uluslararasılaştırması (i18n)
|
|
28
|
+
|
|
29
|
+
## İçindekiler
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Intlayer Nedir?
|
|
34
|
+
|
|
35
|
+
**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. Vue.js ve Nuxt uygulamalarında içerik yönetimine modern bir yaklaşım sunar.
|
|
36
|
+
|
|
37
|
+
Vue-i18n ile somut bir karşılaştırma için [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/vue-i18n_vs_intlayer.md) blog yazımıza bakabilirsiniz.
|
|
38
|
+
|
|
39
|
+
## Neden Intlayer'ı vue-i18n ile Birleştirmelisiniz?
|
|
40
|
+
|
|
41
|
+
Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bkz. [Vue.js entegrasyon rehberimiz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+vue.md)), onu vue-i18n ile birleştirmek isteyebileceğiniz birkaç neden olabilir:
|
|
42
|
+
|
|
43
|
+
1. **Mevcut kod tabanı**: Yerleşik bir vue-i18n uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
|
|
44
|
+
2. **Eski gereksinimler**: Projeniz mevcut vue-i18n eklentileri veya iş akışları ile uyumluluk gerektiriyor.
|
|
45
|
+
3. **Ekip aşinalığı**: Ekibiniz vue-i18n ile rahat ancak daha iyi içerik yönetimi istiyor.
|
|
46
|
+
4. **Intlayer özelliklerini kullanma**: İçerik beyanı, çeviri otomasyonu, çevirilerin test edilmesi ve daha fazlası gibi Intlayer özelliklerini kullanmak istiyorsunuz.
|
|
47
|
+
|
|
48
|
+
**Bunun için, Intlayer vue-i18n için bir adaptör olarak uygulanabilir; bu, JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirmenize, çevirilerinizi test etmenize ve daha fazlasına yardımcı olur.**
|
|
49
|
+
|
|
50
|
+
Bu rehber, Intlayer'ın üstün içerik beyan sistemi avantajlarından yararlanırken vue-i18n ile uyumluluğu nasıl koruyacağınızı gösterir.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Intlayer'ı vue-i18n ile Kurmak İçin Adım Adım Rehber
|
|
55
|
+
|
|
56
|
+
### Adım 1: Bağımlılıkları Yükleyin
|
|
57
|
+
|
|
58
|
+
Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:
|
|
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
|
+
**Paket açıklamaları:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: İçerik beyanı ve yönetimi için temel kütüphane
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Intlayer içerik beyanlarını vue-i18n JSON formatına senkronize etmek için eklenti
|
|
80
|
+
|
|
81
|
+
### Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın
|
|
82
|
+
|
|
83
|
+
Desteklenen yerel ayarları tanımlamak için bir Intlayer yapılandırma dosyası oluşturun:
|
|
84
|
+
|
|
85
|
+
**Eğer ayrıca vue-i18n için JSON sözlükleri dışa aktarmak istiyorsanız**, `syncJSON` eklentisini ekleyin:
|
|
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` eklentisi JSON'u otomatik olarak sarar. İçerik mimarisini değiştirmeden JSON dosyalarını okur ve yazar.
|
|
107
|
+
|
|
108
|
+
Eğer JSON'un intlayer içerik beyan dosyaları (`.content` dosyaları) ile birlikte var olmasını istiyorsanız, Intlayer şu şekilde ilerler:
|
|
109
|
+
|
|
110
|
+
1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları bir intlayer sözlüğüne dönüştürür.
|
|
111
|
+
2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirir. Bu işlem, eklentilerin ve içerik beyan dosyasının önceliklerine bağlıdır (tümü yapılandırılabilir).
|
|
112
|
+
|
|
113
|
+
CLI kullanılarak JSON'un çevrilmesi için değişiklik yapılırsa veya CMS kullanılırsa, Intlayer JSON dosyasını yeni çevirilerle günceller.
|
|
114
|
+
|
|
115
|
+
`syncJSON` eklentisi hakkında daha fazla detay görmek için lütfen [syncJSON eklenti dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/plugins/sync-json.md) bakınız.
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### (İsteğe Bağlı) Adım 3: Bileşen başına JSON çevirilerini uygulama
|
|
120
|
+
|
|
121
|
+
Varsayılan olarak, Intlayer hem JSON hem de içerik beyan dosyalarını yükler, birleştirir ve senkronize eder. Daha fazla detay için [içerik beyan dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakabilirsiniz. Ancak isterseniz, Intlayer eklentisi kullanarak kod tabanınızda herhangi bir yerde yerelleştirilmiş JSON'un bileşen bazında yönetimini de uygulayabilirsiniz.
|
|
122
|
+
|
|
123
|
+
Bunun için `loadJSON` eklentisini kullanabilirsiniz.
|
|
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
|
+
// Mevcut JSON dosyalarınızı Intlayer sözlükleri ile senkronize tutun
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* src içindeki, {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Bu JSON dosyalarının `./locales/en/${key}.json` dosyalarından öncelikli olmasını sağlar
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* locales dizinindeki JSON dosyalarını yükler ve çıktı ile çevirileri geri yazar
|
|
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
|
+
Bu, `src` dizinindeki `{key}.i18n.json` desenine uyan tüm JSON dosyalarını yükler ve bunları Intlayer sözlükleri olarak kullanır.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Git Yapılandırması
|
|
163
|
+
|
|
164
|
+
Oluşturulan dosyaları sürüm kontrolünden hariç tutun:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# Intlayer tarafından oluşturulan dosyaları yoksay
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Bu dosyalar derleme sürecinde otomatik olarak yeniden oluşturulur ve depoza gönderilmesine gerek yoktur.
|
|
173
|
+
|
|
174
|
+
### VS Code Eklentisi
|
|
175
|
+
|
|
176
|
+
Geliştirici deneyimini iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyin:
|
|
177
|
+
|
|
178
|
+
[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
179
|
+
|
|
180
|
+
[VS Code Marketinden Yükleyin](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: Cách tự động hóa bản dịch JSON i18next của bạn bằng Intlayer
|
|
5
5
|
description: Tự động hóa bản dịch JSON của bạn với Intlayer và i18next để nâng cao quốc tế hóa trong các ứng dụng JavaScript.
|
|
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: Thêm plugin loadJSON
|
|
23
26
|
- version: 7.0.0
|
|
24
27
|
date: 2025-10-29
|
|
25
28
|
changes: Thay đổi sang plugin syncJSON
|
|
@@ -29,19 +32,20 @@ history:
|
|
|
29
32
|
|
|
30
33
|
## Intlayer là gì?
|
|
31
34
|
|
|
32
|
-
**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một
|
|
35
|
+
**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một phương pháp hiện đại để quản lý nội dung trong các ứng dụng JavaScript.
|
|
33
36
|
|
|
34
37
|
Xem so sánh cụ thể với i18next trong bài viết blog của chúng tôi [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
35
38
|
|
|
36
39
|
## Tại sao kết hợp Intlayer với i18next?
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
Mặc dù Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp với Next.js của chúng tôi [Next.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md)), bạn có thể muốn kết hợp nó với i18next vì một số lý do:
|
|
39
42
|
|
|
40
43
|
1. **Mã nguồn hiện có**: Bạn đã có một triển khai i18next ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
|
|
41
44
|
2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc i18next hiện có.
|
|
42
|
-
3.
|
|
45
|
+
3. **Sự quen thuộc của đội ngũ**: Đội ngũ của bạn quen thuộc với i18next nhưng muốn quản lý nội dung tốt hơn.
|
|
46
|
+
4. **Sử dụng các tính năng của Intlayer**: Bạn muốn sử dụng các tính năng của Intlayer như khai báo nội dung, quản lý khóa dịch, trạng thái dịch, và nhiều hơn nữa.
|
|
43
47
|
|
|
44
|
-
**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho i18next để giúp tự động hóa
|
|
48
|
+
**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho i18next để giúp tự động hóa các bản dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử các bản dịch, và nhiều hơn nữa.**
|
|
45
49
|
|
|
46
50
|
Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với i18next.
|
|
47
51
|
|
|
@@ -67,6 +71,10 @@ 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
|
**Mô tả các gói:**
|
|
71
79
|
|
|
72
80
|
- **intlayer**: Thư viện lõi để quản lý quốc tế hóa, khai báo nội dung và xây dựng
|
|
@@ -74,7 +82,7 @@ yarn add intlayer @intlayer/sync-json-plugin
|
|
|
74
82
|
|
|
75
83
|
### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
|
|
76
84
|
|
|
77
|
-
Tạo một tệp cấu hình Intlayer để định nghĩa các
|
|
85
|
+
Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ được hỗ trợ của bạn:
|
|
78
86
|
|
|
79
87
|
**Nếu bạn cũng muốn xuất các từ điển JSON cho i18next**, hãy thêm plugin `syncJSON`:
|
|
80
88
|
|
|
@@ -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,13 +107,58 @@ export default config;
|
|
|
99
107
|
|
|
100
108
|
Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi cấu trúc nội dung.
|
|
101
109
|
|
|
102
|
-
Nếu bạn muốn cho phép JSON tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
|
|
110
|
+
Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
|
|
103
111
|
|
|
104
112
|
1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
|
|
105
|
-
2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào
|
|
113
|
+
2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và của tệp khai báo nội dung (tất cả đều có thể cấu hình).
|
|
106
114
|
|
|
107
115
|
Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
|
|
108
116
|
|
|
117
|
+
Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
|
|
118
|
+
|
|
119
|
+
### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
|
|
120
|
+
|
|
121
|
+
Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả tệp JSON và tệp khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin của Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
|
|
122
|
+
|
|
123
|
+
Để làm điều đó, bạn có thể sử dụng plugin `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
|
+
// Giữ cho các tệp JSON hiện tại của bạn đồng bộ với từ điển Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Sẽ tải tất cả các tệp JSON trong thư mục src khớp với mẫu {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Đảm bảo các tệp JSON này ưu tiên hơn các tệp tại `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Sẽ tải, và ghi đầu ra cùng các bản dịch trở lại các tệp JSON trong thư mục locales
|
|
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
|
+
Điều này sẽ tải tất cả các tệp JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
109
162
|
## Cấu hình Git
|
|
110
163
|
|
|
111
164
|
Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
|
|
@@ -115,12 +168,10 @@ Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
|
|
|
115
168
|
.intlayer
|
|
116
169
|
```
|
|
117
170
|
|
|
118
|
-
Các tệp này có thể được tạo lại trong quá trình xây dựng
|
|
171
|
+
Các tệp này có thể được tạo lại trong quá trình xây dựng và không cần phải cam kết vào hệ thống quản lý phiên bản.
|
|
119
172
|
|
|
120
173
|
### Tiện ích mở rộng VS Code
|
|
121
174
|
|
|
122
|
-
Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer
|
|
175
|
+
Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức:
|
|
123
176
|
|
|
124
177
|
[Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
125
|
-
|
|
126
|
-
[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|