JADE Nedir? Nasıl Kullanılır?

Jade kolay html yazımını sağlayan ve tag sonlarını kapatmayı unutma ya da hata yapma payını en aza indirgeyen bir node.js eklentisidir. Aynı zamanda html yazım hızınızı da arttırmakta. Tek yapmanız gereken Tab yapısına göre yazıma dikkat etmeniz.

Jade ve HTML arasındaki fark ile kolay kullanımı aşağıdaki resimde inceleyebilirsiniz.

Jade Nasıl Kullanılır?

Örnek yazım şeklini en üstteki görselde paylaşmıştım fakat bazı güzelliklerinden bahsetmeye devam edelim;

Php de olduğu gibi header ve footer sayfalarını farklı jade’lere yazarak diğer sayfalarınızın içine çağırmanız mümkün. Yani tek bir header.jade dosyası üzerinde yapacağınız değişiklik diğer html sayfalarınızda bulunan header bölümlerine otomatik olarak yansıtılacaktır. Böylelikle projenizde bulunan onlarca belki yüzlerce sayfadaki headerı değiştirmek zorunda değilsiniz. Aynı durum footer ve javascript dosyaları içinde geçerli.

Örnek olarak gösterecek olursak;

Metalarımızın ve header’ımızın bulunacağı ayrı ayrı iki farklı .jade dosyası hazırlayalım.

(meta.jade)

Metalarımızı şekildeki gibi jade yazım dilini kullanarak oluşturalım.

(header.jade)

Metalarımızı oluşturduğumuz gibi header’ımızıda basit bir yapıda oluşturduk. Burada dikkat etmeniz gereken kısım tab yapısına dikkat etmeniz olacaktır. aksi takdirde prepros programımız sağ alt köşede kırmızı yazılı hata ekranını gösterecektir. Doğru yazım uyguladıysanız ctrl+s kombinasyonu ile dosyanızı kaydettiğinizde yeşil yazılı ekran doğru yaptığınızı gösterecektir. Daha sonra 2 dosyamızı da çağıracağımız asıl sayfamızı yapacak olursak;

(anaSayfa.jade)

include meta.jade ve include header.jade komutlarıyla istediğimiz konumlara meta ve header dosyalarımızı dahil ettik. Bu sayfanın çıktısı ise bize;

(anaSayfa.html)

3 farklı jade dosyasıyla hazırladığımız ana sayfamızın çıktısı şekildeki gibidir. Diğer kullanmak istediğiniz fonksiyonlar için ve daha geniş çaplı kullanımlar için jade‘nin sitesini ziyaret edebilirsiniz.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.