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

İçindekiler

Neden alternatifler yerine Intlayer?

'@nuxtjs/i18n' veya 'i18next' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

Nuxt Uygulamasında Intlayer Kurulumu Adım Adım Rehber

GitHub'da Uygulama Şablonunu inceleyin.

1. 1

   Bağımlılıkları Yükleyin

   Gerekli paketleri npm kullanarak yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer vue-intlayernpm install --save-dev nuxt-intlayernpx intlayer init

   • intlayer

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

   • vue-intlayer Intlayer'ı Vue uygulamasıyla entegre eden paket. Vue bileşenleri için composables sağlar.

   • nuxt-intlayer Nuxt uygulamalarıyla Intlayer'ı entegre eden Nuxt modülü. Otomatik kurulum, yerel algılama için middleware, çerez yönetimi ve URL yönlendirmesi sağlar.

2. 2

   Projenizin yapılandırması

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

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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 yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, middleware yönlendirmesini, çerez isimlerini, içerik bildirimlerinizin konumunu ve uzantısını ayarlayabilir, Intlayer loglarını konsolda devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakınız.

3. 3

   Intlayer'ı Nuxt Yapılandırmanıza Entegre Edin

   Intlayer modülünü Nuxt yapılandırmanıza ekleyin:

   nuxt.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... Mevcut Nuxt yapılandırmanız  modules: ["nuxt-intlayer"],});

   nuxt-intlayer modülü, Intlayer'ın Nuxt ile entegrasyonunu otomatik olarak yönetir. İçerik bildirimlerinin oluşturulmasını ayarlar, geliştirme modunda dosyaları izler, yerel tespit için middleware sağlar ve yerelleştirilmiş yönlendirmeyi yönetir.

