Çeviriler

Twenty uygulamaları İngilizce olarak oluşturulur: kaynak ve manifestinizdeki dizeler İngilizce kaynak metindir, en çevirdiğiniz kaynak yerel ayarıdır ve çevrilmeden bırakılan herhangi bir yerel ayar buna geri döner. Uygulamanızda iki tür çevrilebilir metin vardır ve her ikisi de aynı locales/ kataloğundan geçer:

Manifest etiketleri — nesne ve alan adları, görünüm başlıkları, menü öğeleri ve uygulamanızın üst verilerinde (metadata) tanımlanan diğer dizeler.
Ön bileşen dizeleri — React ön bileşenlerinizin render ettiği UI metni.

Çevrilebilir dizeleri işaretlersiniz, bunları yerel başına kataloglara çıkarırsınız, bu katalogları çevirirsiniz ve build, geçerli kullanıcı için herhangi bir ek bağlantıya gerek kalmadan doğru dili sunar.

Ön bileşen dizelerini işaretleme

Çeviri yardımcılarını twenty-sdk/front-component içinden içe aktarın:

import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';

const STATUSES = [
  { id: 'draft', label: msg('Draft') },
  { id: 'sent', label: msg('Sent') },
];

const Card = ({ count, name }: { count: number; name: string }) => {
  const { t } = useTranslate();

  return (
    <section>
      {/* Static text — reactive to the user's locale */}
      <Trans>Loading postcard…</Trans>

      {/* Disambiguate identical sources with a context */}
      <Trans context="card-title">Untitled</Trans>

      {/* Interpolation: pass values explicitly */}
      <p>{t('Hi {name}', { name })}</p>
      <p>{t('Saved {count} cards', { count })}</p>

      {/* Resolve a lazily-declared descriptor */}
      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
    </section>
  );
};

Ne zaman hangisi kullanılmalı

Trans — JSX içindeki statik metin. Değişkelerin yerleştirilmesi için message ve values prop’larını kullanın (Trans message="Hi {name}" values={{ name }}); çocukların içine doğrudan yerleştirme statik olarak çıkarılamaz.
useTranslate().t — bir bileşen içindeki dinamik dizeler. Kullanıcı dili değiştirdiğinde yeniden render edilir. Render içinde bunu tercih edin.
t(...) (doğrudan içe aktarılır) — bileşen render’ının içinde olmasına gerek olmadan, event handler’lar, yardımcı fonksiyonlar ve modül kapsamı dahil her yerde kullanılabilen erken çeviri.
msg(...) — veri olarak (sabitler, yapılandırma) bildirilen dizeler için ertelenmiş bir tanımlayıcı. Bunu daha sonra t(descriptor) ile çözün.

Bağlam

Aynı kaynak dize farklı şekilde çevrildiğinde bunları ayırt etmek için context geçirin:

t({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>

Çıkarma ve çeviri

extract komutunu uygulama dizininizden çalıştırın:

twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale

Çıkarma işlemi, manifest etiketlerinizi ve ön bileşen kaynaklarınızdan gelen t()/msg()/Trans dizelerini, kaynak dizeyi anahtar olarak kullanarak locales/\<locale>.json içine toplar. Çevirileri doldurun:

// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}

{name} gibi yer tutucular çalışma zamanında değiştirilir — bunları çeviride koruyun. Boş bırakılan herhangi bir dize, kaynak metne geri döner.

Nasıl çalışır

twenty dev:build, katalogları derler ve geçerli kullanıcı için doğru dili sunar: manifest etiketleri sunucu tarafında çözülür ve ön bileşen katalogları her bileşen paketine gömülür. Çalışma zamanında bir bileşen, yereli yürütme bağlamından (ana makinenin geçerli dili) okur ve her dizeyi kataloğuna göre çözer; bir çeviri eksik olduğunda kaynak metne geri döner. Ana makinede dilin değiştirilmesi, Trans ve useTranslate().t dizelerini canlı olarak yeniden render eder. Kataloglar build zamanında derlendiği için, bir çeviriyi güncellemek twenty dev:build’i yeniden çalıştırmayı (ve yeniden dağıtmayı) gerektirir; bu, diğer herhangi bir değişiklikle aynıdır.

Çeviriler twenty dev:build (ve twenty apply) tarafından derlenir. Sürekli twenty dev izlemesi kaynak dizeleri gösterir, bu yüzden yerelleştirilmiş çıktıyı tek seferlik bir build ile test edin.

Trans metin alt öğeleri birden fazla satıra yayılabilir — boşluklar, JSX’in boşlukları daraltma biçimiyle aynı şekilde daraltılır; bu nedenle her ikisi de Welcome back anahtarına dönüştürülür:

<Trans>Welcome back</Trans>
<Trans>
  Welcome
  back
</Trans>

Genel Bakış

Uygulamalar

API

Kendi Kendine Barındırma

Katkıda Bulunun

Ön bileşen dizelerini işaretleme

Ne zaman hangisi kullanılmalı

Bağlam

Çıkarma ve çeviri

Nasıl çalışır

​Ön bileşen dizelerini işaretleme

​Ne zaman hangisi kullanılmalı

​Bağlam

​Çıkarma ve çeviri

​Nasıl çalışır

Ön bileşen dizelerini işaretleme

Ne zaman hangisi kullanılmalı

Bağlam

Çıkarma ve çeviri

Nasıl çalışır