Creation:2025-04-18Last update:2026-05-31

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

    ide.intlayer.org

    İçindekiler

    Neden alternatifler yerine Intlayer?

    "svelte-i18n" veya "i18next" gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

    Intlayer, bileşen düzeyinde içerik kapsamı, reaktif çeviriler ve uluslararasılaştırmayı (i18n) ölçeklendirmek için gereken tüm özellikleri sunarak Svelte ile mükemmel çalışacak şekilde optimize edilmiştir.

    Sayfalarınıza çok büyük JSON dosyaları yüklemek yerine yalnızca gerekli içeriği yükleyin. Intlayer bundle ve sayfa boyutlarınızı %50'ye kadar azaltmanıza yardımcı olur.

    Uygulamanızın içeriğinin kapsamını belirlemek, büyük ölçekli uygulamalar için bakımı kolaylaştırır. İçerik kod tabanınızın tamamını gözden geçirmenin zihinsel yükü olmadan, tek bir özellik klasörünü çoğaltabilir veya silebilirsiniz. Ayrıca Intlayer, içeriğinizin doğruluğunu sağlamak için tamamen tiplendirilmiş (fully typed)tır.

    İçeriğin bir arada konumlandırılması Büyük Dil Modellerinin (LLM'ler) ihtiyaç duyduğu bağlamı azaltır. Intlayer ayrıca eksik çevirileri test etmek için CLI gibi bir araç paketiyle birlikte gelirLSP, MCP ve aracı becerileri, geliştirici deneyimini (DX) yapay zeka için daha da sorunsuz hale getirmek için ajanlar.

    Maliyeti AI sağlayıcınıza ait olmak üzere seçtiğiniz LLM'yi kullanarak CI/CD işlem hattınızda çeviri yapmak için otomasyonu kullanın. Intlayer ayrıca içerik çıkarmayı otomatikleştirmek için bir derleyici ve arka planda çeviri yapmaya yardımcı olacak bir web platformu sunar.

    Büyük JSON dosyalarını bileşenlere bağlamak performans ve tepkime sorunlarına yol açabilir. Intlayer, içerik yüklemenizi derleme sırasında optimize eder.

    Bir i18n çözümünden çok daha fazlası olan Intlayer, kendi kendine barındırılan bir görsel düzenleyici ve tam CMS çok dilli içeriğinizi gerçek zamanlı olarak yönetmenize yardımcı olarak çevirmenler, metin yazarları ve diğer ekip üyeleriyle işbirliğini kusursuz hale getirir. İçerik yerel olarak ve/veya uzaktan depolanabilir.

    Vite ve Svelte Uygulamasında Intlayer Kurulum Adım Adım Rehberi

    ide.intlayer.org

    GitHub'da Uygulama Şablonuna bakın.

    1. Bağımlılıkları Yükleyin

      Gerekli paketleri npm kullanarak yükleyin:

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

      • intlayer

        Konfigürasyon yönetimi, çeviri, içerik bildirimi, transpile etme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

      • svelte-intlayer Intlayer'ı Svelte uygulamasıyla entegre eden paket. Svelte uluslararasılaştırması için context sağlayıcıları ve hook'lar sunar.

      • vite-intlayer
        Intlayer'ı Vite bundler 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.

    2. Projenizin Konfigürasyonu

      Uygulamanızın dillerini yapılandırmak için bir konfigürasyon dosyası oluşturun:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Diğer dilleriniz    ],    defaultLocale: Locales.ENGLISH,  },};export default config;
      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 bakınız.

    3. Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

      Konfigürasyonunuza intlayer eklentisini ekleyin.

      vite.config.ts
      import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [svelte(), intlayer()],});
      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.

    4. İçeriğinizi Beyan Edin

      Çevirileri depolamak için içerik beyanlarınızı oluşturun ve yönetin:

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello World",
      fr: "Bonjour le monde",
      es: "Hola mundo",
    }),
  },
} satisfies Dictionary;

