Jekyll ile yaptığım bir websitem var. Burada akademik yayınlarımı ve yazdığım blog yazılarını paylaşıyorum. İlk başlarda siteyi sadece Türkçe kullanıyordum ancak biraz İngilizce öğrenince sitemi, İngilizce’yi de ekleyerek iki dilli yapmaya karar verdim.

İnternette aramalar yaptım. Bunun nasıl yapılacağıyla ilgili çok şey var ancak hiçbiri benim istediğim sonucu vermedi. Sonunda Claude 3 Haiku’nun da yardımıyla siteyi klasörlere bölmeden ve plugin kullanmadan bunu yapmanın yolunu buldum.

Adım adım anlatıyorum:

Sayfaların kopyasını oluşturmak

Sitemde toplam üç sayfa var

- index.md
- blog.md
- publish.md

Bunların birer kopyasını oluşturdum ve şöyle isimlendirdim:

- index.tr.md
- blog.tr.md
- publish.tr.md

_layouts’un altında default.html ve _includes’ın altında header.html adlı dosyaların da kopyalarını oluşturdum. Onları aşağıdaki gibi kullanıyorum:

İngilizce Sayfalar için Türkçe Sayfalar için İndex Sayfası içi
default.html defaulttr.html defindex.html
header.html headertr.html headerin.html

Yeni sayfaları düzenlemek

defaulttr.html içinde şu satırı

{%- include header.html -%}

bu şekilde değiştirdim.

{%- include headertr.html -%}

headertr.html içinde şu satırı

{%- assign page_paths = site.header_pages | default: default_paths -%}

şu şekilde değiştirdim.

{%- assign page_paths = site.headertr_pages | default: default_paths -%}

📌defindex.html ve headerin.html içinde de benzer şekilde gerekli değişiklikleri yaptım.

Her .md dosyanın front matterına gerekli YAML’ı aşağıdakine benzer şekilde ekledim.

---
title: Title of page
layout: defindex (Türkçe sayfalar içi defaulttr, İngilizce sayfalar için default,)
lang: en (index.tr.html ve diğer Türkçe sayfalar için tr)
---

❗ Her blog gönderisine lang etiketi eklemeyi unutmayın.

Config.yml’nin düzenlenmesi

config.yml‘ye aşağıdaki satırları ekledim:

languages:
 - en
 - tr

yine config.yml içinde header_pages‘e Türkçeleri ekledim:

header_pages:
 - blog.md
 - publish.md
headertr_pages:
  - blog.tr.md
  - publish.tr.md

Dil değiştirici

Bunları yaptıktan sonra siteyi çalıştırdım. Açılış sayfası İngilizce index açılıyordu. Şimdi bir değiştirici eklemem gerekiyordu.

Birkaç denemeden sonra anladım ki tek bir kodla her sayfayı değiştirmek mümkün değildi. İki günlük bir deneme yanılma sürecinin sonunda bir çözüm bulmayı başardım:

Aşağıdaki satırı headertr.html içinde {%- endfor -%}‘un altına </div>‘in üstüne ekledim.

<a href="{{ page.url | replace:'.tr.html','.html' }}">🇬🇧</a>

Bunu da header.html içinde aynı yere

<a href="{{ page.url | replace:'.html','.tr.html' }}">🇹🇷</a>

Bununla Türkçe ve İngilizce blog ve yayınlarım sayfaları arasında dolaşabiliyordum.

Buna rağmen index sayfalarım için farklı bir çözüm gerekliydi. Siteyi açtığımda adres satırında index.html yazmadığını fark ettim. Bu durumda dil değiştiricim bu sayfada düzgün çalışmayacaktır. Sonra baktım ki index sayfası için tek ihtiyacım doğrudan bir linkti. Bu nedenle aşağıdaki kodu, defindex.html içine yerleştirdim.

<a href="/index.tr.html">🇹🇷</a>

Tarayıcı diline göre sayfa

Sitem istediğim gibi çalışsa da hala bir eksiklik vardı. Açılış sayfam, tarayıcı dili Türkçe bile olsa her zaman İngilizce açılıyordu.

Siteyi açan kullanıcının tarayıcı dilini bularak ona göre açılış sayfası gösterecek bir kod bulmam gerekiyordu. Dil değiştiricide bana fikir veren Claude 3 Haiku burada da yardımıma yetişti.

