Bu sitede kullandığım çok dilli Nuxt yapısı

Bu yazıda Nuxt.js framework'ü ile şu anda görüntülediğiniz çok dilli internet sitemi yaparken kullandığım yöntemleri anlatacağım. Yazı çok detaylı olmayacak.

Mevcut yapı:

• @nuxt/content eklentisiyle .md dosyaları servis eden bir site
• Bir yazının farklı dilde aynı slug'a sahip versiyonu varsa, dil değiştirilince o yüklenir
• Dizin ve tekil içerik sayfaları tek bir tanedir
• Çeviri dosyaları ana dizinde locales klasöründe yer almaktadır

i18n eklenti ayarları

Aşağıda görüldüğü üzere yalnızca iki dil tanımladım. Bu dillerin dosyaları sırasıyla en.js ve tr.js. Bunları locales klasöründe tutuyorum. lazy değeri sayesinde dosyalar sadece gerektiğinde yüklenecek. Çok de gerekli değil çünkü boyutları zaten çok küçük.

defaultLocale ise varsayılan dili belirtiyor. detectBrowserLanguage'i devre dışı bıraktım. strategy ayarına göre ise varsayılan dil haricindeki tüm dillerde dil kodu adresin başına eklenecek: https://elma.dev/notes/test -> https://elma.dev/tr/notes/test.

export default {
  // ...
  i18n: {
    strategy: 'prefix_except_default',
    detectBrowserLanguage: false,
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.js' },
      { code: 'tr', iso: 'tr-TR', file: 'tr.js' },
    ],
    baseUrl, // baseUrl: 'https://example.com'
    defaultLocale: 'en',
    lazy: true,
    langDir: '~/locales/',
  },
}

Dil değiştirici komponent

İki ikon var ve hangi dil etkin ise onun bayrak ikonu görünüyor. Tam olarak şöyle: . Bu ikona tıklanınca, öteki dile geçiliyor. Sitem sadece iki dilde mevcut olduğu için bu şekilde kullanım daha mantıklıydı.

<template>
  <span @click="changeLocale">
    <IconTRFlag v-if="currentLocale === 'tr'" />
    <IconGBFlag v-else />
  </span>
</template>

changeLocale() ile dil değiştirirken, dilin değiştirildiğine dair bir kayıt tutabilir veya yüklenen yeni adreste dil değişikliğini kontrol edebilirsiniz. Böylece dil değişikliği sonrasında açılan sayfa 404 hatası verirse, normal bir 404 hata mesajı göstermek yerine sayfanın o dilde çevirisinin bulunmadığını söyleyebilirsiniz.

Dil değiştirilince, varsayılan dil seçilmediyse URL'e ilgili dilin kodu eklenecek, varsayılan dile değiştirilince ise bu dil kodu kaldırılacak. Böylece aynı URL farklı dil için yüklenmiş oluyor.

Klasör yapısı

Sitem için kullandığım mevcut klasör yapısı aşağıda.

content
├── notes
│   ├── en
│   └── tr
└── works
    ├── en
    └── tr

Dile uygun içeriği çekmek

Bundan sonra bir içeriğin varlığını kontrol ederken, içeriği getirirken, vesaire, her zaman dil kodunu da sorguya eklemelisiniz.

export default {
  async asyncData({ $content, app }) {
    // bunun yerine
    const notes = await $content(`notes`)

    // bunu kullanmalı
    const notes = await $content(`notes`, app.i18n.locale)
  },
}

Geri kalanı direkt olarak @nuxt/content ve @nuxtjs/i18n modüllerinin kurulum ve kullanımıyla alakalı olduğu için es geçtim.

Hepsi bu kadar. Sitemde kullandığım özel yapının tamamı bundan ibaret.