export default appContent;
      İç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,cjs,md,mdx,yaml,yml}).
      Daha fazla detay için, içerik bildirim dokümantasyonuna bakabilirsiniz.

    5. Kodunuzda Intlayer'ı Kullanın

      src/App.svelte
      <script>  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("app");</script><div><!-- İç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>> Eğer uygulamanız zaten mevcutsa, binlerce bileşeni bir saniye içinde dönüştürmek için [Intlayer Compiler](/tr/doc/compiler)'ı [extract komutu](/tr/doc/concept/cli/extract) ile birlikte kullanabilirsiniz.

    6. İçeriğinizin dilini değiştirin

      İsteğe bağlı
      src/App.svelte
      <script lang="ts">import  { getLocaleName } from 'intlayer';import { useLocale } from "svelte-intlayer";// Dil bilgisi ve setLocale fonksiyonunu alconst { locale, availableLocales, setLocale } = useLocale();// Dil değişikliğini yönetconst changeLocale = (event: Event) => {  const target = event.target as HTMLSelectElement;  const newLocale = target.value;  setLocale(newLocale);};</script><div>  <select value={$locale} on:change={changeLocale}>    {#each availableLocales ?? [] as loc}      <option value={loc}>        {getLocaleName(loc)}      </option>    {/each}  </select></div>

    7. Markdown Render Etme

      İsteğe bağlı

      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.

      intlayer paketi kullanarak markdown içeriğinin nasıl tanımlanacağını görmek için markdown dokümanına bakınız.
      src/App.svelte
      <script>  import { setIntlayerMarkdown } from "svelte-intlayer";  setIntlayerMarkdown((markdown) =>   // markdown içeriğini bir string olarak render et   return markdown;  );</script><h1>{$content.markdownContent}</h1>
      Markdown front-matter verilerinize content.markdownContent.metadata.xxx özelliğini kullanarak da erişebilirsiniz.

    8. intlayer editör / CMS kurulumu

      İsteğe bağlı

      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.

    9. Uygulamanıza yerelleştirilmiş Yönlendirme ekleyin

      İsteğe bağlı

      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.

      Öncelikle, svelte-spa-router paketini yükleyin:

      bash
      npm install svelte-spa-routernpx intlayer init

      Sonra, rotalarınızı tanımlamak için bir Router.svelte dosyası oluşturun:

      src/Router.svelte
      <script lang="ts">import { localeFlatMap } from "intlayer";import Router from "svelte-spa-router";import { wrap } from "svelte-spa-router/wrap";import App from "./App.svelte";const routes = Object.fromEntries(    localeFlatMap(({locale, urlPrefix}) => [    [        urlPrefix || '/',        wrap({            component: App as any,            props: {                locale,            },        }),    ],    ]));</script><Router {routes} />

      main.ts dosyanızı, App yerine Router bileşenini mount edecek şekilde güncelleyin:

      src/main.ts
      import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, {  target: document.getElementById("app")!,});export default app;

      Son olarak, App.svelte dosyanızı locale prop'unu alacak ve useIntlayer ile kullanacak şekilde güncelleyin:

      src/App.svelte
      <script lang="ts">import type { Locale } from 'intlayer';import { useIntlayer } from "svelte-intlayer";import Counter from './lib/Counter.svelte';import LocaleSwitcher from './lib/LocaleSwitcher.svelte';export let locale: Locale;$: content = useIntlayer('app', locale);</script><main>  <div class="locale-switcher-container">    <LocaleSwitcher currentLocale={locale} />  </div>  <!-- ... uygulamanızın geri kalanı ... --></main>

      Sunucu Tarafı Yönlendirmeyi Yapılandırma (Opsiyonel)

      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.

      Üretimde intlayerProxy kullanmak için, vite-intlayer paketini devDependencies'den dependencies'e geçirmeniz gerektiğini unutmayın.
      vite.config.ts
      import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer, intlayerProxy } from "vite-intlayer";

  plugins: [intlayerProxy(), // should be placed first
 svelte(), intlayer()],
});

    10. Dil değiştiğinde URL'yi değiştirme

      İsteğe bağlı

      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.

      src/lib/LocaleSwitcher.svelte
      <script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// Dil bilgilerini alconst { locale, availableLocales } = useLocale();// Dil değişikliğini yönetconst changeLocale = (event: Event) => {  const target = event.target as HTMLSelectElement;  const newLocale = target.value;  const currentUrl = window.location.pathname;  const url = getLocalizedUrl( currentUrl, newLocale);  push(url);};</script><div class="locale-switcher">  <select value={currentLocale ?? $locale} onchange={changeLocale}>    {#each availableLocales ?? [] as loc}      <option value={loc}>        {getLocaleName(loc)}      </option>    {/each}  </select></div>

    11. Bileşenlerinizin içeriğini çıkarın

      İsteğe bağlı

      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
      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
      npx intlayer extract

    Git Yapılandırması

    Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenizi sağlar.

    Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

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

    VS Code Eklentisi

    Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyebilirsiniz.

    VS Code Marketplace'ten Yükleyin

    Bu eklenti şunları sağlar:

    • Çeviri anahtarları için Otomatik tamamlama.
    • Eksik çeviriler için Gerçek zamanlı hata tespiti.
    • Çevrilmiş içeriğin Satır içi önizlemeleri.
    • Çevirileri kolayca oluşturup güncellemek için Hızlı işlemler.

    Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Eklentisi dokümantasyonuna bakabilirsiniz.

    (İsteğe bağlı) Sitemap ve robots.txt (build zamanı üretimi)

    Intlayer, generateSitemap ve getMultilingualUrls ile tarayıcılar için çok dilli sitemap.xml ve robots.txt üretip bunları public/ klasörüne otomatik yazmanıza yardımcı olur. Genelde Vite’tan önce küçük bir Node betiği çalıştırılır (ör. npm predev / prebuild kancaları).

    Sitemap

    Intlayer sitemap oluşturucusu yerel ayarlarınıza uyar ve tarayıcılar için metadata ekler.

    Üretilen sitemap xhtml:link (hreflang) ad alanını destekler. Düz URL listesi yerine, her sayfanın tüm dil sürümleri çift yönlü bağlanır (ör. /about, /fr/about veya /about?lang=fr - yönlendirme moduna bağlı).

    Robots.txt

    getMultilingualUrls kullanarak Disallow kurallarının hassas yolların tüm yerelleştirilmiş varyantlarını kapsamasını sağlayın.

    1. Proje köküne generate-seo.mjs ekleyin

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    Betik intlayer içe aktarabilmeli; paket kurulu olmalı. Üretimde ortam değişkeni SITE_URL ayarlayın (ör. CI).

    Node ESM için generate-seo.mjs tercih edin. generate-seo.js kullanıyorsanız package.json içinde "type": "module" veya ESM’yi başka şekilde etkinleştirin.

    2. Betiği Vite’tan önce çalıştırın

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    pnpm veya yarn kullanıyorsanız komutları uyarlayın. CI’dan da çağrılabilir.

    Daha İleri Gitmek

    Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.

    Vite ve Solid
    SvelteKit