@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/tr/intlayer_with_astro.md

@@ -1,11 +1,11 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - Astro uygulamasını çevirme 2026
-description: Intlayer kullanarak Astro web sitenize uluslararasılaştırma (i18n) nasıl eklenir öğrenin. Sitenizi çok dilli yapmak için bu kılavuzu takip edin.
+title: Astro i18n Çevirisi - 2026'da Astro uygulaması nasıl çevrilir?
+description: Intlayer kullanarak Astro 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
+  - uluslararasılaştırma
+  - dokümantasyon
   - Intlayer
   - Vite
   - React
@@ -16,18 +16,46 @@ slugs:
   - environment
   - astro
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
   - version: 7.5.9
     date: 2025-12-30
-    changes: "init komutu ekle"
+    changes: "init komutu eklendi"
   - version: 6.2.0
     date: 2025-10-03
-    changes: "Astro entegrasyonu, yapılandırma, kullanım için güncelleme"
+    changes: "Astro entegrasyonu, konfigürasyon ve kullanım güncellemesi"
 ---
 
-# Intlayer ile Astro çevirin | Uluslararasılaştırma (i18n)
+# Astro Sitenizi Intlayer ile Çevirin | Uluslararasılaştırma (i18n)
 
-GitHub'da [Uygulama Şablonuna](https://github.com/aymericzip/intlayer-astro-template) bakın.
+<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?
 
@@ -35,46 +63,48 @@ GitHub'da [Uygulama Şablonuna](https://github.com/aymericzip/intlayer-astro-tem
 
 Intlayer ile şunları yapabilirsiniz:
 
-- **Bileşen seviyesinde bildirisel 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, otomatik tamamlama ve hata tespitini geliştirin.**
-- **Dinamik yerel algılama ve değiştirme gibi gelişmiş özelliklerden faydalanın.**
+- **Ç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'da Intlayer Kurulumuna Adım Adım Rehber
+## Astro'da 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
 
-Gerekli paketleri paket yöneticinizle yükleyin:
+Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:
 
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
-# Opsiyonel: React island desteği ekleyin
+# opsiyonel: React islands desteği eklemek isterseniz
 npm install react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer
-# İsteğe bağlı: React island desteği ekleyin
+# opsiyonel: React islands desteği eklemek isterseniz
 pnpm add react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer
-# İsteğe bağlı: React island desteği ekleyin
+# opsiyonel: React islands desteği eklemek isterseniz
 yarn add react react-dom react-intlayer @astrojs/react
 ```
 
 - **intlayer**
-  Yapılandırma yönetimi, çeviri, [içerik bildirimi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md), transpile etme ve [CLI komutları](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/cli/index.md) için uluslararasılaştırma araçları sağlayan temel paket.
+  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**
-  Astro entegrasyon eklentisini içerir; bu eklenti, Intlayer'ı [Vite paketleyici](https://vite.dev/guide/why.html#why-bundle-for-production) ile entegre etmek için kullanılır ve ayrıca kullanıcının tercih ettiği yerel dili algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için ara yazılım sağlar.
+  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.
 
-### Adım 2: Projenizin Yapılandırması
+### Adım 2: Projenizi Yapılandırın
 
-Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
+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";
@@ -85,7 +115,8 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Diğer yerel dilleriniz
+      Locales.TURKISH,
+      // Diğer dilleriniz
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -94,11 +125,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, ara yazılım yönlendirmesi, çerez isimleri, içerik bildirimlerinizin konumu ve uzantısı, Intlayer günlüklerini konsolda devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için [yapılandırma dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) bakınız.
+> 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 Yapılandırmanıza Entegre Edin
+### Adım 3: Intlayer'ı Astro konfigürasyonunuza entegre edin
 
-Yapılandırmanıza intlayer eklentisini ekleyin.
+Astro konfigürasyonunuza `intlayer` eklentisini ekleyin.
 
 ```typescript fileName="astro.config.ts"
 // @ts-check
@@ -112,11 +143,11 @@ export default defineConfig({
 });
 ```
 
-> `intlayer()` Astro entegrasyon eklentisi, Intlayer'ı Astro ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Astro uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca, performansı optimize etmek için takma adlar sağlar.
+> `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 adlar (aliases) sağlar.
 
-### Adım 4: İçeriğinizi Bildirin
+### Adım 4: İçeriğinizi Deklare Edin
 
-Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
+Çevirileri saklamak için içerik deklarasyonlarınızı oluşturun ve yönetin:
 
 ```tsx fileName="src/app.content.tsx"
 import { t, type Dictionary } from "intlayer";
@@ -129,6 +160,7 @@ const appContent = {
       en: "Hello World",
       fr: "Bonjour le monde",
       es: "Hola mundo",
+      tr: "Merhaba Dünya",
     }),
   },
 } satisfies Dictionary;
@@ -136,16 +168,15 @@ const appContent = {
 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}`).
