@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/tr/intlayer_with_astro_lit.md

@@ -0,0 +1,615 @@
+---
+createdAt: 2026-04-24
+updatedAt: 2026-04-24
+title: Astro + Lit i18n - 2026'da Astro + Lit uygulaması nasıl çevrilir?
+description: Intlayer kullanarak Astro + Lit sitenize uluslararasılaştırma (i18n) eklemeyi öğrenin. Sitenizi çok dilli hale getirmek için bu kılavuzu izleyin.
+keywords:
+  - uluslararasılaştırma
+  - dokümantasyon
+  - Intlayer
+  - Astro
+  - Lit
+  - Web Components
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - astro
+  - lit
+applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
+history:
+  - version: 8.7.7
+    date: 2026-04-24
+    changes: "Astro + Lit için ilk dokümantasyon"
+---
+
+# Astro + Lit Sitenizi Intlayer ile Çevirin | Uluslararasılaştırma (i18n)
+
+<Tabs defaultTab="code">
+  <Tab label="Kod" value="code">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Uygulamanızı Intlayer ile nasıl uluslararasılaştırırsınız"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-astro-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo — intlayer-astro-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+## İçindekiler
+
+<TOC/>
+
+## 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.
+
+Intlayer ile şunları yapabilirsiniz:
+
+- **Çevirileri kolayca yönetin**: Bileşen düzeyinde deklaratif sözlükler kullanarak.
+- **Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin**.
+- **TypeScript desteği sağlayın**: Daha iyi otomatik tamamlama ve hata algılama için otomatik olarak oluşturulan türlerle.
+- **Gelişmiş özelliklerden yararlanın**: Dinamik dil algılama ve değiştirme gibi.
+
+---
+
+## Astro + Lit'de Intlayer'ı Yapılandırmak İçin Adım Adım Kılavuz
+
+GitHub'daki [uygulama şablonuna](https://github.com/aymericzip/intlayer-astro-template) göz atın.
+
+### Adım 1: Bağımlılıkları Yükleyin
+
+Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+
+bun x intlayer init
+```
+
+- **intlayer**
+  Konfigürasyon yönetimi, çeviriler, [içerik deklarasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md), transpilasyon ve [CLI komutları](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/cli/index.md) için i18n araçları sağlayan temel paket.
+
+- **astro-intlayer**
+  Intlayer'ı [Vite paketleyici](https://vite.dev/guide/why.html#why-bundle-for-production) ile bağlamak için Astro entegrasyon eklentisi; ayrıca kullanıcının tercih ettiği dili algılamak, çerezleri yönetmek ve URL yönlendirmelerini işlemek için ara yazılım (middleware) içerir.
+
+- **lit**
+  Hızlı ve hafif Web Bileşenleri (Web Components) oluşturmak için temel Lit paketi.
+
+- **lit-intlayer**
+  Intlayer'ı Lit uygulamalarına entegre etmek için paket. Dil değiştiğinde LitElement'e otomatik olarak yeniden oluşturma (re-render) talimatı veren `ReactiveController` tabanlı hook'lar (`useIntlayer`, `useLocale`, vb.) sağlar.
+
+- **@astrojs/lit**
+  Astro sayfaları içinde Lit özel öğelerinin (custom elements) kullanımına olanak tanıyan resmi Astro entegrasyonu.
+
+### Adım 2: Projenizi Yapılandırın
+
+Uygulamanızın dillerini tanımlamak için bir konfigürasyon dosyası oluşturun:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.TURKISH,
+      // Diğer dilleriniz
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+> Bu konfigürasyon dosyası aracılığıyla yerelleştirilmiş URL'leri, ara yazılım yönlendirmelerini, çerez adlarını, içerik deklarasyonlarının konumunu ve uzantılarını yapılandırabilir, konsoldaki Intlayer günlüklerini devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Kullanılabilir parametrelerin tam listesi için [konfigürasyon dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) bakın.
+
+### Adım 3: Intlayer'ı Astro konfigürasyonunuza entegre edin
+
+Astro konfigürasyonunuza `intlayer` eklentisini ve Lit entegrasyonunu ekleyin.
+
+```typescript fileName="astro.config.ts"
+// @ts-check
+
+import { intlayer } from "astro-intlayer";
+import lit from "@astrojs/lit";
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [intlayer(), lit()],
+});
+```
+
+> `intlayer()` entegrasyon eklentisi, Intlayer'ı Astro ile entegre etmek için kullanılır. İçerik deklarasyon dosyalarının oluşturulmasını sağlar ve bunları geliştirme modunda izler. Astro uygulaması içinde Intlayer ortam değişkenlerini tanımlar ve performansı optimize etmek için takma adalar (aliases) sağlar.
+
+> `lit()` entegrasyonu, Astro sayfaları içinde Lit özel öğelerinin kullanımına olanak tanır.
+
+### Adım 4: İçeriğinizi Deklare Edin
+
+Çevirileri saklamak için içerik deklarasyonlarınızı oluşturun ve yönetin:
+
+```typescript fileName="src/components/lit/app.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const litDemoContent = {
+  key: "lit-demo",
+  content: {
+    greeting: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola mundo",
+      tr: "Merhaba Dünya",
+    }),
+    description: t({
+      en: "Welcome to my multilingual Astro + Lit site.",
+      fr: "Bienvenue sur mon site Astro + Lit multilingue.",
+      es: "Bienvenido a mi sitio Astro + Lit multilingüe.",
+      tr: "Çok dilli Astro + Lit siteme hoş geldiniz.",
+    }),
+  },
+} satisfies Dictionary;
+
+export default litDemoContent;
+```
+
+> İçerik deklarasyonları, `contentDir` (varsayılan olarak `./src`) içinde yer aldıkları ve içerik deklarasyon dosyası uzantısıyla (varsayılan olarak `.content.{json,ts,tsx,js,jsx,mjs,cjs}`) eşleştikleri sürece uygulamanızın herhangi bir yerinde tanımlanabilir.
+
+> Daha fazla bilgi için [içerik deklarasyon dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakın.
+
+### Adım 5: Astro'da İçerik Kullanma
+
+Sözlükleri doğrudan `.astro` dosyalarınızda, `intlayer`'dan dışa aktarılan temel yardımcıları kullanarak tüketebilirsiniz. Ayrıca her sayfaya SEO meta verileri (hreflang ve kurallı bağlantılar gibi) eklemelisiniz. Lit özel öğeleri, bir istemci `<script>`'i aracılığıyla içe aktarılır ve gövdeye (body) yerleştirilir.
+
+```astro fileName="src/pages/[...locale]/index.astro"
+---
+import {
+  getIntlayer,
+  getLocaleFromPath,
+  getLocalizedUrl,
+  getPrefix,
+  localeMap,
+  defaultLocale,
+  type LocalesValues,
+} from "intlayer";
+
+export const getStaticPaths = () => {
+  return localeMap(({ locale }) => ({
+    params: { locale: getPrefix(locale).localePrefix },
+  }));
+};
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const { greeting } = getIntlayer("lit-demo", locale);
+---
+
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{greeting}</title>
+
+    <!-- Kurallı (Canonical) Bağlantı -->
+    <link
+      rel="canonical"
+      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
+    />
+
+    <!-- Hreflang Bağlantıları -->
+    {
+      localeMap(({ locale: mapLocale }) => (
+        <link
+          rel="alternate"
+          hreflang={mapLocale}
+          href={new URL(
+            getLocalizedUrl(Astro.url.pathname, mapLocale),
+            Astro.site
+          )}
+        />
+      ))
+    }
+
+    <link
+      rel="alternate"
+      hreflang="x-default"
+      href={new URL(
+        getLocalizedUrl(Astro.url.pathname, defaultLocale),
+        Astro.site
+      )}
+    />
+  </head>
+  <body>
+    <!-- Lit özel öğesi — sunucu tarafından algılanan dili bir özellik (property) olarak alır -->
+    <lit-demo locale={locale}></lit-demo>
+  </body>
+</html>
+
+<script>
+  import "../../components/lit/LitDemo";
+</script>
+```
+
+> **Yönlendirme Kurulumu Hakkında Not:**
+> Kullandığınız dizin yapısı, `intlayer.config.ts` dosyasındaki `middleware.routing` ayarına bağlıdır:
+>
+> - **`prefix-no-default` (varsayılan):** Varsayılan dili kök dizinde tutar (önek yok) ve diğerlerine önek ekler. Tüm durumları yakalamak için `[...locale]` kullanın.
+> - **`prefix-all`:** Tüm URL'ler bir dil öneki alır. Kök dizini ayrı işlemek gerekmiyorsa standart `[locale]` kullanabilirsiniz.
+> - **`search-param` veya `no-prefix`:** Dil dizinlerine gerek yoktur. Dil, sorgu parametreleri veya çerezler aracılığıyla yönetilir.
+
+### Adım 6: Bir Lit Özel Öğesi (Custom Element) Oluşturun
+
+Bir Lit özel öğesi oluşturun. İstemci tarafı çeviri singleton'ını başlatmak için sunucu tabanlı `locale` özelliğini (attribute) kullanarak `connectedCallback` içinde `installIntlayer`'ı çağırın.
+
+```typescript fileName="src/components/lit/LitDemo.ts"
+import { LitElement, html } from "lit";
+import { installIntlayer, useIntlayer, useLocale } from "lit-intlayer";
+import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
+
+class LitDemo extends LitElement {
+  static properties = {
+    locale: { type: String },
+  };
+
+  locale: LocalesValues = "en" as LocalesValues;
+
+  private _content = useIntlayer(this, "lit-demo");
+  private _localeCtrl = useLocale(this, {
+    onLocaleChange: (newLocale: LocalesValues) => {
+      window.location.href = getLocalizedUrl(
+        window.location.pathname,
+        newLocale
+      );
+    },
+  });
+
+  override connectedCallback() {
+    super.connectedCallback();
+    // Sunucu tarafından algılanan dille başlatın
+    installIntlayer({ locale: this.locale as any });
+  }
+
+  override render() {
+    const { greeting, description } = this._content;
+    const {
+      locale: currentLocale,
+      availableLocales,
+      setLocale,
+    } = this._localeCtrl;
+
+    return html`
+      <div>
+        <h1>${greeting}</h1>
+        <p>${description}</p>
+        <!-- LitElement içinde oluşturulan dil seçici -->
+        <div class="locale-switcher">
+          <span class="switcher-label">Dili değiştir:</span>
+          <div class="locale-buttons">
+            ${availableLocales.map(
+              (localeItem) => html`
+                <button
+                  class="locale-btn ${localeItem === currentLocale
+                    ? "active"
+                    : ""}"
+                  ?disabled=${localeItem === currentLocale}
+                  @click=${() => setLocale(localeItem)}
+                >
+                  <span class="ls-own-name">${getLocaleName(localeItem)}</span>
+                  <span class="ls-current-name"
+                    >${getLocaleName(localeItem, currentLocale)}</span
+                  >
+                  <span class="ls-code">${localeItem.toUpperCase()}</span>
+                </button>
+              `
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("lit-demo", LitDemo);
+```
+
+> `locale` özelliği, Astro sayfasından (sunucu algılaması) aktarılır ve `connectedCallback` içinde `installIntlayer`'ı başlatmak için kullanılır. Bu, öğe içindeki tüm `ReactiveController` hook'ları için başlangıç dilini ayarlar.
+
+> `useIntlayer`, bir `ReactiveController` olarak kaydedilir. Dil değiştiğinde öğenin otomatik olarak yeniden oluşturulmasını (re-render) talimatını verir, bu nedenle ek abonelik (subscription) mantığı gerekmez.
+
+### Adım 7: Bir Dil Seçici Ekleme
+
+Dil değiştirme işlevselliği doğrudan Lit özel öğesinin `render()` yöntemine entegre edilmiştir (yukarıdaki Adım 6'ya bakın). `lit-intlayer`'dan `useLocale` kullanır ve kullanıcı yeni bir dil seçtiğinde yerelleştirilmiş URL'ye yönlendirir:
+
+```typescript fileName="src/components/lit/LitDemo.ts"
+// LitElement sınıfı içinde, Adım 6'daki useLocale kurulumundan sonra:
+
+private _localeCtrl = useLocale(this, {
+  onLocaleChange: (newLocale: LocalesValues) => {
+    // Dil değişikliğinde yerelleştirilmiş URL'ye yönlendir
+    window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
+  },
+});
+
+override render() {
+  const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;
+
+  return html`
+    <div class="locale-switcher">
+      <span class="switcher-label">Dili değiştir:</span>
+      <div class="locale-buttons">
+        ${availableLocales.map(
+          (localeItem) => html`
+            <button
+              class="locale-btn ${localeItem === currentLocale ? "active" : ""}"
+              ?disabled=${localeItem === currentLocale}
+              @click=${() => setLocale(localeItem)}
+            >
+              <span class="ls-own-name">${getLocaleName(localeItem)}</span>
+              <span class="ls-current-name">${getLocaleName(localeItem, currentLocale)}</span>
+              <span class="ls-code">${localeItem.toUpperCase()}</span>
+            </button>
+          `
+        )}
+      </div>
+    </div>
+  `;
+}
+```
+
+> **Lit Reaktivitesi Hakkında Not:**
+> `useLocale` bir `ReactiveController` döndürür. `setLocale` çağrıldığında, kontrolör otomatik olarak yeniden oluşturma talep eder ve manuel DOM manipülasyonu gerekmeden etkin buton durumunu günceller.
+
+> **Kalıcılık Hakkında Not:**
+> `window.location.href` aracılığıyla yönlendirmek için `onLocaleChange` kullanmak, yeni dil URL'sinin ziyaret edilmesini sağlar. Bu da Intlayer ara yazılımının dil çerezini ayarlamasına ve gelecekteki ziyaretlerde kullanıcının tercihini hatırlamasına olanak tanır.
+
+### Adım 8: Sitemap ve Robots.txt
+
+Intlayer, yerelleştirilmiş site haritanızı ve robots.txt dosyalarınızı dinamik olarak oluşturmak için yardımcı programlar sunar.
+
+#### Sitemap
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+Tüm yerelleştirilmiş rotalarınızı içeren bir site haritası oluşturmak için `src/pages/sitemap.xml.ts` dosyasını oluşturun.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Arama motoru taramasını kontrol etmek için `src/pages/robots.txt.ts` dosyasını oluşturun.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+### TypeScript Yapılandırması
+
+Intlayer, kod tabanınızı daha sağlam hale getirmek için TypeScript'ten yararlanmak amacıyla modül artırımı (module augmentation) kullanır. Decorator sözdizimini kullanıyorsanız, derleyici seçeneklerinizde `experimentalDecorators`'ı etkinleştirdiğinizden emin olun.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.
+
+```json5 fileName="tsconfig.json"
+{
+  compilerOptions: {
+    // ...
+    experimentalDecorators: true,
+    useDefineForClassFields: false, // Lit'te decorator desteği için gereklidir
+  },
+  "include": [
+    // ... mevcut TypeScript yapılandırmanız
+    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil edin
+  ],
+}
+```
+
+### Git Yapılandırması
+
+Intlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, onları Git deponuza göndermenizi engeller.
+
+Bunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları ekleyin:
+
+```bash
+# Intlayer tarafından oluşturulan dosyaları yoksay
+.intlayer
+```
+
+### VS Code Uzantısı
+
+Intlayer ile geliştirme deneyiminizi iyileştirmek için **resmi Intlayer VS Code uzantısını** yükleyebilirsiniz.
+
+[VS Code Marketplace'ten Kurulum](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Bu uzantı şunları sağlar:
+
+- Çeviri anahtarları için **otomatik tamamlama**.
+- Eksik çeviriler için **gerçek zamanlı hata algılama**.
+- Çevrilmiş içeriğin **satır içi önizlemesi**.
+- Kolayca çeviri oluşturmak ve güncellemek için **hızlı eylemler**.
+
+Uzantı kullanımı hakkında daha fazla bilgi için [VS Code Uzantısı dokümantasyonuna](https://intlayer.org/doc/vs-code-extension) bakın.
+
+---
+
+### (İsteğe bağlı) Adım 17 : 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](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/compiler.md) / [çıkarıcı](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/cli/extract.md) sunar.
+
+Kurulum için `intlayer.config.ts` dosyanıza bir `compiler` bölümü ekleyebilirsiniz:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+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;
+```
+
+<Tabs>
+ <Tab value='Çıkarma komutu'>
+
+Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel derleyicisi'>
+
+`vite.config.ts` dosyanızı `intlayerCompiler` eklentisini içerecek şekilde güncelleyin:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Derleyici eklentisini ekler
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Veya npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+
+---
+
+### Bilginizi Derinleştirin
+
+Daha fazlerini öğrenmek isterseniz, içeriğinizi dış kaynaklara aktarmak için [Görsel Editör](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md)'ü uygulayabilir veya [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md) kullanabilirsiniz.