4. 4

   İçeriğinizi Bildirin

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

   İçerik bildirimleriniz, uygulamanızın herhangi bir yerinde tanımlanabilir, yeter ki contentDir dizini içinde yer alsın (varsayılan olarak ./src). Ve içerik bildirim dosya uzantısıyla eşleşsin (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Daha fazla detay için içerik bildirim dokümantasyonuna bakınız.

5. 5

   Intlayer'ı Kodunuzda Kullanın

   Nuxt uygulamanızın her yerinde içerik sözlüklerinize useIntlayer composable'ı ile erişin:

   components/HelloWorld.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  nuxtIntlayer,  learnMore,  nuxtDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"      >Nuxt</a    >, <nuxtIntlayer />  </p>  <p>    <learnMore />    <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

   Intlayer'da İçeriğe Erişim

   Intlayer, içeriğinize erişmek için farklı API'ler sunar:

   • Bileşen tabanlı sözdizimi (önerilen): <myContent /> veya <Component :is="myContent" /> sözdizimini kullanarak içeriği bir Intlayer Node olarak render edin. Bu, Visual Editor ve CMS ile sorunsuz bir şekilde entegre olur.

   • Metin tabanlı sözdizimi:
     İçeriği Visual Editor desteği olmadan düz metin olarak render etmek için {{ myContent }} kullanın.

   • Ham HTML sözdizimi:
     İçeriği Visual Editor desteği olmadan ham HTML olarak render etmek için <div v-html="myContent" /> kullanın.

   • Yapı bozma (Destructuration) sözdizimi:
     useIntlayer composable, içerikle birlikte bir Proxy döner. Bu proxy, reaktiviteyi koruyarak içeriğe erişmek için yapı bozma yöntemiyle ayrıştırılabilir.

     • const content = useIntlayer("myContent"); kullanın ve {{ content.myContent }} / <content.myContent /> şeklinde render edin.
     • Ya da içeriği yapı bozma ile almak için const { myContent } = useIntlayer("myContent"); kullanın ve {{ myContent}} / <myContent/> şeklinde render edin.
6. 6

   İçeriğinizin dilini değiştirin

   İsteğe bağlı

   İçeriğinizin dilini değiştirmek için useLocale composable tarafından sağlanan setLocale fonksiyonunu kullanabilirsiniz. Bu fonksiyon, uygulamanın yerel ayarını belirlemenize ve içeriği buna göre güncellemenize olanak tanır.

   NuxtLink kullanarak diller arasında geçiş yapmak için bir bileşen oluşturun. Dil değiştirme için butonlar yerine link kullanmak, SEO ve sayfa keşfedilebilirliği açısından en iyi uygulamadır, çünkü bu sayede arama motorları sayfalarınızın tüm yerelleştirilmiş versiyonlarını tarayabilir ve indeksleyebilir.

   components/LocaleSwitcher.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt useRoute'u otomatik olarak import ederconst route = useRoute();const { locale, availableLocales, setLocale } = useLocale();</script><template>  <nav class="locale-switcher">    <NuxtLink      v-for="localeEl in availableLocales"      :key="localeEl"      :to="getLocalizedUrl(route.fullPath, localeEl)"      class="locale-link"      :class="{ 'active-locale': localeEl === locale }"      @click="setLocale(localeEl)"    >      {{ getLocaleName(localeEl) }}    </NuxtLink>  </nav></template>

   NuxtLink'i uygun href öznitelikleriyle ( getLocalizedUrl aracılığıyla) kullanmak, arama motorlarının sayfalarınızın tüm dil varyantlarını keşfetmesini sağlar. Bu, arama motoru tarayıcılarının takip etmeyebileceği yalnızca JavaScript ile yapılan dil değiştirmeye tercih edilir.

   Sonra, app.vue dosyanızı layout kullanacak şekilde ayarlayın:

   app.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <template>  <NuxtLayout>    <NuxtPage />  </NuxtLayout></template>

7. 7

   Uygulamanıza yerelleştirilmiş Yönlendirme ekleyin

   İsteğe bağlı

   Nuxt, nuxt-intlayer modülünü kullandığınızda yerelleştirilmiş yönlendirmeyi otomatik olarak yönetir. Bu, sayfalar dizin yapınıza dayanarak her dil için otomatik olarak rotalar oluşturur.

   Örnek:

   plaintext

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   pages/├── index.vue          → /, /fr, /es├── about.vue          → /about, /fr/about, /es/about└── contact/    └── index.vue      → /contact, /fr/contact, /es/contact

   Yerelleştirilmiş sayfalar oluşturmak için, pages/ dizininde Vue dosyalarınızı oluşturmanız yeterlidir. İşte iki örnek sayfa:

   Ana Sayfa (pages/index.vue):

   pages/index.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("home-page");useHead({  title: content.metaTitle.raw,  meta: [    {      name: "description",      content: content.metaDescription.raw,    },  ],});</script><template>  <h1><content.title /></h1></template>

   Hakkında Sayfası (pages/about.vue):

   pages/about.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // Primitif string erişimi için .raw kullanın  meta: [    {      name: "description",      content: content.metaDescription.raw, // Primitif string erişimi için .raw kullanın    },  ],});</script><template>  <h1><content.title /></h1></template>

   Not: useHead Nuxt'ta otomatik olarak içe aktarılır. İçerik değerlerine ihtiyaçlarınıza bağlı olarak .value (reaktif) veya .raw (primitif string) ile erişebilirsiniz.

   nuxt-intlayer modülü otomatik olarak:

   • Kullanıcının tercih ettiği yerel dili algılar
   • URL üzerinden yerel dil değişimini yönetir
   • Uygun <html lang=""> özniteliğini ayarlar
   • Yerel dil çerezlerini yönetir
   • Kullanıcıları uygun yerelleştirilmiş URL'ye yönlendirir
8. 8

   Yerelleştirilmiş Bir Link Bileşeni Oluşturma

   İsteğe bağlı

   Uygulamanızın navigasyonunun mevcut locale'a uygun olmasını sağlamak için özel bir Links bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'lerin önüne otomatik olarak mevcut dili ekler; bu, SEO ve sayfa keşfedilebilirliği için çok önemlidir.

   components/Links.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";interface Props {  href: string;  locale?: string;}const props = defineProps<Props>();const { locale: currentLocale } = useLocale();// Son yolu hesaplaconst finalPath = computed(() => {  // 1. Linkin harici olup olmadığını kontrol et  const isExternal = /^https?:\/\//.test(props.href || "");  // 2. Eğer harici ise, olduğu gibi döndür (NuxtLink <a> etiketi oluşturmayı yönetir)  if (isExternal) return props.href;  // 3. Eğer dahili ise, URL'yi yerelleştir  const targetLocale = props.locale || currentLocale.value;  return getLocalizedUrl(props.href, targetLocale);});</script><template>  <NuxtLink :to="finalPath" v-bind="$attrs">    <slot />  </NuxtLink></template>

   Sonra bu bileşeni uygulamanızın her yerinde kullanabilirsiniz:

   layouts/default.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">Anasayfa</Links>    <Links href="/about">Hakkında</Links>  </div></template>

   NuxtLink'i yerelleştirilmiş yollarla kullanarak şunları sağlarsınız:

   • Arama motorları sayfalarınızın tüm dil versiyonlarını tarayabilir ve dizine ekleyebilir
   • Kullanıcılar yerelleştirilmiş URL'leri doğrudan paylaşabilir
   • Tarayıcı geçmişi, dil önekli URL'lerle doğru şekilde çalışır

9. 9

   Meta Verileri ve SEO'yu Yönetme

   İsteğe bağlı

   Nuxt, useHead composable (otomatik olarak içe aktarılır) aracılığıyla mükemmel SEO yetenekleri sunar. Intlayer'ı, yerelleştirilmiş meta verileri yönetmek için .raw veya .value erişicisini kullanarak temel string değerini almak için kullanabilirsiniz:

   pages/about.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { useIntlayer } from "vue-intlayer";// useHead Nuxt'ta otomatik olarak içe aktarılırconst content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // Temel string erişimi için .raw kullanın  meta: [    {      name: "description",      content: content.metaDescription.raw, // İlkel string erişimi için .raw kullanın    },  ],});</script><template>  <h1><content.title /></h1></template>

   Alternatif olarak, Vue reaktivitesi olmadan içeriği almak için import { getIntlayer } from "intlayer" fonksiyonunu kullanabilirsiniz.

   İçerik değerlerine erişim:

   • İlkel string değeri almak için .raw kullanın (reaktif değil)
   • Reaktif değeri almak için .value kullanın
   • Görsel Editör desteği için <content.key /> bileşen sözdizimini kullanın

   İlgili içerik bildirimi oluşturun:

   pages/about-page.content.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { t, type Dictionary } from "intlayer";
   
   const aboutPageContent = {
     key: "about-page",
     content: {
       metaTitle: t({
         en: "Hakkımızda - Şirketim",
         fr: "À Propos - Ma Société",
         es: "Acerca de Nosotros - Mi Empresa",
       }),
       metaDescription: t({
         en: "Şirketimiz ve misyonumuz hakkında daha fazla bilgi edinin",
         fr: "En savoir plus sur notre société et notre mission",
         es: "Conozca más sobre nuestra empresa y nuestra misión",
       }),
       title: t({
         en: "Hakkımızda",
         fr: "À Propos",
         es: "Acerca de Nosotros",
       }),
     },
   } satisfies Dictionary;
   
   export default aboutPageContent;

(İsteğe Bağlı) Adım 6b: Navigasyonlu Bir Layout Oluşturun

Nuxt layout'ları, sayfalarınız için ortak bir yapı tanımlamanıza olanak tanır. Dil değiştirici ve navigasyonu içeren varsayılan bir layout oluşturun:

<script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">Ana Sayfa</Links>    <Links href="/about">Hakkında</Links>  </div></template>

Links bileşeni (aşağıda gösterilmiştir), dahili navigasyon bağlantılarının otomatik olarak yerelleştirilmesini sağlar.

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna commit edilmesini önler.

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 Uzantısını yükleyebilirsiniz.

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 tespiti.
• Çevrilmiş içeriğin Satır içi önizlemeleri.
• Çevirileri kolayca oluşturup güncellemek için Hızlı işlemler.

Uzantının nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Uzantısı 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.