+> İç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 detay için [içerik bildirim dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakabilirsiniz.
+> 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: İçeriğinizi Astro'da Kullanın
+### Adım 5: Astro'da İçeriği Kullanma
 
-Sözlükleri, `intlayer` tarafından dışa aktarılan temel yardımcıları kullanarak doğrudan `.astro` dosyalarında tüketebilirsiniz.
+Sözlükleri doğrudan `.astro` dosyalarınızda, `intlayer`'dan dışa aktarılan temel yardımcıları kullanarak tüketebilirsiniz.
 
 ```astro fileName="src/pages/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 import appContent from "../app.content";
@@ -153,7 +184,7 @@ import appContent from "../app.content";
 const { title } = getIntlayer('app');
 ---
 
-<html lang="en">
+<html lang="tr">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -165,12 +196,11 @@ const { title } = getIntlayer('app');
 </html>
 ```
 
-### Adım 6: Yerelleştirilmiş yönlendirme
+### Adım 6: Yerelleştirilmiş Yönlendirme
 
-Yerelleştirilmiş sayfalar sunmak için dinamik bir rota segmenti oluşturun, örneğin `src/pages/[locale]/index.astro`:
+Yerelleştirilmiş sayfaları sunmak için dinamik rota segmentleri oluşturun (örneğin `src/pages/[locale]/index.astro`):
 
 ```astro fileName="src/pages/[locale]/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 
@@ -180,11 +210,11 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
-Astro entegrasyonu, geliştirme sırasında yerel farkındalıklı yönlendirme ve ortam tanımlamalarına yardımcı olan bir Vite ara yazılımı ekler. Yine de kendi mantığınızla veya `intlayer`'dan `getLocalizedUrl` gibi yardımcı fonksiyonları kullanarak diller arasında bağlantı kurabilirsiniz.
+Astro entegrasyonu, geliştirme sırasında dile duyarlı yönlendirme ve ortam tanımlamalarına yardımcı olan bir Vite ara yazılımı ekler. Ayrıca diller arasında bağlantı kurmak için kendi mantığınızı veya `intlayer` araçlarını (örneğin `getLocalizedUrl`) kullanabilirsiniz.
 
-### Adım 7: Favori framework'ünüzü kullanmaya devam edin
+### Adım 7: Favori Framework'ünüzü Kullanmaya Devam Edin
 
-Favori framework'ünüzü kullanarak uygulamanızı geliştirmeye devam edin.
+Seçtiğiniz framework'ü kullanarak uygulamanızı oluşturmaya devam edin.
 
 - Intlayer + React: [React ile Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_with_vite+react.md)
 - Intlayer + Vue: [Vue ile Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_with_vite+vue.md)
@@ -194,54 +224,150 @@ Favori framework'ünüzü kullanarak uygulamanızı geliştirmeye devam edin.
 
 ### TypeScript Yapılandırması
 
-Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.
+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.
 
-![alt metin](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt metin](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-TypeScript yapılandırmanızın otomatik oluşturulan türleri içerdiğinden emin olun.
+TypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... Mevcut TypeScript yapılandırmalarınız
+  // ... mevcut TypeScript yapılandırmanız
   "include": [
-    // ... Mevcut TypeScript yapılandırmalarınız
-    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et
+    // ... 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 göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenizi sağlar.
+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ı ekleyebilirsiniz:
+Bunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları ekleyin:
 
 ```bash
-#  Intlayer tarafından oluşturulan dosyaları yoksay
+# Intlayer tarafından oluşturulan dosyaları yoksay
 .intlayer
 ```
 
-### VS Code Eklentisi
+### VS Code Uzantısı
 
-Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyebilirsiniz.
+Intlayer ile geliştirme deneyiminizi iyileştirmek için **resmi Intlayer VS Code uzantısını** yükleyebilirsiniz.
 
-[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS Code Marketplace'ten Kurulum](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-Bu eklenti şunları sağlar:
+Bu uzantı ş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 Önizlemeleri**.
-- Çevirileri kolayca oluşturup güncellemek için **Hızlı İşlemler**.
+- Ç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**.
 
-Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için [Intlayer VS Code Eklentisi dokümantasyonuna](https://intlayer.org/doc/vs-code-extension) bakabilirsiniz.
+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.
 
 ---
 
-### Daha İleri Gitmek
+### (İ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
+```
 
-Daha ileri gitmek için, [görsel editörü](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) uygulayabilir veya içeriğinizi [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md) kullanarak dışa aktarabilirsiniz.
+```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 fazlasını öğ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.