Intlayer kullanarak Vite ve Svelte web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

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 seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetmek.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirmek.
• Otomatik oluşturulan tiplerle TypeScript desteğini sağlamak, böylece otomatik tamamlama ve hata tespitini geliştirmek.
• Dinamik dil algılama ve değiştirme gibi gelişmiş özelliklerden faydalanmak.

Vite ve Svelte Uygulamasında Intlayer Kurulum Adım Adım Rehberi

GitHub'da Uygulama Şablonuna bakın.

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

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

• intlayer

  Konfigürasyon yönetimi, çeviri, içerik bildirimi, transpile etme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

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

• vite-intlayer
  Intlayer'ı Vite bundler ile entegre etmek için Vite eklentisini içerir; ayrıca kullanıcının tercih ettiği dili tespit etmek, çerezleri yönetmek ve URL yönlendirmelerini işlemek için middleware sağlar.

Adım 2: Projenizin Konfigürasyonu

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

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Diğer dilleriniz    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bu konfigürasyon dosyası aracılığıyla, yerelleştirilmiş URL'ler, middleware yönlendirmesi, çerez isimleri, içerik beyanlarınızın konumu ve uzantısı, Intlayer loglarının konsolda devre dışı bırakılması ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için konfigürasyon dokümantasyonuna bakınız.

Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

Konfigürasyonunuza intlayer eklentisini ekleyin.

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

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

Adım 4: İçeriğinizi Beyan Edin

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

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;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,mjx,cjs,cjx}).

Daha fazla detay için, içerik bildirim dokümantasyonuna bakabilirsiniz.

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

<script>  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("app");</script><div><!-- İçeriği basit içerik olarak render et --><h1>{$content.title}</h1><!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için --><h1><svelte:component this={$content.title} /></h1><!-- İçeriği string olarak render etmek için --><div aria-label={$content.title.value}></div>

(İsteğe bağlı) Adım 6: İçeriğinizin dilini değiştirin

<script lang="ts">import  { getLocaleName } from 'intlayer';import { useLocale } from 'svelte-intlayer';// Dil bilgisi ve setLocale fonksiyonunu alconst { locale, availableLocales, setLocale } = useLocale();// Dil değişikliğini yönetconst changeLocale = (event: Event) => {  const target = event.target as HTMLSelectElement;  const newLocale = target.value;  setLocale(newLocale);};</script><div>  <select value={$locale} on:change={changeLocale}>    {#each availableLocales ?? [] as loc}      <option value={loc}>        {getLocaleName(loc)}      </option>    {/each}  </select></div>

(İsteğe bağlı) Adım 7: Markdown Render Etme

Intlayer, Markdown içeriğini doğrudan Svelte uygulamanızda render etmeyi destekler. Varsayılan olarak, Markdown düz metin olarak işlenir. Markdown'u zengin HTML'ye dönüştürmek için @humanspeak/svelte-markdown veya başka bir markdown ayrıştırıcı entegre edebilirsiniz.

intlayer paketi kullanarak markdown içeriğinin nasıl tanımlanacağını görmek için markdown dokümanına bakınız.

