Bir önceki anlatımda Jekyll üzerinden default isimli bir layout oluşturup index.html sayfamızı bu layout’a bağlamıştık.

Şimdi aynı layout’a bağlı ikinci bir sayfa oluşturacağız ve bu iki sayfa arasında navigasyonu sağlayacağız.

Aynı zamanda Baseurl, Include gibi Jekyll’ın ek özelliklerini, sayfalarımıza CSS eklemeyi ve If Yapısının nasıl kullanılabileceğini göreceğiz.

Jekyll : Sayfalar Arası Geçiş

Proje klasörüne “index.html” gibi yeni bir sayfa oluşturmakla başlıyoruz.

Adı “news.html” olsun. İçeriği de aşağıdaki gibi olacak:

Şimdi default içerisine girip oraya bir navigasyon ekleyelim.
default.html’in navigasyon eklenmiş hali:

Kaydedip localhost üzerinde çalıştıralım: jekyll serve --watch --baseurl ""

Navigasyon oluşturuldu ve şimdi iki siteye birden ulaşabiliyoruz.

Jekyll : Baseurl

index.html ve news.html olmak üzere iki adet web sayfası oluşturduk.

Bunlar arasında default.html’de aşağıdaki gibi navigasyonu sağlıyorduk.

Localhost’da baseurl’imiz boştu. Dosyalarımız domain’in root’unda tutuluyordu.

Github içerisinde ise dosyalarımız repository’nin adıyla bir klasördeler.

Bu ileride birtakım problemlere sebebiyet verebilir.

Bu problemi çözmek amacıyla navigasyonumuzu güncelleyeceğiz.

Baseurl’imiz _config.yml içerisinde yer alıyordu.

Jekyll bizim için bu doğru url’i linkler içerisine yerleştirebilir.

Bu linkleri aşağıdaki gibi güncelliyoruz:

  •  git add . ile değişiklikleri git içerisine ekliyoruz.
  •  git commit -m "message" ile commit oluşturuyoruz.
  •  git push origin gh-pages ile değişiklikleri yolluyoruz.

Bundan böyle sitelerimizde link verirken linkleri bu şekilde almalıyız.
Resimler, css dosyaları diğer html dosyaları için de {{site.baseurl}} koyuyoruz.

Jekyll : Includes

Jekyll include’ları layoutlar ile benzerdir. Bir sayfa içerisinde birden fazla yerde bir kod parçasını paylaşmamızı sağlar.

Navigation’un hem sitenin altında hem de üstünde yer almasını istiyoruz diyelim.
default.html’i aşağıdaki gibi düzenleyelim:

Görüldüğü üzere navigasyon hem header hem de footer içerisinde tekrar ediyor.

Ama Jekyll’ın nihai amacının tekrarı azaltmak olduğunu düşünürsek bu biraz gereksiz oluyor.

Yapacağımız şey ise tekrar eden kısmı alıp include adı verilen bir şey içerisine koymak olacak. Bunun için “_includes” adıyla yeni bir klasör oluşturup içerisine nav.html adında bir dosya oluşturuyoruz. İçerisine de navigasyonu yapıştırıyoruz.

Daha sonra default.html’e dönüp navbar’ı birden fazla yere {%raw%}{% include nav.html %}{%endraw%}
ile ekleyeceğiz.

Jekyll “_includes” klasöründe nav.html’i bulup buralara yerleştirecek.

Bu durumda ben nav içerisine yeni bir adres eklemek istediğimde bunu bir yerde yapmam yeterli olacak.

Kaydedip localhost üzerinde aşağıdaki gibi çalıştıralım:

jekyll serve --watch --baseurl ""

  • git add . ile değişiklikleri git içerisine ekliyoruz.
  • git commit -m "message" ile commit oluşturuyoruz.
  • git push origin gh-pages ile değişiklikleri yolluyoruz.

Jekyll : CSS Eklemek

Şimdi Jekyll içerisine nasıl css ekleyeceğimiz ile başlayalım.

Ana dizin içerisine css adında bir klasör açıp içerisine common.css isminde bir dosya oluşturalım.

İçine aşağıdaki gibi bir css ekleyelim:

default.html içerisinde head tagları arasına standart bağlantıyı yazalım.

title tagından hemen sonra aşağıdaki satırı ekleyeceğiz.

Gördüğünüz üzere normal css eklemekten tek farkı baseurl’i _config.yml içerisinden alıyor olması.

Jekyll : If Kullanmak

Navigasyonda seçtiğimiz seçili kısmın arkasının aşağıdaki gibi sarı olmasını istiyoruz diyelim.

Bunu yapmak için içinde bulunduğumuz sayfayı ayırt etmemiz gerekiyor.

Bunun için _includes içerisindeki nav.html‘ye geri dönelim.

İçeriği şöyleydi:

Buradaki a tagına bir class ekleceğiz.

active class’ını aşağıdaki gibi css altında common.css‘e ekleyelim.

Aşağıdaki gibi yazılırsa active class’ı yalnızca seçili sayfada etkin olur.

Bu eğer page.url / yani index.html‘ye eşitse class yerine active yaz demektir.
nav.htmlnin içeriğini aşağıdaki gibi güncelleyelim.

ul tagına iki tane class ekledik. Bunlardan {{include.navclass}} bir parametre.

Bu parametre default.html tarafından aşağıdaki gibi gönderilecek.

Burada nav.html çağırılırken navclass adında bir parametre gönderiliyor.

Aşağıda iki ayrı class aldıkları görülüyor:

Üstteki nav’ın daha büyük olması ve yanyana görünmeleri için css altındaki common.css’e aşağıdaki satırları ekliyoruz:

Sonuç olarak yukarıdaki nav daha büyük görünüyor:

Bu şekilde include sırasında parametre gönderebiliyoruz.

Kaynak: