Astro Sitenizi Intlayer ile Çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Neden alternatifler yerine Intlayer?

'astro-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:

Astro'da Intlayer'ı Yapılandırmak İçin Adım Adım Kılavuz

GitHub'daki uygulama şablonuna göz atın.

1. 1

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

   Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer astro-intlayer# opsiyonel: React islands desteği eklemek isterseniznpm install react react-dom react-intlayer @astrojs/react

   • intlayer Konfigürasyon yönetimi, çeviriler, içerik deklarasyonu, transpilasyon ve CLI komutları için i18n araçları sağlayan temel paket.

   • astro-intlayer Intlayer'ı Vite paketleyici 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.

2. 2

   Projenizi Yapılandırın

   Uygulamanızın dillerini tanımlamak için bir konfigürasyon dosyası oluşturun:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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 bakın.

3. 3

   Intlayer'ı Astro konfigürasyonunuza entegre edin

   Astro konfigürasyonunuza intlayer eklentisini ekleyin.

   astro.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   // @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

   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.

4. 4

   İçeriğinizi Deklare Edin

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

   src/app.content.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      tr: "Merhaba Dünya",    }),  },} satisfies Dictionary;export default appContent;

   İç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,md,mdx,yaml,yml}) eşleştikleri sürece uygulamanızın herhangi bir yerinde tanımlanabilir.

   Daha fazla bilgi için içerik deklarasyon dokümantasyonuna bakın.

5. 5

   Astro'da İçeriği Kullanma

   Sözlükleri doğrudan .astro dosyalarınızda, intlayer'dan dışa aktarılan temel yardımcıları kullanarak tüketebilirsiniz.

   src/pages/index.astro

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   ---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  defaultLocale,  localeMap,  getHTMLTextDir,  type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Canonical link: Tells search engines which is the primary version of this page -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Tell Google about all localized versions -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Fallback for users in unmatched languages -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <header>      <LocaleSwitcher />    </header>    <main>      <h1>{title}</h1>    </main>  </body></html>

6. 6

   Yerelleştirilmiş Yönlendirme

   Yerelleştirilmiş sayfaları sunmak için dinamik rota segmentleri oluşturun (örneğin src/pages/[locale]/index.astro):

   src/pages/[locale]/index.astro

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   ---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

   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.

7. 7

   Favori Framework'ünüzü Kullanmaya Devam Edin

   Seçtiğiniz framework'ü kullanarak uygulamanızı oluşturmaya devam edin.

   • Intlayer + React: React ile Intlayer
   • Intlayer + Vue: Vue ile Intlayer
   • Intlayer + Svelte: Svelte ile Intlayer
   • Intlayer + Solid: Solid ile Intlayer
   • Intlayer + Preact: Preact ile Intlayer
8. 17

   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

   İçeriği kopyala

   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;

   Çıkarma komutuBabel derleyicisi

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

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npx intlayer extract

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

   vite.config.ts

   İçeriği kopyala

   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

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm run build # Veya npm run dev

   ---

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.

TypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.

{  // ... mevcut TypeScript yapılandırmanız  "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:

# 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

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 bakın.

Bilginizi Derinleştirin

Daha fazlasını öğrenmek isterseniz, içeriğinizi dış kaynaklara aktarmak için Görsel Editör'ü uygulayabilir veya CMS kullanabilirsiniz.