\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (İsteğe bağlı) Adım 6: Yönlendirmeyi ayarlama\n\nAşağıdaki adımlar, SvelteKit'te locale tabanlı yönlendirmeyi nasıl ayarlayacağınızı gösterir. Bu, URL'lerinizin locale önekini içermesine olanak tanır (örneğin, `/en/about`, `/fr/about`) ve böylece SEO ve kullanıcı deneyimini iyileştirir.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Locale türünü tanımla\n ├── hooks.server.ts # Locale yönlendirmesini yönet\n ├── lib\n │ └── getLocale.ts # Header ve çerezlerden locale kontrolü yap\n ├── params\n │ └── locale.ts # Locale parametresini tanımla\n └── routes\n ├── [[locale=locale]] # Locale'i ayarlamak için route grubuna sar\n │ ├── +layout.svelte # Yönlendirme için yerel düzen\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Yazı tipleri ve genel stiller için kök düzen\n```\n\n### Adım 7: Sunucu Tarafı Dil Algılama (Hooks) İşlemi\n\nSvelteKit'te, SSR sırasında doğru içeriği render etmek için sunucunun kullanıcının dilini bilmesi gerekir. URL veya çerezlerden dili algılamak için `hooks.server.ts` kullanılır.\n\n`src/hooks.server.ts` dosyasını oluşturun veya düzenleyin:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Mevcut yolun zaten bir locale ile başlayıp başlamadığını kontrol edin (örneğin /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // URL'de locale yoksa (örneğin kullanıcı \"/\" adresini ziyaret ederse), yönlendirme yapın\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Geçici yönlendirme\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nArdından, kullanıcının locale bilgisini istek olayından almak için bir yardımcı oluşturun:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * İstek olayından kullanıcının yerel ayarını alın.\n * Bu fonksiyon `src/hooks.server.ts` dosyasındaki `handle` kancasına kullanılır.\n *\n * Öncelikle Intlayer depolamasından (çerezler veya özel başlıklar) yerel ayarı almaya çalışır.\n * Yerel ayar bulunamazsa, tarayıcının \"Accept-Language\" müzakeresine geri döner.\n *\n * @param event - SvelteKit'ten gelen istek olayı\n * @returns Kullanıcının yerel ayarı\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Intlayer depolamasından yerel ayarı almaya çalış (Çerezler veya başlıklar)\n const storedLocale = getLocaleFromStorage({\n // SvelteKit çerez erişimi\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // SvelteKit başlık erişimi\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Tarayıcı \"Accept-Language\" müzakeresine geri dönüş\n const negotiatorHeaders: Record<string, string> = {};\n\n // SvelteKit Headers nesnesini basit bir Record<string, string> nesnesine dönüştür\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // `Accept-Language` başlığından locale kontrolü yap\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Eşleşme bulunamazsa varsayılan locale döndür\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage`, yapılandırmanıza bağlı olarak yerel ayarı header veya cookie'den kontrol edecektir. Daha fazla detay için [Configuration](https://intlayer.org/doc/configuration) sayfasına bakınız.\n\n> `localeDetector` fonksiyonu `Accept-Language` header'ını işleyip en uygun eşleşmeyi döndürecektir.\n\nEğer yerel ayar yapılandırılmamışsa, 404 hatası döndürmek isteriz. Bunu kolaylaştırmak için, yerel ayarın geçerli olup olmadığını kontrol eden bir `match` fonksiyonu oluşturabiliriz:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Not:** `src/app.d.ts` dosyanızın yerel ayar tanımını içerdiğinden emin olun:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\n`+layout.svelte` dosyası için, i18n ile ilgili olmayan sadece statik içeriği tutmak amacıyla her şeyi kaldırabiliriz:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nSonra, `[[locale=locale]]` grubu altında yeni bir sayfa ve layout oluşturun:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Genel Load tipini kullan\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Yönlendirmeden alınan locale ile Intlayer'ı başlat\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Layout içerik sözlüğünü kullan\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Ana sayfa içerik sözlüğünü kullan\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (İsteğe Bağlı) Adım 8: Uluslararasılaştırılmış Bağlantılar\n\nSEO için, rotalarınızı locale ile öneklemeniz önerilir (örneğin, `/en/about`, `/fr/about`). Bu bileşen, herhangi bir bağlantıyı otomatik olarak mevcut locale ile önekler.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nEğer SvelteKit'ten `goto` kullanıyorsanız, aynı mantığı `getLocalizedUrl` ile kullanarak lokalize edilmiş URL'ye yönlendirme yapabilirsiniz:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider\n```\n\n### (İsteğe Bağlı) Adım 9: Dil Değiştirici\n\nKullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (İsteğe Bağlı) Adım 10: Backend proxy ekleme\n\nSvelteKit uygulamanıza bir backend proxy eklemek için, `vite-intlayer` eklentisi tarafından sağlanan `intlayerProxy` fonksiyonunu kullanabilirsiniz. Bu eklenti, URL, çerezler ve tarayıcı dil tercihleri temelinde kullanıcı için en iyi yereli otomatik olarak algılar.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (İsteğe Bağlı) Adım 11: intlayer editör / CMS kurulumu\n\nintlayer editörünü kurmak için, [intlayer editör dokümantasyonunu](/tr/doc/concept/editor) takip etmelisiniz.\n\nintlayer CMS'i kurmak için, [intlayer CMS dokümantasyonunu](/tr/doc/concept/cms) takip etmelisiniz.\n\nintlayer editör seçicisini görselleştirebilmek için, intlayer içeriğinizde bileşen sözdizimini kullanmanız gerekecektir.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Git Yapılandırması\n\nIntlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.\n\n```plaintext fileName=\".gitignore\"\n# Intlayer tarafından oluşturulan dosyaları göz ardı et\n.intlayer\n```\n\n---\n\n### (İsteğe bağlı) Adım 12 : Bileşenlerinizin içeriğini çıkarın\n\nMevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.\n\nBu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği çıkarmak için bir [derleyici](/tr/doc/compiler) / [çıkarıcı](/tr/doc/concept/cli/extract) sunar.\n\nKurulum için `intlayer.config.ts` dosyanıza bir `compiler` bölümü ekleyebilirsiniz:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Yapılandırmanızın geri kalanı\n compiler: {\n /**\n * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.\n */\n enabled: true,\n\n /**\n * Çıktı dosyalarının yolunu tanımlar\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.\n */\n saveComponents: false,\n\n /**\n * Sözlük anahtarı öneki\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nBileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\n`vite.config.ts` dosyanızı `intlayerCompiler` eklentisini içerecek şekilde güncelleyin:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Derleyici eklentisini ekler\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Veya npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Daha İleri Gitmek İçin\n\n- **Görsel Editör**: Çevirileri doğrudan kullanıcı arayüzünden düzenlemek için [Intlayer Görsel Editör](/tr/doc/concept/editor) ile entegre olun.\n- **CMS**: İçerik yönetiminizi dışa aktararak [Intlayer CMS](/tr/doc/concept/cms) kullanın.\n","about":"SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin.","url":"https://intlayer.org/tr/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Uluslararasılaştırma, Dokümantasyon, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Geliştiriciler, İçerik Yöneticileri"}}

