19 Temmuz 2013 Cuma

Jade ile Master Page ve Tekrar Kullanılabilir Yapılar.

Gönderen no at Cuma, Temmuz 19, 2013 Etiketler jade , node js , template , template engine

Jade ile şablon yapısı yapmak, master page'ler oluşturmak sayfaları birbiri içinde tekrar kullanılabilir hale getirmek çok kolay.

Block layout yapısı ile master page tanımlaması yapmak şablonlar ve tekrar kullanılabilir sayfalar oluşturmak oldukça pratik.

Örnek olarak bir master page ve bu template'i kullanan bir sayfa düzenlemesi yapalım.

Yükleniyor...

Yukarıda tanımladığımız template dosyasında head ve content olarak iki adet block belirleyerek genel layout'u oluşturduk. Belirlediğimiz bu blockların içeriği my-layout templatini kullanan sayfalarda değiştirlebilecektir.Bunun dışında kalan özelliklerin hepsi template dosyasından gelecektir.

Şimdi bu template'i kullanan bir sayfa yazalım

Yükleniyor...

Yukarıdaki template dosyası ise daha önce oluşturduğumuz "my-layout" templatini extend edip içerisinde tanımlanan head ve content blocklarının içeriğini tekrar yazmaktadır.

Peki tüm içeriği yeniden yazmak yerine ekleme yapmak istiyorsak ne yapmalıyız. Örneğin template sayfasında yer alan css linklerine veya scriptlere sadece görüntülenen sayfada ekleme yapalım.

Yükleniyor...

Yukarıdaki append komutu template içerisinde yer alan kodlarımızı alıp yeni kodlarımızıda ekleyerek sayfa görüntülemesini gerçekleştirilmesini sağlar. "prepend" komutu ise aynı mantıkla çalışan "append" komutunun aksine yeni tanımlanan kod blogunu template'ten gelen kod blogunun başına ekler.

include komutu ise jade içerisinde tekrar kullanılabilir yapılara imkan sağlamaktadır. Örneğin listeleme yapısını ele alalım. Bir web uygulaması içerisinde listeleme yapısı sık kullanılan farklı sayfalarda görüntülenmesi gereken bir yapıdır. Arama sonuçlarının listelenmesi kullanıcıya ait verilerin listelenmesi vb.

Örnek olarak yapacağımız yapıda sitemizde yer alan makalelerin listelenmesi, arama sonucunda makalelerin listelenmesini, kullanıcıya ait makalelerin listelenmesini tek bir listeleme sayfası ile gerçekleştirelim.

Yapmamız gereken listeleme sayfasını oluşturmak ve bu yapıyı çağıracak olan farklı sayfalarda "include" komutu ile aynı yapıyı tekrar kullanılabilir hale getirmek.

makaleListesi.jade isimli bir dosya oluşturalım

Yükleniyor...

Daha sonra bu oluşturduğumuz yapıyı search.jade, profile.jade ve index.jade sayfalarında include komutuyla kullanalım.

Yükleniyor...

Örnek Kodlar:https://github.com/nodejstr/Jade-Examples