Intlayer ve Vite ve Svelte ile Uluslararasılaştırma Başlangıç Kılavuzu (i18n)

Bu paket geliştirme aşamasındadır. Daha fazla bilgi için soruna bakın. Sorunu beğenerek Svelte için Intlayer'a olan ilginizi gösterin

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:

• Bileşen düzeyinde açıklayıcı sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik oluşturulan türlerle TypeScript desteği sağlayın, böylece otomatik tamamlama ve hata algılama iyileşir.
• Dinamik yerel ayar algılama ve anahtarlama gibi gelişmiş özelliklerden yararlanın.

Vite ve Svelte Uygulamasında Intlayer Kurulumu İçin Adım Adım Kılavuz

Adım 1: Bağımlılıkları Kurma

Gerekli paketleri npm kullanarak kurun:

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer

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

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

• vite-intlayer Vite bundler ile Intlayer'ı entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesi yapmak için middleware'i içerir.

Adım 2: Projenizi Yapılandırma

Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

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'leri, middleware yönlendirmesini, çerez adlarını, içerik bildiriminizin konumunu ve uzantısını, Intlayer günlüklerini konsolda devre dışı bırakmayı ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

Adım 3: Intlayer'ı Vite Yapılandırmanıza Entegre Etme

Yapılandırmanıza intlayer eklentisini ekleyin.

import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

intlayerPlugin() Vite eklentisi, Vite ile Intlayer'ı entegre etmek için kullanılır. İçerik bildirimi dosyalarının oluşturulmasını sağlar ve bunları geliştirme modunda izler. Ayrıca Intlayer ortam değişkenlerini Vite uygulaması içinde tanımlar. Ek olarak, performansı optimize etmek için takma adlar sağlar.

Adım 4: İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildiriminizi oluşturun ve yönetin:

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

İçerik bildiriminiz uygulamanızın herhangi bir yerine yerleştirilebilir, yeter ki contentDir dizinine dahil edilsin (varsayılan olarak ./src). Ve içerik bildirimi dosya uzantısı ile eşleşsin (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

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

Adım 5: Kodunuzda Intlayer'ı Kullanın

[tamamlanacak]

(İsteğe Bağlı) Adım 6: İçeriğinizin Dilini Değiştirin

[tamamlanacak]

(İsteğe Bağlı) Adım 7: Uygulamanıza Yerelleştirilmiş Yönlendirme Ekleyin

[tamamlanacak]

(İsteğe Bağlı) Adım 8: Yerel ayar değiştiğinde URL'yi değiştirin

[tamamlanacak]

(İsteğe Bağlı) Adım 9: HTML Dil ve Yön Niteliklerini Değiştirin

[tamamlanacak]

(İsteğe Bağlı) Adım 10: Yerelleştirilmiş Bağlantı Bileşeni Oluşturun

[tamamlanacak]

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaları Git deponuza kaydetmekten kaçınmak için bunları yok saymanız önerilir. Bu, bunları Git deponuza kaydetmekten kaçınmanıza olanak tanır.

Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyin:

# Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Uzantısı'nı kurun.

VS Code Marketplace'ten yükleyin

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 önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantıyı kullanma hakkında daha fazla ayrıntı için Intlayer VS Code Uzantısı dokümantasyonuna bakın.

Daha Fazla İlerle

Daha fazla ilerlemek için görsel düzenleyici veya içeriğinizi CMS kullanarak dışa aktarmayı uygulayabilirsiniz.

Dokümantasyon Geçmişi