@intlayer/docs 7.1.9 → 7.2.0
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 +730 -0
- package/docs/ar/intlayer_with_vite+svelte.md +288 -104
- package/docs/de/intlayer_with_svelte_kit.md +730 -0
- package/docs/de/intlayer_with_vite+svelte.md +302 -101
- package/docs/en/intlayer_with_svelte_kit.md +560 -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 +730 -0
- package/docs/en-GB/intlayer_with_vite+svelte.md +262 -84
- package/docs/es/intlayer_with_svelte_kit.md +730 -0
- package/docs/es/intlayer_with_vite+svelte.md +300 -107
- package/docs/fr/intlayer_with_svelte_kit.md +762 -0
- package/docs/fr/intlayer_with_vite+svelte.md +297 -101
- package/docs/hi/intlayer_with_svelte_kit.md +730 -0
- package/docs/hi/intlayer_with_vite+svelte.md +298 -108
- package/docs/id/intlayer_with_svelte_kit.md +730 -0
- package/docs/id/intlayer_with_vite+svelte.md +277 -99
- package/docs/it/intlayer_with_svelte_kit.md +762 -0
- package/docs/it/intlayer_with_vite+svelte.md +275 -99
- package/docs/ja/intlayer_with_svelte_kit.md +730 -0
- package/docs/ja/intlayer_with_vite+svelte.md +295 -110
- package/docs/ko/intlayer_with_svelte_kit.md +730 -0
- package/docs/ko/intlayer_with_vite+svelte.md +286 -199
- package/docs/pl/intlayer_with_svelte_kit.md +732 -0
- package/docs/pl/intlayer_with_vite+svelte.md +273 -101
- package/docs/pt/intlayer_with_svelte_kit.md +764 -0
- package/docs/pt/intlayer_with_vite+svelte.md +290 -96
- package/docs/ru/intlayer_with_svelte_kit.md +730 -0
- package/docs/ru/intlayer_with_vite+svelte.md +275 -99
- package/docs/tr/intlayer_with_svelte_kit.md +730 -0
- package/docs/tr/intlayer_with_vite+svelte.md +297 -119
- package/docs/vi/intlayer_with_svelte_kit.md +730 -0
- package/docs/vi/intlayer_with_vite+svelte.md +275 -102
- package/docs/zh/intlayer_with_svelte_kit.md +730 -0
- package/docs/zh/intlayer_with_vite+svelte.md +309 -107
- package/package.json +6 -6
- package/src/generated/docs.entry.ts +19 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
createdAt: 2025-
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title: Vite
|
|
5
|
-
description: Vite ve Svelte web sitenizi çok dilli hale
|
|
2
|
+
createdAt: 2025-04-18
|
|
3
|
+
updatedAt: 2025-11-19
|
|
4
|
+
title: Vite ve Svelte uygulamanızı nasıl çevirirsiniz – i18n rehberi 2025
|
|
5
|
+
description: Vite ve Svelte web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Uluslararasılaştırma (i18n) ve çeviri için dokümantasyonu takip edin.
|
|
6
6
|
keywords:
|
|
7
7
|
- Uluslararasılaştırma
|
|
8
8
|
- Dokümantasyon
|
|
@@ -14,18 +14,21 @@ 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: Doküman güncellendi
|
|
19
22
|
- version: 5.5.10
|
|
20
23
|
date: 2025-06-29
|
|
21
24
|
changes: Geçmiş başlatıldı
|
|
22
25
|
---
|
|
23
26
|
|
|
24
|
-
# Intlayer
|
|
27
|
+
# Intlayer kullanarak Vite ve Svelte web sitenizi çevirin | Uluslararasılaştırma (i18n)
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
## İçindekiler
|
|
27
30
|
|
|
28
|
-
|
|
31
|
+
<TOC/>
|
|
29
32
|
|
|
30
33
|
## Intlayer Nedir?
|
|
31
34
|
|
|
@@ -33,18 +36,28 @@ history:
|
|
|
33
36
|
|
|
34
37
|
Intlayer ile şunları yapabilirsiniz:
|
|
35
38
|
|
|
36
|
-
- **Bileşen
|
|
37
|
-
- **Meta verileri, rotaları ve içeriği dinamik olarak
|
|
38
|
-
- **Otomatik oluşturulan
|
|
39
|
-
- **Dinamik
|
|
39
|
+
- **Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetmek.**
|
|
40
|
+
- **Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirmek.**
|
|
41
|
+
- **Otomatik oluşturulan tiplerle TypeScript desteğini sağlamak, böylece otomatik tamamlama ve hata tespitini geliştirmek.**
|
|
42
|
+
- **Dinamik dil algılama ve değiştirme gibi gelişmiş özelliklerden faydalanmak.**
|
|
40
43
|
|
|
41
44
|
---
|
|
42
45
|
|
|
43
|
-
## Vite ve Svelte Uygulamasında Intlayer
|
|
46
|
+
## Vite ve Svelte Uygulamasında Intlayer Kurulum Adım Adım Rehberi
|
|
44
47
|
|
|
45
|
-
|
|
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 kullanarak uygulamanızı nasıl uluslararasılaştırırsınız"
|
|
52
|
+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
53
|
+
loading="lazy"
|
|
54
|
+
/>
|
|
46
55
|
|
|
47
|
-
|
|
56
|
+
GitHub'da [Uygulama Şablonuna](https://github.com/aymericzip/intlayer-vite-svelte-template) bakın.
|
|
57
|
+
|
|
58
|
+
### Adım 1: Bağımlılıkları Yükleyin
|
|
59
|
+
|
|
60
|
+
Gerekli paketleri npm kullanarak yükleyin:
|
|
48
61
|
|
|
49
62
|
```bash packageManager="npm"
|
|
50
63
|
npm install intlayer svelte-intlayer
|
|
@@ -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
|
+
Konfigürasyon yönetimi, çeviri, [içerik bildirimi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md), transpile etme ve [CLI komutları](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_cli.md) için uluslararasılaştırma araçları sağlayan temel paket.
|
|
67
85
|
|
|
68
86
|
- **svelte-intlayer**
|
|
69
|
-
Svelte uygulamasıyla
|
|
87
|
+
Intlayer'ı Svelte uygulamasıyla entegre eden paket. Svelte uluslararasılaştırması için context sağlayıcıları ve hook'lar sunar.
|
|
70
88
|
|
|
71
|
-
- **vite-intlayer**
|
|
72
|
-
[Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production) ile
|
|
89
|
+
- **vite-intlayer**
|
|
90
|
+
Intlayer'ı [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production) ile entegre etmek için Vite eklentisini içerir; ayrıca kullanıcının tercih ettiği dili tespit etmek, çerezleri yönetmek ve URL yönlendirmelerini işlemek için middleware sağlar.
|
|
73
91
|
|
|
74
|
-
### Adım 2:
|
|
92
|
+
### Adım 2: Projenizin Konfigürasyonu
|
|
75
93
|
|
|
76
|
-
Uygulamanızın dillerini yapılandırmak için bir
|
|
94
|
+
Uygulamanızın dillerini yapılandırmak için bir konfigürasyon dosyası oluşturun:
|
|
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,7 +102,7 @@ const config: IntlayerConfig = {
|
|
|
84
102
|
Locales.ENGLISH,
|
|
85
103
|
Locales.FRENCH,
|
|
86
104
|
Locales.SPANISH,
|
|
87
|
-
// Diğer
|
|
105
|
+
// Diğer dilleriniz
|
|
88
106
|
],
|
|
89
107
|
defaultLocale: Locales.ENGLISH,
|
|
90
108
|
},
|
|
@@ -93,51 +111,13 @@ const config: IntlayerConfig = {
|
|
|
93
111
|
export default config;
|
|
94
112
|
```
|
|
95
113
|
|
|
96
|
-
|
|
97
|
-
import { Locales } from "intlayer";
|
|
114
|
+
> Bu konfigürasyon dosyası aracılığıyla, yerelleştirilmiş URL'ler, middleware yönlendirmesi, çerez isimleri, içerik beyanlarınızın konumu ve uzantısı, Intlayer loglarının konsolda devre dışı bırakılması ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için [konfigürasyon dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) bakınız.
|
|
98
115
|
|
|
99
|
-
|
|
100
|
-
const config = {
|
|
101
|
-
internationalization: {
|
|
102
|
-
locales: [
|
|
103
|
-
Locales.ENGLISH,
|
|
104
|
-
Locales.FRENCH,
|
|
105
|
-
Locales.SPANISH,
|
|
106
|
-
// Diğer yerel ayarlarınız
|
|
107
|
-
],
|
|
108
|
-
defaultLocale: Locales.ENGLISH,
|
|
109
|
-
},
|
|
110
|
-
};
|
|
116
|
+
### Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin
|
|
111
117
|
|
|
112
|
-
|
|
113
|
-
```
|
|
118
|
+
Konfigürasyonunuza intlayer eklentisini ekleyin.
|
|
114
119
|
|
|
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
|
-
// Diğer yerel ayarlarınız
|
|
126
|
-
],
|
|
127
|
-
defaultLocale: Locales.ENGLISH,
|
|
128
|
-
},
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
module.exports = config;
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
> Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, middleware yönlendirmesini, çerez adlarını, içerik bildiriminizin konumunu ve uzantısını, Intlayer günlüklerini konsolda devre dışı bırakmayı ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için [yapılandırma dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) bakın.
|
|
135
|
-
|
|
136
|
-
### Adım 3: Intlayer'ı Vite Yapılandırmanıza Entegre Etme
|
|
137
|
-
|
|
138
|
-
Yapılandırmanıza intlayer eklentisini ekleyin.
|
|
139
|
-
|
|
140
|
-
```typescript fileName="vite.config.ts" codeFormat="typescript"
|
|
120
|
+
```typescript fileName="vite.config.ts"
|
|
141
121
|
import { defineConfig } from "vite";
|
|
142
122
|
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
143
123
|
import { intlayer } from "vite-intlayer";
|
|
@@ -148,33 +128,11 @@ export default defineConfig({
|
|
|
148
128
|
});
|
|
149
129
|
```
|
|
150
130
|
|
|
151
|
-
|
|
152
|
-
import { defineConfig } from "vite";
|
|
153
|
-
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
154
|
-
import { intlayer } from "vite-intlayer";
|
|
155
|
-
|
|
156
|
-
// https://vitejs.dev/config/
|
|
157
|
-
export default defineConfig({
|
|
158
|
-
plugins: [svelte(), intlayer()],
|
|
159
|
-
});
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
```javascript fileName="vite.config.cjs" codeFormat="commonjs"
|
|
163
|
-
const { defineConfig } = require("vite");
|
|
164
|
-
const react = require("@vitejs/plugin-react-swc");
|
|
165
|
-
const { intlayer } = require("vite-intlayer");
|
|
166
|
-
|
|
167
|
-
// https://vitejs.dev/config/
|
|
168
|
-
module.exports = defineConfig({
|
|
169
|
-
plugins: [react(), intlayer()],
|
|
170
|
-
});
|
|
171
|
-
```
|
|
131
|
+
> `intlayer()` Vite eklentisi, Intlayer'ı Vite ile entegre etmek için kullanılır. İçerik beyan dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Vite uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca, performansı optimize etmek için takma adlar (alias) sağlar.
|
|
172
132
|
|
|
173
|
-
|
|
133
|
+
### Adım 4: İçeriğinizi Beyan Edin
|
|
174
134
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
Çevirileri depolamak için içerik bildiriminizi oluşturun ve yönetin:
|
|
135
|
+
Çevirileri depolamak için içerik beyanlarınızı oluşturun ve yönetin:
|
|
178
136
|
|
|
179
137
|
```tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"
|
|
180
138
|
import { t, type Dictionary } from "intlayer";
|
|
@@ -197,6 +155,7 @@ export default appContent;
|
|
|
197
155
|
import { t } from "intlayer";
|
|
198
156
|
|
|
199
157
|
/** @type {import('intlayer').Dictionary} */
|
|
158
|
+
// İçerik sözlüğü tipi tanımı
|
|
200
159
|
const appContent = {
|
|
201
160
|
key: "app",
|
|
202
161
|
content: {
|
|
@@ -215,6 +174,7 @@ export default appContent;
|
|
|
215
174
|
const { t } = require("intlayer");
|
|
216
175
|
|
|
217
176
|
/** @type {import('intlayer').Dictionary} */
|
|
177
|
+
// İçerik sözlüğü tipi tanımı
|
|
218
178
|
const appContent = {
|
|
219
179
|
key: "app",
|
|
220
180
|
content: {
|
|
@@ -246,64 +206,282 @@ module.exports = appContent;
|
|
|
246
206
|
}
|
|
247
207
|
```
|
|
248
208
|
|
|
249
|
-
> İçerik
|
|
209
|
+
> İçerik bildirimleriniz, uygulamanızda `contentDir` dizinine (varsayılan olarak `./src`) dahil edildiği sürece herhangi bir yerde tanımlanabilir. Ve içerik bildirim dosya uzantısıyla eşleşmelidir (varsayılan olarak `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
|
|
250
210
|
|
|
251
|
-
> Daha fazla
|
|
211
|
+
> Daha fazla detay için, [içerik bildirim dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakabilirsiniz.
|
|
252
212
|
|
|
253
213
|
### Adım 5: Kodunuzda Intlayer'ı Kullanın
|
|
254
214
|
|
|
255
|
-
|
|
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
|
+
<!-- İçeriği basit içerik olarak render et -->
|
|
226
|
+
<h1>{$content.title}</h1>
|
|
227
|
+
<!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için -->
|
|
228
|
+
<h1><svelte:component this={$content.title} /></h1>
|
|
229
|
+
<!-- İçeriği string olarak render etmek için -->
|
|
230
|
+
<div aria-label={$content.title.value}></div>
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### (İsteğe bağlı) Adım 6: İçeriğinizin dilini değiştirin
|
|
234
|
+
|
|
235
|
+
```svelte fileName="src/App.svelte"
|
|
236
|
+
<script lang="ts">
|
|
237
|
+
import { getLocaleName } from 'intlayer';
|
|
238
|
+
import { useLocale } from 'svelte-intlayer';
|
|
239
|
+
|
|
240
|
+
// Dil bilgisi ve setLocale fonksiyonunu al
|
|
241
|
+
const { locale, availableLocales, setLocale } = useLocale();
|
|
242
|
+
|
|
243
|
+
// Dil değişikliğini yönet
|
|
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
|
+
### (İsteğe bağlı) Adım 7: Markdown Render Etme
|
|
263
|
+
|
|
264
|
+
Intlayer, Markdown içeriğini doğrudan Svelte uygulamanızda render etmeyi destekler. Varsayılan olarak, Markdown düz metin olarak işlenir. Markdown'u zengin HTML'ye dönüştürmek için `@humanspeak/svelte-markdown` veya başka bir markdown ayrıştırıcı entegre edebilirsiniz.
|
|
265
|
+
|
|
266
|
+
> `intlayer` paketi kullanarak markdown içeriğinin nasıl tanımlanacağını görmek için [markdown dokümanına](https://github.com/aymericzip/intlayer/tree/main/docs/tr/dictionary/markdown.md) bakınız.
|
|
267
|
+
|
|
268
|
+
```svelte fileName="src/App.svelte"
|
|
269
|
+
<script>
|
|
270
|
+
import { setIntlayerMarkdown } from "svelte-intlayer";
|
|
271
|
+
|
|
272
|
+
setIntlayerMarkdown((markdown) =>
|
|
273
|
+
// markdown içeriğini bir string olarak render et
|
|
274
|
+
return markdown;
|
|
275
|
+
);
|
|
276
|
+
</script>
|
|
277
|
+
|
|
278
|
+
<h1>{$content.markdownContent}</h1>
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
> Markdown front-matter verilerinize `content.markdownContent.metadata.xxx` özelliğini kullanarak da erişebilirsiniz.
|
|
282
|
+
|
|
283
|
+
### (İsteğe bağlı) Adım 8: intlayer editör / CMS kurulumu
|
|
256
284
|
|
|
257
|
-
|
|
285
|
+
intlayer editörünü kurmak için [intlayer editör dokümantasyonunu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) takip etmelisiniz.
|
|
258
286
|
|
|
259
|
-
[
|
|
287
|
+
intlayer CMS'i kurmak için [intlayer CMS dokümantasyonunu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md) takip etmelisiniz.
|
|
260
288
|
|
|
261
|
-
|
|
289
|
+
Paralel olarak, Svelte uygulamanızda, bir layout dosyasına veya uygulamanızın köküne aşağıdaki satırı eklemelisiniz:
|
|
262
290
|
|
|
263
|
-
|
|
291
|
+
```svelte fileName="src/layout.svelte"
|
|
292
|
+
import { useIntlayerEditor } from "svelte-intlayer";
|
|
293
|
+
|
|
294
|
+
useIntlayerEditor();
|
|
295
|
+
```
|
|
264
296
|
|
|
265
|
-
### (İsteğe
|
|
297
|
+
### (İsteğe bağlı) Adım 7: Uygulamanıza yerelleştirilmiş Yönlendirme ekleyin
|
|
266
298
|
|
|
267
|
-
|
|
299
|
+
Svelte uygulamanızda yerelleştirilmiş yönlendirmeyi yönetmek için, `svelte-spa-router` paketini ve Intlayer'ın `localeFlatMap` fonksiyonunu kullanarak her locale için rotalar oluşturabilirsiniz.
|
|
300
|
+
|
|
301
|
+
Öncelikle, `svelte-spa-router` paketini yükleyin:
|
|
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
|
+
```
|
|
268
318
|
|
|
269
|
-
|
|
319
|
+
Sonra, rotalarınızı tanımlamak için bir `Router.svelte` dosyası oluşturun:
|
|
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` dosyanızı, `App` yerine `Router` bileşenini mount edecek şekilde güncelleyin:
|
|
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
|
+
Son olarak, `App.svelte` dosyanızı `locale` prop'unu alacak ve `useIntlayer` ile kullanacak şekilde güncelleyin:
|
|
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
|
+
<!-- ... uygulamanızın geri kalanı ... -->
|
|
379
|
+
</main>
|
|
380
|
+
```
|
|
270
381
|
|
|
271
|
-
|
|
382
|
+
#### Sunucu Tarafı Yönlendirmeyi Yapılandırma (Opsiyonel)
|
|
272
383
|
|
|
273
|
-
|
|
384
|
+
Paralel olarak, uygulamanıza sunucu tarafı yönlendirme eklemek için `intlayerProxy`'yi de kullanabilirsiniz. Bu eklenti, URL'ye göre mevcut locale'i otomatik olarak algılar ve uygun locale çerezini ayarlar. Eğer herhangi bir locale belirtilmemişse, eklenti kullanıcının tarayıcı dil tercihlerini baz alarak en uygun locale'i belirler. Hiçbir locale algılanamazsa, varsayılan locale'e yönlendirme yapar.
|
|
274
385
|
|
|
275
|
-
|
|
386
|
+
> Üretimde `intlayerProxy` kullanmak için, `vite-intlayer` paketini `devDependencies`'den `dependencies`'e geçirmeniz gerektiğini unutmayın.
|
|
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
|
+
plugins: [svelte(), intlayer(), intlayerProxy()],
|
|
394
|
+
});
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
398
|
+
import { defineConfig } from "vite";
|
|
399
|
+
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
400
|
+
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
401
|
+
|
|
402
|
+
// https://vitejs.dev/config/
|
|
403
|
+
export default defineConfig({
|
|
404
|
+
plugins: [svelte(), intlayer(), intlayerProxy()],
|
|
405
|
+
});
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
409
|
+
const { defineConfig } = require("vite");
|
|
410
|
+
const { svelte } = require("@sveltejs/vite-plugin-svelte");
|
|
411
|
+
const { intlayer, intlayerProxy } = require("vite-intlayer");
|
|
412
|
+
|
|
413
|
+
// https://vitejs.dev/config/
|
|
414
|
+
module.exports = defineConfig({
|
|
415
|
+
plugins: [svelte(), intlayer(), intlayerProxy()],
|
|
416
|
+
});
|
|
417
|
+
plugins: [svelte(), intlayer(), intlayerProxy()],
|
|
418
|
+
});
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
### (İsteğe Bağlı) Adım 8: Dil değiştiğinde URL'yi değiştirme
|
|
422
|
+
|
|
423
|
+
Kullanıcıların dilleri değiştirmesine ve URL'yi buna göre güncellemesine izin vermek için bir `LocaleSwitcher` bileşeni oluşturabilirsiniz. Bu bileşen, `intlayer`'dan `getLocalizedUrl` ve `svelte-spa-router`'dan `push` fonksiyonlarını kullanacaktır.
|
|
424
|
+
|
|
425
|
+
```svelte fileName="src/lib/LocaleSwitcher.svelte"
|
|
426
|
+
<script lang="ts">
|
|
427
|
+
import { getLocaleName, getLocalizedUrl } from "intlayer";
|
|
428
|
+
import { useLocale } from "svelte-intlayer";
|
|
429
|
+
import { push } from "svelte-spa-router";
|
|
430
|
+
|
|
431
|
+
export let currentLocale: string | undefined = undefined;
|
|
432
|
+
|
|
433
|
+
// Dil bilgilerini al
|
|
434
|
+
const { locale, availableLocales } = useLocale();
|
|
435
|
+
|
|
436
|
+
// Dil değişikliğini yönet
|
|
437
|
+
const changeLocale = (event: Event) => {
|
|
438
|
+
const target = event.target as HTMLSelectElement;
|
|
439
|
+
const newLocale = target.value;
|
|
440
|
+
const currentUrl = window.location.pathname;
|
|
441
|
+
const url = getLocalizedUrl( currentUrl, newLocale);
|
|
442
|
+
push(url);
|
|
443
|
+
};
|
|
444
|
+
</script>
|
|
445
|
+
|
|
446
|
+
<div class="locale-switcher">
|
|
447
|
+
<select value={currentLocale ?? $locale} onchange={changeLocale}>
|
|
448
|
+
{#each availableLocales ?? [] as loc}
|
|
449
|
+
<option value={loc}>
|
|
450
|
+
{getLocaleName(loc)}
|
|
451
|
+
</option>
|
|
452
|
+
{/each}
|
|
453
|
+
</select>
|
|
454
|
+
</div>
|
|
455
|
+
```
|
|
276
456
|
|
|
277
457
|
### Git Yapılandırması
|
|
278
458
|
|
|
279
|
-
Intlayer tarafından oluşturulan
|
|
459
|
+
Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenizi sağlar.
|
|
280
460
|
|
|
281
|
-
Bunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları
|
|
461
|
+
Bunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları ekleyebilirsiniz:
|
|
282
462
|
|
|
283
463
|
```plaintext
|
|
284
|
-
# Intlayer tarafından oluşturulan dosyaları
|
|
464
|
+
# Intlayer tarafından oluşturulan dosyaları göz ardı et
|
|
285
465
|
.intlayer
|
|
286
466
|
```
|
|
287
467
|
|
|
288
|
-
### VS Code
|
|
468
|
+
### VS Code Eklentisi
|
|
289
469
|
|
|
290
|
-
Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code
|
|
470
|
+
Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyebilirsiniz.
|
|
291
471
|
|
|
292
|
-
[VS Code Marketplace'ten
|
|
472
|
+
[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
293
473
|
|
|
294
|
-
Bu
|
|
474
|
+
Bu eklenti şunları sağlar:
|
|
295
475
|
|
|
296
|
-
-
|
|
297
|
-
-
|
|
298
|
-
-
|
|
299
|
-
-
|
|
476
|
+
- Çeviri anahtarları için **Otomatik tamamlama**.
|
|
477
|
+
- Eksik çeviriler için **Gerçek zamanlı hata tespiti**.
|
|
478
|
+
- Çevrilmiş içeriğin **Satır içi önizlemeleri**.
|
|
479
|
+
- Çevirileri kolayca oluşturup güncellemek için **Hızlı işlemler**.
|
|
300
480
|
|
|
301
|
-
|
|
481
|
+
Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için [Intlayer VS Code Eklentisi dokümantasyonuna](https://intlayer.org/doc/vs-code-extension) bakabilirsiniz.
|
|
302
482
|
|
|
303
483
|
---
|
|
304
484
|
|
|
305
|
-
### Daha
|
|
485
|
+
### Daha İleri Gitmek
|
|
306
486
|
|
|
307
|
-
Daha
|
|
308
|
-
|
|
309
|
-
---
|
|
487
|
+
Daha ileri gitmek için, [görsel editörü](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) uygulayabilir veya içeriğinizi [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md) kullanarak dışa aktarabilirsiniz.
|