\n```\n\n> **Yönlendirme Kurulumu Hakkında Not:**\n> Kullandığınız dizin yapısı, `intlayer.config.ts` dosyasındaki `middleware.routing` ayarına bağlıdır:\n>\n> - **`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.\n> - **`prefix-all`:** Tüm URL'ler bir dil öneki alır. Kök dizini ayrı işlemek gerekmiyorsa standart `[locale]` kullanabilirsiniz.\n> - **`search-param` veya `no-prefix`:** Dil dizinlerine gerek yoktur. Dil, sorgu parametreleri veya çerezler aracılığıyla yönetilir.\n\n### Adım 6: Bir Lit Özel Öğesi (Custom Element) Oluşturun\n\nBir 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.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Sunucu tarafından algılanan dille başlatın\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> `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.\n\n> `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.\n\n### Adım 7: Bir Dil Seçici Ekleme\n\nDil 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:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// LitElement sınıfı içinde, Adım 6'daki useLocale kurulumundan sonra:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Dil değişikliğinde yerelleştirilmiş URL'ye yönlendir\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Lit Reaktivitesi Hakkında Not:**\n> `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.\n\n> **Kalıcılık Hakkında Not:**\n> `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.\n\n### Adım 8: Sitemap ve Robots.txt\n\nIntlayer, yerelleştirilmiş site haritanızı ve robots.txt dosyalarınızı dinamik olarak oluşturmak için yardımcı programlar sunar.\n\n#### Sitemap\n\nIntlayer 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.\n\n> 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.\n\nTüm yerelleştirilmiş rotalarınızı içeren bir site haritası oluşturmak için `src/pages/sitemap.xml.ts` dosyasını oluşturun.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nArama motoru taramasını kontrol etmek için `src/pages/robots.txt.ts` dosyasını oluşturun.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### TypeScript Yapılandırması\n\nIntlayer, 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.\n\n\n\n\n\nTypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Lit'te decorator desteği için gereklidir\n },\n \"include\": [\n // ... mevcut TypeScript yapılandırmanız\n \".intlayer/**/*.ts\", // Otomatik oluşturulan türleri dahil edin\n ],\n}\n```\n\n### Git Yapılandırması\n\nIntlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, onları Git deponuza göndermenizi engeller.\n\nBunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları ekleyin:\n\n```bash\n# Intlayer tarafından oluşturulan dosyaları yoksay\n.intlayer\n```\n\n> İçeriğinizi `alt`, `title`, `href`, `aria-label` vb. gibi bir `dize` (string) özniteliğinde kullanmak istiyorsanız, işlevin değerini şu şekilde kullanabilirsiniz:\n\n> ```html\n> \n> \n> \n> ```\n\n### VS Code Uzantısı\n\nIntlayer ile geliştirme deneyiminizi iyileştirmek için **resmi Intlayer VS Code uzantısını** yükleyebilirsiniz.\n\n[VS Code Marketplace'ten Kurulum](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nBu uzantı şunları sağlar:\n\n- Çeviri anahtarları için **otomatik tamamlama**.\n- Eksik çeviriler için **gerçek zamanlı hata algılama**.\n- Çevrilmiş içeriğin **satır içi önizlemesi**.\n- Kolayca çeviri oluşturmak ve güncellemek için **hızlı eylemler**.\n\nUzantı kullanımı hakkında daha fazla bilgi için [VS Code Uzantısı dokümantasyonuna](https://intlayer.org/doc/vs-code-extension) bakın.\n\n---\n\n### (İsteğe bağlı) Adım 17 : 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---\n\n### Bilginizi Derinleştirin\n\nDaha fazlerini öğrenmek isterseniz, içeriğinizi dış kaynaklara aktarmak için [Görsel Editör](/tr/doc/concept/editor)'ü uygulayabilir veya [CMS](/tr/doc/concept/cms) kullanabilirsiniz.\n","about":"Intlayer kullanarak Astro + Lit sitenize uluslararasılaştırma (i18n) eklemeyi öğrenin. Sitenizi çok dilli hale getirmek için bu kılavuzu izleyin.","url":"https://intlayer.org/tr/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"uluslararasılaştırma, dokümantasyon, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Geliştiriciler, İçerik Yöneticileri"}}

Oluşturma:2026-04-24Son güncelleme:2026-05-06