Oluşturma:2025-11-20Son güncelleme:2026-05-06

GitHub'da uygulama şablonunu görüntüle

Bu sayfada kullanılabilir bir uygulama şablonu var.

Vitrin uygulamasını görüntüle

Bu sayfa şablonun canlı demosuna bağlanır.

Bu dokümanı favori AI asistanınıza referans verin

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

Sürüm Geçmişi

"Solid useIntlayer API kullanımını doğrudan özellik erişimine güncelle"
v8.9.004.05.2026
"init komutu ekle"
v7.5.930.12.2025
"Başlangıç geçmişi"
v7.1.1020.11.2025

Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

Orijinal içeriğin İngilizce son sürümünü görüntüleyin

Bu dokümanı düzenle

Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

Dokümantasyon için GitHub bağlantısı

Kopyala

Belge Markdown'ını panoya kopyala

Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

ide.intlayer.org

İçindekiler

Intlayer nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. SvelteKit'in Server-Side Rendering (SSR) yetenekleriyle sorunsuz çalışır.

Intlayer ile şunları yapabilirsiniz:

Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.
SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

bash

Kodu kopyala

Kodu panoya kopyala

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

bash

Kodu kopyala

Kodu panoya kopyala

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Temel i18n paketi.
svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.

Adım 2: Projenizin Yapılandırması

