Intlayer kullanarak Analog (Angular) uygulamanızı tercüme edin | Uluslararasılaştırma (i18n)

İçindekiler

Neden alternatifler yerine Intlayer?

'ngx-translate' veya 'angular-l10n' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

Analog Uygulamasında Intlayer'ı Kurmak İçin Adım Adım Kılavuz

GitHub üzerindeki Uygulama Şablonuna bakın.

1. 1

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

   Gerekli paketleri npm kullanarak yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer angular-intlayer vite-intlayernpx intlayer init

   • intlayer

     Yapılandırma yönetimi, çeviri, içerik bildirimi, derleme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

   • angular-intlayer Intlayer'ı Angular uygulamasıyla entegre eden paket. Angular uluslararasılaştırması için bağlam sağlayıcıları ve kancalar sunar.

   • vite-intlayer Intlayer'ı Vite ile entegre eden paket. İçerik bildirim dosyalarını işlemek için bir eklenti sağlar ve optimum performans için takma adlar ayarlar.

2. 2

   Projenizin Yapılandırılması

   Uygulamanızın dillerini yapılandırmak için bir yapılandırma 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,
         // Diğer yerel ayarlarınız
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım yeniden yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsoldaki Intlayer günlüklerini devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

3. 3

   Intlayer'ı Vite Yapılandırmanıza Entegre Edin

   Intlayer'ı Analog ile entegre etmek için vite-intlayer eklentisini kullanmanız gerekir.

   vite.config.ts dosyanızı düzenleyin:

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // Intlayer eklentisini ekleyin  ],}));

   intlayer() eklentisi Vite'ı Intlayer ile yapılandırır. İçerik bildirim dosyalarını işler ve optimum performans için takma adlar ayarlar.

4. 4

   İçeriğinizi Bildirin

   Çevirileri saklamak için içerik bildirimlerinizi oluşturun ve yönetin:

   İçerik bildirimleriniz, contentDir dizinine (varsayılan olarak ./src) dahil edildikleri sürece uygulamanızın herhangi bir yerinde tanımlanabilir. Ve içerik bildirimi dosya uzantısıyla (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) eşleşmelidir.

   Daha fazla ayrıntı için içerik bildirimi dokümantasyonuna bakın.

5. 5

   Kodunuzda Intlayer'ı Kullanın

   Intlayer'ın uluslararasılaştırma özelliklerini Analog uygulamanız boyunca kullanmak için, uygulama yapılandırmanızda Intlayer'ı sağlamanız gerekir.

   src/app/app.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = {  providers: [    provideIntlayer(), // Intlayer sağlayıcısını buraya ekleyin  ],};

   Ardından, herhangi bir bileşen içinde useIntlayer fonksiyonunu kullanabilirsiniz.

   src/app/pages/index.page.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

   Intlayer içeriği bir Signal olarak döndürülür, bu nedenle sinyali çağırarak değerlere erişirsiniz: content().title.

6. 6

   İçeriğinizin dilini değiştirin

   İsteğe bağlı

   İçeriğinizin dilini değiştirmek için useLocale fonksiyonu tarafından sağlanan setLocale fonksiyonunu kullanabilirsiniz. Bu, uygulamanın yerel ayarını ayarlamanıza ve içeriği buna göre güncellemenize olanak tanır.

   Diller arasında geçiş yapmak için bir bileşen oluşturun:

   src/app/locale-switcher.component.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

   Ardından, bu bileşeni sayfalarınızda kullanın:

   src/app/pages/index.page.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

TypeScript'i Yapılandırın

Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül büyütme (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ırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik olarak 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ı ekleyebilirsiniz:

#  Intlayer tarafından oluşturulan dosyaları yoksay.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 algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Kolayca çeviri oluşturmak ve güncellemek için hızlı eylemler.

Eklentinin nasıl kullanılacağına dair daha fazla ayrıntı için Intlayer VS Code Eklentisi dokümantasyonuna bakın.