<script>  import { setIntlayerMarkdown } from "svelte-intlayer";  setIntlayerMarkdown((markdown) =>   // markdown içeriğini bir string olarak render et   return markdown;  );</script><h1>{$content.markdownContent}</h1>

Markdown front-matter verilerinize content.markdownContent.metadata.xxx özelliğini kullanarak da erişebilirsiniz.

(İsteğe bağlı) Adım 8: intlayer editör / CMS kurulumu

intlayer editörünü kurmak için intlayer editör dokümantasyonunu takip etmelisiniz.

intlayer CMS'i kurmak için intlayer CMS dokümantasyonunu takip etmelisiniz.

Paralel olarak, Svelte uygulamanızda, bir layout dosyasına veya uygulamanızın köküne aşağıdaki satırı eklemelisiniz:

import { useIntlayerEditor } from "svelte-intlayer";useIntlayerEditor();

(İsteğe bağlı) Adım 7: Uygulamanıza yerelleştirilmiş Yönlendirme ekleyin

Svelte uygulamanızda yerelleştirilmiş yönlendirmeyi yönetmek için, svelte-spa-router paketini ve Intlayer'ın localeFlatMap fonksiyonunu kullanarak her locale için rotalar oluşturabilirsiniz.

Öncelikle, svelte-spa-router paketini yükleyin:

npm install svelte-spa-router

Sonra, rotalarınızı tanımlamak için bir Router.svelte dosyası oluşturun:

<script lang="ts">import { localeFlatMap } from "intlayer";import Router from "svelte-spa-router";import { wrap } from "svelte-spa-router/wrap";import App from "./App.svelte";const routes = Object.fromEntries(    localeFlatMap(({locale, urlPrefix}) => [    [        urlPrefix || '/',        wrap({            component: App as any,            props: {                locale,            },        }),    ],    ]));</script><Router {routes} />

main.ts dosyanızı, App yerine Router bileşenini mount edecek şekilde güncelleyin:

import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, {  target: document.getElementById("app")!,});export default app;

Son olarak, App.svelte dosyanızı locale prop'unu alacak ve useIntlayer ile kullanacak şekilde güncelleyin:

<script lang="ts">import type { Locale } from 'intlayer';import { useIntlayer } from 'svelte-intlayer';import Counter from './lib/Counter.svelte';import LocaleSwitcher from './lib/LocaleSwitcher.svelte';export let locale: Locale;$: content = useIntlayer('app', locale);</script><main>  <div class="locale-switcher-container">    <LocaleSwitcher currentLocale={locale} />  </div>  <!-- ... uygulamanızın geri kalanı ... --></main>

Sunucu Tarafı Yönlendirmeyi Yapılandırma (Opsiyonel)

Paralel olarak, uygulamanıza sunucu tarafı yönlendirme eklemek için intlayerProxy'yi de kullanabilirsiniz. Bu eklenti, URL'ye göre mevcut locale'i otomatik olarak algılar ve uygun locale çerezini ayarlar. Eğer herhangi bir locale belirtilmemişse, eklenti kullanıcının tarayıcı dil tercihlerini baz alarak en uygun locale'i belirler. Hiçbir locale algılanamazsa, varsayılan locale'e yönlendirme yapar.

Üretimde intlayerProxy kullanmak için, vite-intlayer paketini devDependencies'den dependencies'e geçirmeniz gerektiğini unutmayın.

import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import { intlayer, intlayerProxy } from "vite-intlayer";  plugins: [svelte(), intlayer(), intlayerProxy()],});

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

Kullanıcıların dilleri değiştirmesine ve URL'yi buna göre güncellemesine izin vermek için bir LocaleSwitcher bileşeni oluşturabilirsiniz. Bu bileşen, intlayer'dan getLocalizedUrl ve svelte-spa-router'dan push fonksiyonlarını kullanacaktır.

<script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// Dil bilgilerini alconst { locale, availableLocales } = useLocale();// Dil değişikliğini yönetconst changeLocale = (event: Event) => {  const target = event.target as HTMLSelectElement;  const newLocale = target.value;  const currentUrl = window.location.pathname;  const url = getLocalizedUrl( currentUrl, newLocale);  push(url);};</script><div class="locale-switcher">  <select value={currentLocale ?? $locale} onchange={changeLocale}>    {#each availableLocales ?? [] as loc}      <option value={loc}>        {getLocaleName(loc)}      </option>    {/each}  </select></div>

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.

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

# Intlayer tarafından oluşturulan dosyaları göz ardı et.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 tespiti.
• Çevrilmiş içeriğin Satır içi önizlemeleri.
• Çevirileri kolayca oluşturup güncellemek için Hızlı işlemler.

Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Eklentisi dokümantasyonuna bakabilirsiniz.

Daha İleri Gitmek

Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.