Proje kök dizininizde bir yapılandırma dosyası oluşturun:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

Adım 4: İçeriğinizi Bildirin

src klasörünüzde istediğiniz herhangi bir yerde içerik bildirim dosyalarınızı oluşturun (örneğin, src/lib/content veya bileşenlerinizin yanında). Bu dosyalar, uygulamanız için çevrilebilir içeriği her locale için t() fonksiyonunu kullanarak tanımlar.

Adım 5: Bileşenlerinizde Intlayer'ı Kullanın

Artık useIntlayer fonksiyonunu herhangi bir Svelte bileşeninde kullanabilirsiniz. Bu fonksiyon, locale değiştiğinde otomatik olarak güncellenen reaktif bir store döner. Fonksiyon, mevcut locale'yi otomatik olarak dikkate alır (hem SSR sırasında hem de istemci tarafı gezinmede).

Not: useIntlayer bir Svelte store döner, bu yüzden reaktif değerine erişmek için `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: SvelteKit uygulamanızı nasıl çevirirsiniz – i18n rehberi 2026 description: SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin. keywords:

Uluslararasılaştırma
Dokümantasyon
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Başlangıç geçmişi

Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Intlayer nedir?

Intlayer ile şunları yapabilirsiniz:

Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.
SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

bash

Kodu kopyala

Kodu panoya kopyala

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

bash

Kodu kopyala

Kodu panoya kopyala

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Temel i18n paketi.
svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.

Adım 2: Projenizin Yapılandırması

Proje kök dizininizde bir yapılandırma dosyası oluşturun:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

Adım 4: İçeriğinizi Bildirin

Adım 5: Bileşenlerinizde Intlayer'ı Kullanın

ön ekini kullanmanız gerekir (örneğin, $content.title).

src/lib/components/Component.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section", Adım 4'te tanımlanan key'e karşılık gelir  const content = useIntlayer("hero-section");</script><!-- İçeriği basit içerik olarak render et --><h1>{$content.title}</h1><!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için --><h1>{@const Title = $content.title}<Title /></h1><!-- İçeriği string olarak render etmek için --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(İsteğe bağlı) Adım 6: Yönlendirmeyi ayarlama

Aşağıdaki adımlar, SvelteKit'te locale tabanlı yönlendirmeyi nasıl ayarlayacağınızı gösterir. Bu, URL'lerinizin locale önekini içermesine olanak tanır (örneğin, /en/about, /fr/about) ve böylece SEO ve kullanıcı deneyimini iyileştirir.

bash

Kodu kopyala

Kodu panoya kopyala

.└─── src    ├── app.d.ts                  # Locale türünü tanımla    ├── hooks.server.ts           # Locale yönlendirmesini yönet    ├── lib    │   └── getLocale.ts          # Header ve çerezlerden locale kontrolü yap    ├── params    │   └── locale.ts             # Locale parametresini tanımla    └── routes        ├── [[locale=locale]]     # Locale'i ayarlamak için route grubuna sar        │   ├── +layout.svelte    # Yönlendirme için yerel düzen        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Yazı tipleri ve genel stiller için kök düzen

Adım 7: Sunucu Tarafı Dil Algılama (Hooks) İşlemi

SvelteKit'te, SSR sırasında doğru içeriği render etmek için sunucunun kullanıcının dilini bilmesi gerekir. URL veya çerezlerden dili algılamak için hooks.server.ts kullanılır.

src/hooks.server.ts dosyasını oluşturun veya düzenleyin:

src/hooks.server.ts

Kodu kopyala

Kodu panoya kopyala

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Mevcut yolun zaten bir locale ile başlayıp başlamadığını kontrol edin (örneğin /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // URL'de locale yoksa (örneğin kullanıcı "/" adresini ziyaret ederse), yönlendirme yapın  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Geçici yönlendirme    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Ardından, kullanıcının locale bilgisini istek olayından almak için bir yardımcı oluşturun:

src/lib/getLocale.ts

Kodu kopyala

Kodu panoya kopyala

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * İstek olayından kullanıcının yerel ayarını alın. * Bu fonksiyon `src/hooks.server.ts` dosyasındaki `handle` kancasına kullanılır. * * Öncelikle Intlayer depolamasından (çerezler veya özel başlıklar) yerel ayarı almaya çalışır. * Yerel ayar bulunamazsa, tarayıcının "Accept-Language" müzakeresine geri döner. * * @param event - SvelteKit'ten gelen istek olayı * @returns Kullanıcının yerel ayarı */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer depolamasından yerel ayarı almaya çalış (Çerezler veya başlıklar)  const storedLocale = getLocaleFromStorage({    // SvelteKit çerez erişimi    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit başlık erişimi    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Tarayıcı "Accept-Language" müzakeresine geri dönüş  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers nesnesini basit bir Record<string, string> nesnesine dönüştür  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` başlığından locale kontrolü yap  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Eşleşme bulunamazsa varsayılan locale döndür  return defaultLocale;};

