Angular Academy · Ders

Metni Çeviri için İşaretleme

Çevrilebilir metni işaretlemek için i18n özniteliklerini kullanın

Metni Çeviri için İşaretleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Uluslararasılaştırmanın Çözdüğü Sorun

Uluslararasılaştırma (i18n), kodu değiştirmeden metninin diğer dillere çevrilebilmesi için uygulamanızı hazırlamaktır. Angular, şablonlardaki çevrilebilir metinleri i18n özniteliğiyle işaretlemeye dayanan yerleşik bir i18n sistemine sahiptir.

i18n Özniteliği

Metni çevrilmesi gereken her öğeye i18n özniteliğini ekleyin. Angular bunları derleme sırasında toplar ve içeriği yerel ayara göre değiştirir.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Öznitelikleri Çevirme

Bir HTML özniteliğini (title veya placeholder gibi) çevirmek için özniteliğin başına i18n- ekleyin.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Anlam ve Açıklama

i18n="meaning|description" söz dizimiyle çevirmenlere bağlam sağlayabilirsiniz. Anlam, aynı çeviriyi paylaşması gereken özdeş ifadeleri gruplar; açıklama ise kullanımı açıklar.

<button i18n="cta|The main call to action on the home page">Get started</button>

Özel Kimlikler

Bir çevirinin metin düzenlemelerinden etkilenmemesi için @@ sonrasına kararlı bir özel kimlik ekleyin. Bu kimlik olmadan kaynak metni değiştirmek yeni bir kimlik oluşturur ve mevcut çeviriyi kaybettirir.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Çevrilmiş Metinlerde Ara Değerler

Çevrilmiş metin içindeki bağlamalar yer tutuculara dönüşür. Çevirmenler, kendi dillerine uygun şekilde yerini değiştirebilecekleri adlandırılmış bir belirteç görür.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

$localize ile Bileşenlerde Metin İşaretleme

TypeScript içindeki dizeler için (şablonlar değil) $localize etiketini kullanın. Bu etiket, şablonlarda i18n özniteliğinin yaptığı gibi dizeyi çıkarılmak üzere işaretler.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Dizeleri Birleştirmek Neden Yeterli Değil

Metni sabit kodlamak ve birleştirmek ('You have ' + n + ' items') çeviriyi bozar: sözcük sırası dillere göre değişir ve çoğul kuralları farklıdır. Tüm ifadeleri i18n ile işaretlemek, dil bilgisinin çevirmenler tarafından doğru biçimde korunmasını sağlar.

İç İçe İşaretlemeyi Çevirme

Çevrilebilir metin alt öğeler içerdiğinde Angular, çevirmenlerin işaretlemeyi yanlışlıkla silmesini önlemek için bunları yer tutucu olarak korur.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Kaynak Metni Temiz Tutma

Metni, genellikle tam bir cümle veya etiket olacak şekilde, makul en küçük birimde işaretleyin. Tek bir cümleyi birden fazla i18n bloğuna bölmekten kaçının; çünkü her parça ayrı ve çevrilmesi daha zor bir dizeye dönüşür.

Derleme Sırasında Ne Olur

i18n özniteliğinin kendisi çalışma zamanı maliyeti oluşturmaz: Angular, işaretlenen metni her yerel ayar için derleme sırasında değiştirerek ayrı bir optimize edilmiş paket oluşturur. Bu dizeleri sonraki derslerde çıkarıp çevireceğiz.

Hızlı Kontrol

Bir placeholder özniteliğini nasıl çevirirsiniz?

Özet

Şablon metnini i18n özniteliğiyle, öznitelikleri ise i18n-attr ile işaretleyin. Bağlam sağlamak için meaning|description, kararlı kimlikler için @@customId ekleyin. Bağlamalar yer tutucuya dönüşür; TypeScript dizelerinde $localize kullanılır. İşaretleme, sıfır çalışma zamanı maliyetiyle yapılır.

Sıkça Sorulan Sorular

“Metni Çeviri için İşaretleme” dersi ücretsiz mi?

Evet — “Metni Çeviri için İşaretleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Metni Çeviri için İşaretleme” dersinde ne öğreneceğim?

Çevrilebilir metni işaretlemek için i18n özniteliklerini kullanın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Metni Çeviri için İşaretleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön