Ana içeriğe atla
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>…</Trans> — JSX içindeki statik metin. Değişkelerin (<Trans message="Hi {name}" values={{ name }} />) yerleştirilmesi için message ve values prop’larını kullanın; ç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 hem <Trans>Welcome\n back</Trans> hem de çıkarılan anahtar Welcome back olur.