getLocaleFromStorage, yapılandırmanıza bağlı olarak yerel ayarı header veya cookie'den kontrol edecektir. Daha fazla detay için Configuration sayfasına bakınız.

localeDetector fonksiyonu Accept-Language header'ını işleyip en uygun eşleşmeyi döndürecektir.

Eğer yerel ayar yapılandırılmamışsa, 404 hatası döndürmek isteriz. Bunu kolaylaştırmak için, yerel ayarın geçerli olup olmadığını kontrol eden bir match fonksiyonu oluşturabiliriz:

/src/params/locale.ts

Kodu kopyala

Kodu panoya kopyala

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Not: src/app.d.ts dosyanızın yerel ayar tanımını içerdiğinden emin olun:
typescript
Kodu kopyala
Kodu panoya kopyala
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

+layout.svelte dosyası için, i18n ile ilgili olmayan sadece statik içeriği tutmak amacıyla her şeyi kaldırabiliriz:

src/+layout.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Sonra, [[locale=locale]] grubu altında yeni bir sayfa ve layout oluşturun:

src/routes/[[locale=locale]]/+layout.ts

Kodu kopyala

Kodu panoya kopyala

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Genel Load tipini kullanexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Yönlendirmeden alınan locale ile Intlayer'ı başlat  $effect(() => {      setupIntlayer(data.locale);  });    // Layout içerik sözlüğünü kullan    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Kodu kopyala

Kodu panoya kopyala

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Ana sayfa içerik sözlüğünü kullan    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(İsteğe Bağlı) Adım 8: Uluslararasılaştırılmış Bağlantılar

SEO için, rotalarınızı locale ile öneklemeniz önerilir (örneğin, /en/about, /fr/about). Bu bileşen, herhangi bir bağlantıyı otomatik olarak mevcut locale ile önekler.

src/lib/components/LocalizedLink.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // URL'ye mevcut locale'i öneklemek için yardımcı fonksiyon  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Eğer SvelteKit'ten goto kullanıyorsanız, aynı mantığı getLocalizedUrl ile kullanarak lokalize edilmiş URL'ye yönlendirme yapabilirsiniz:

typescript

Kodu kopyala

Kodu panoya kopyala

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider

(İsteğe Bağlı) Adım 9: Dil Değiştirici

Kullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin.

src/lib/components/LanguageSwitcher.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(İsteğe Bağlı) Adım 10: Backend proxy ekleme

SvelteKit uygulamanıza bir backend proxy eklemek için, vite-intlayer eklentisi tarafından sağlanan intlayerProxy fonksiyonunu kullanabilirsiniz. Bu eklenti, URL, çerezler ve tarayıcı dil tercihleri temelinde kullanıcı için en iyi yereli otomatik olarak algılar.

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(İsteğe Bağlı) Adım 11: intlayer editör / CMS kurulumu

intlayer editörünü kurmak için, intlayer editör dokümantasyonunu takip etmelisiniz.

intlayer CMS'i kurmak için, intlayer CMS dokümantasyonunu takip etmelisiniz.

intlayer editör seçicisini görselleştirebilmek için, intlayer içeriğinizde bileşen sözdizimini kullanmanız gerekecektir.

Component.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- İçeriği basit içerik olarak render et -->  <h1>{$content.title}</h1>  <!-- İçeriği bir bileşen olarak render et (editör tarafından gereklidir) -->  {@const Component = $content.component}<Component /></div>

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.

.gitignore

Kodu kopyala

Kodu panoya kopyala

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

(İsteğe bağlı) Adım 12 : Bileşenlerinizin içeriğini çıkarın

Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.

Bu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği çıkarmak için bir derleyici / çıkarıcı sunar.