Aşağıdaki javascript kodunu defindex.html içine {%- include head.html -%}‘in altında <body>‘nin üstüne yerleştirdim.

  <script> 
  var userLang = navigator.language || navigator.userLanguage; 
  if (userLang.startsWith('tr') && window.location.href.indexOf('index.html') === -1) 
  { window.location.href = '/index.tr.html'; } 
  </script>

Bu kod, adres satırında index.html yazmadığında çalışıyor. Böylelikle dil değiştiriciyle İngilizce açılış sayfasına gidildiğinde kod çalışmayacak ve kullanıcının tarayıcı dili Türkçe olsa da kullanıcı Türkçe açılış sayfasına geri yönlendirilmeyecekti.

Açılış sayfasına geri dönme probleminin çözümü

Jekyll websitemde Minima temayı kullanıyorum. Adım her sayfanın sol üst köşesinde görünüyor. Adıma tıkladığımda beni açılış sayfasına geri götürüyor ancak index.html yerine kök (/) sayfayı açıyor.

Tarayıcının varsayılan dili Türkçe olduğu durumda adıma tıkladığımda, kök sayfaya gittiğimden, javascript kodu beni Türkçe ana sayfaya yönlendiriyordu.

Bu durum, tarayıcının dili Türkçe’yken İngilizce blog ya da yayınlarım sayfasında dolaştığımda sorun çıkarıyordu.

Bu sorunu her üç header dosyasında, aşağıdaki satırı değiştirerek çözdüm:

<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

header.html ve headerin.html dosyalarında "/"‘ü "/index.html, headertr.html içinde ise "/index.tr.html olarak değiştirdim.

Bu değişiklik şunu sağlıyordu: Adıma tıkladığımda beni kök (/) yerine İngilizce sayfalarda index.html’ye, Türkçe sayfalarda index.tr.html’ye yönlendiriyordu. Kök dizine gitmediğim için tekrar yönlendirme sorunu ortadan kalkıyordu.

Blog sayfaları

Jekyll blog sayfalarını otomatik işlediğinden bunlarla uğraşmak biraz daha karmaşık olabilir ancak bunlara da benzer bir çözüm buldum.

Daha önce blog.md‘nin kopyasını oluşturup blog.md.tr adıyla kaydettiğimi söylemiştim. Böylelikle her dildeki blog sayfasında o dile ait gönderilerin linkleri görünecekti. Çünkü bütün gönderileri her iki dile çevirmeyeceğim.

Her dildeki sayfada o dile ait gönderilerin linklerinin görünmesi için blog.md ve blog.tr.md sayfalarına aşağıdaki kodları ekledim: {% for post in site.posts %}‘un altına blog.md‘de

{% if post.lang == 'en' %}

blog.tr.md‘de

{% if post.lang == 'tr' %}

satırlarını ekledim.

Blog sayfalarının daha karmaşık olduğunu söylemiştim. Diğer sayfalarda iki durum varken bunlarda üç durum var:

  • Türkçe gönderiler
  • İngilizce gönderiler
  • Çevirisi olmayan gönderiler

Bu durumun üstesinden gelmek için aşağıdaki adımları attım:

  • Blog gönderilerinde layout: post yazdığını gördüm. Yani düzeni post.html‘den alıyorlardı.
  • post.html de düzenini default.html‘den alıyordu.
  • default.html de header’ını yani sayfa linkleri ve dil değiştirici ile ilgili düzeni header.html‘den alıyordu.

Bu durumda üç farklı durum için üç farklı post.html lazımdı.

  • posttr.html ve posten.html adıyla kopyalarını oluşturdum.
  • Bunların layoutlarını bağlamak için 
    defpost.html
defposttr.html
defopsten.html

    adıyla default.html‘nin üç kopyasını oluşturdum.

  • defposttr‘yi headertr‘ye bağladım.
  • defposten‘i header‘a bağladım.
  • defpost için headpost.html adıyla bir kopya oluşturup, içinden dil değiştiriciyi sildim.

Bu düzenlemeden sonra çevirisi olan blog gönderilerimde dil değiştirici görünecek, olmayanlarda görünmeyecekti.

Tüm bunlardan sonra sonunda çok dilli bir Jekyll website oluşturmayı başarmıştım. Gelecekte siteyi geliştirmek için heyecanımı da kaybetmedim.

Herhangi bir konuda bir sorunuz varsa e-posta adresim üzerinden bana ulaşmaktan çekinmeyin.