Kurulum için intlayer.config.ts dosyanıza bir compiler bölümü ekleyebilirsiniz:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Yapılandırmanızın geri kalanı
  compiler: {
    /**
     * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
     */
    enabled: true,

    /**
     * Çıktı dosyalarının yolunu tanımlar
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
     */
    saveComponents: false,

    /**
     * Sözlük anahtarı öneki
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın

bash

Kodu kopyala

Kodu panoya kopyala

npx intlayer extract

vite.config.ts dosyanızı intlayerCompiler eklentisini içerecek şekilde güncelleyin:

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

bash

Kodu kopyala

Kodu panoya kopyala

npm run build # Veya npm run dev

Daha İleri Gitmek İçin

Görsel Editör: Çevirileri doğrudan kullanıcı arayüzünden düzenlemek için Intlayer Görsel Editör ile entegre olun.
CMS: İçerik yönetiminizi dışa aktararak Intlayer CMS kullanın.

Vite ve Svelte

Vite ve Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

Oluşturma:2025-11-20Son güncelleme:2026-05-06

GitHub'da uygulama şablonunu görüntüle

Bu sayfada kullanılabilir bir uygulama şablonu var.

Vitrin uygulamasını görüntüle

Bu sayfa şablonun canlı demosuna bağlanır.

Bu dokümanı favori AI asistanınıza referans verin

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

Sürüm Geçmişi

"Solid useIntlayer API kullanımını doğrudan özellik erişimine güncelle"
v8.9.004.05.2026
"init komutu ekle"
v7.5.930.12.2025
"Başlangıç geçmişi"
v7.1.1020.11.2025

Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

Orijinal içeriğin İngilizce son sürümünü görüntüleyin

Bu dokümanı düzenle

Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

Dokümantasyon için GitHub bağlantısı

Kopyala

Belge Markdown'ını panoya kopyala

Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

ide.intlayer.org

İçindekiler

Intlayer nedir?

Intlayer ile şunları yapabilirsiniz:

Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.
SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

bash

Kodu kopyala

Kodu panoya kopyala

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

bash

Kodu kopyala

Kodu panoya kopyala

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Temel i18n paketi.
svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.

Adım 2: Projenizin Yapılandırması

Proje kök dizininizde bir yapılandırma dosyası oluşturun:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

Adım 4: İçeriğinizi Bildirin

Adım 5: Bileşenlerinizde Intlayer'ı Kullanın

Not: useIntlayer bir Svelte store döner, bu yüzden reaktif değerine erişmek için `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: SvelteKit uygulamanızı nasıl çevirirsiniz – i18n rehberi 2026 description: SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin. keywords:

Uluslararasılaştırma
Dokümantasyon
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Başlangıç geçmişi

Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Intlayer nedir?

Intlayer ile şunları yapabilirsiniz:

Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.
SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

bash

Kodu kopyala

Kodu panoya kopyala

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

bash

Kodu kopyala

Kodu panoya kopyala

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Temel i18n paketi.
svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.

Adım 2: Projenizin Yapılandırması

Proje kök dizininizde bir yapılandırma dosyası oluşturun:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

Adım 4: İçeriğinizi Bildirin

Adım 5: Bileşenlerinizde Intlayer'ı Kullanın

ön ekini kullanmanız gerekir (örneğin, $content.title).

src/lib/components/Component.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section", Adım 4'te tanımlanan key'e karşılık gelir  const content = useIntlayer("hero-section");</script><!-- İçeriği basit içerik olarak render et --><h1>{$content.title}</h1><!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için --><h1>{@const Title = $content.title}<Title /></h1><!-- İçeriği string olarak render etmek için --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section", Adım 4'te tanımlanan key'e karşılık gelir  const content = useIntlayer("hero-section");</script><!-- İçeriği basit içerik olarak render et --><h1>{$content.title}</h1><!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için --><h1>{@const Title = $content.title}<Title /></h1><!-- İçeriği string olarak render etmek için --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(İsteğe bağlı) Adım 6: Yönlendirmeyi ayarlama

bash

Kodu kopyala

Kodu panoya kopyala

.└─── src    ├── app.d.ts                  # Locale türünü tanımla    ├── hooks.server.ts           # Locale yönlendirmesini yönet    ├── lib    │   └── getLocale.ts          # Header ve çerezlerden locale kontrolü yap    ├── params    │   └── locale.ts             # Locale parametresini tanımla    └── routes        ├── [[locale=locale]]     # Locale'i ayarlamak için route grubuna sar        │   ├── +layout.svelte    # Yönlendirme için yerel düzen        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Yazı tipleri ve genel stiller için kök düzen

.└─── src    ├── app.d.ts                  # Locale türünü tanımla    ├── hooks.server.ts           # Locale yönlendirmesini yönet    ├── lib    │   └── getLocale.ts          # Header ve çerezlerden locale kontrolü yap    ├── params    │   └── locale.ts             # Locale parametresini tanımla    └── routes        ├── [[locale=locale]]     # Locale'i ayarlamak için route grubuna sar        │   ├── +layout.svelte    # Yönlendirme için yerel düzen        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Yazı tipleri ve genel stiller için kök düzen

Adım 7: Sunucu Tarafı Dil Algılama (Hooks) İşlemi

SvelteKit'te, SSR sırasında doğru içeriği render etmek için sunucunun kullanıcının dilini bilmesi gerekir. URL veya çerezlerden dili algılamak için hooks.server.ts kullanılır.

src/hooks.server.ts dosyasını oluşturun veya düzenleyin:

src/hooks.server.ts

Kodu kopyala

Kodu panoya kopyala

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Mevcut yolun zaten bir locale ile başlayıp başlamadığını kontrol edin (örneğin /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // URL'de locale yoksa (örneğin kullanıcı "/" adresini ziyaret ederse), yönlendirme yapın  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Geçici yönlendirme    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Mevcut yolun zaten bir locale ile başlayıp başlamadığını kontrol edin (örneğin /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // URL'de locale yoksa (örneğin kullanıcı "/" adresini ziyaret ederse), yönlendirme yapın  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Geçici yönlendirme    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Ardından, kullanıcının locale bilgisini istek olayından almak için bir yardımcı oluşturun:

src/lib/getLocale.ts

Kodu kopyala

Kodu panoya kopyala

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * İstek olayından kullanıcının yerel ayarını alın. * Bu fonksiyon `src/hooks.server.ts` dosyasındaki `handle` kancasına kullanılır. * * Öncelikle Intlayer depolamasından (çerezler veya özel başlıklar) yerel ayarı almaya çalışır. * Yerel ayar bulunamazsa, tarayıcının "Accept-Language" müzakeresine geri döner. * * @param event - SvelteKit'ten gelen istek olayı * @returns Kullanıcının yerel ayarı */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer depolamasından yerel ayarı almaya çalış (Çerezler veya başlıklar)  const storedLocale = getLocaleFromStorage({    // SvelteKit çerez erişimi    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit başlık erişimi    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Tarayıcı "Accept-Language" müzakeresine geri dönüş  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers nesnesini basit bir Record<string, string> nesnesine dönüştür  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` başlığından locale kontrolü yap  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Eşleşme bulunamazsa varsayılan locale döndür  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * İstek olayından kullanıcının yerel ayarını alın. * Bu fonksiyon `src/hooks.server.ts` dosyasındaki `handle` kancasına kullanılır. * * Öncelikle Intlayer depolamasından (çerezler veya özel başlıklar) yerel ayarı almaya çalışır. * Yerel ayar bulunamazsa, tarayıcının "Accept-Language" müzakeresine geri döner. * * @param event - SvelteKit'ten gelen istek olayı * @returns Kullanıcının yerel ayarı */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer depolamasından yerel ayarı almaya çalış (Çerezler veya başlıklar)  const storedLocale = getLocaleFromStorage({    // SvelteKit çerez erişimi    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit başlık erişimi    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Tarayıcı "Accept-Language" müzakeresine geri dönüş  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers nesnesini basit bir Record<string, string> nesnesine dönüştür  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` başlığından locale kontrolü yap  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Eşleşme bulunamazsa varsayılan locale döndür  return defaultLocale;};

getLocaleFromStorage, yapılandırmanıza bağlı olarak yerel ayarı header veya cookie'den kontrol edecektir. Daha fazla detay için Configuration sayfasına bakınız.

localeDetector fonksiyonu Accept-Language header'ını işleyip en uygun eşleşmeyi döndürecektir.

/src/params/locale.ts

Kodu kopyala

Kodu panoya kopyala

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Not: src/app.d.ts dosyanızın yerel ayar tanımını içerdiğinden emin olun:
typescript
Kodu kopyala
Kodu panoya kopyala
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

+layout.svelte dosyası için, i18n ile ilgili olmayan sadece statik içeriği tutmak amacıyla her şeyi kaldırabiliriz:

src/+layout.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Sonra, [[locale=locale]] grubu altında yeni bir sayfa ve layout oluşturun:

src/routes/[[locale=locale]]/+layout.ts

Kodu kopyala

Kodu panoya kopyala

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Genel Load tipini kullanexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Genel Load tipini kullanexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Yönlendirmeden alınan locale ile Intlayer'ı başlat  $effect(() => {      setupIntlayer(data.locale);  });    // Layout içerik sözlüğünü kullan    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Yönlendirmeden alınan locale ile Intlayer'ı başlat  $effect(() => {      setupIntlayer(data.locale);  });    // Layout içerik sözlüğünü kullan    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Kodu kopyala

Kodu panoya kopyala

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Ana sayfa içerik sözlüğünü kullan    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Ana sayfa içerik sözlüğünü kullan    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(İsteğe Bağlı) Adım 8: Uluslararasılaştırılmış Bağlantılar

SEO için, rotalarınızı locale ile öneklemeniz önerilir (örneğin, /en/about, /fr/about). Bu bileşen, herhangi bir bağlantıyı otomatik olarak mevcut locale ile önekler.

src/lib/components/LocalizedLink.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // URL'ye mevcut locale'i öneklemek için yardımcı fonksiyon  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // URL'ye mevcut locale'i öneklemek için yardımcı fonksiyon  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Eğer SvelteKit'ten goto kullanıyorsanız, aynı mantığı getLocalizedUrl ile kullanarak lokalize edilmiş URL'ye yönlendirme yapabilirsiniz:

typescript

Kodu kopyala

Kodu panoya kopyala

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider

(İsteğe Bağlı) Adım 9: Dil Değiştirici

Kullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin.

src/lib/components/LanguageSwitcher.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(İsteğe Bağlı) Adım 10: Backend proxy ekleme

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(İsteğe Bağlı) Adım 11: intlayer editör / CMS kurulumu

intlayer editörünü kurmak için, intlayer editör dokümantasyonunu takip etmelisiniz.

intlayer CMS'i kurmak için, intlayer CMS dokümantasyonunu takip etmelisiniz.

intlayer editör seçicisini görselleştirebilmek için, intlayer içeriğinizde bileşen sözdizimini kullanmanız gerekecektir.

Component.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- İçeriği basit içerik olarak render et -->  <h1>{$content.title}</h1>  <!-- İçeriği bir bileşen olarak render et (editör tarafından gereklidir) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- İçeriği basit içerik olarak render et -->  <h1>{$content.title}</h1>  <!-- İçeriği bir bileşen olarak render et (editör tarafından gereklidir) -->  {@const Component = $content.component}<Component /></div>

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.

.gitignore

Kodu kopyala

Kodu panoya kopyala

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

(İsteğe bağlı) Adım 12 : Bileşenlerinizin içeriğini çıkarın

Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.

Bu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği çıkarmak için bir derleyici / çıkarıcı sunar.

Kurulum için intlayer.config.ts dosyanıza bir compiler bölümü ekleyebilirsiniz:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Yapılandırmanızın geri kalanı
  compiler: {
    /**
     * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
     */
    enabled: true,

    /**
     * Çıktı dosyalarının yolunu tanımlar
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
     */
    saveComponents: false,

    /**
     * Sözlük anahtarı öneki
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın

bash

Kodu kopyala

Kodu panoya kopyala

npx intlayer extract

npx intlayer extract

vite.config.ts dosyanızı intlayerCompiler eklentisini içerecek şekilde güncelleyin:

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

bash

Kodu kopyala

Kodu panoya kopyala

npm run build # Veya npm run dev

npm run build # Veya npm run dev

Daha İleri Gitmek İçin

Görsel Editör: Çevirileri doğrudan kullanıcı arayüzünden düzenlemek için Intlayer Görsel Editör ile entegre olun.
CMS: İçerik yönetiminizi dışa aktararak Intlayer CMS kullanın.

Vite ve Svelte

Vite ve Preact