NodeJS Pug Nedir?

NodeJS Pug, bir şablon motorudur. Eğer NPM sayfasına gitmek isterseniz buraya tıklayabilirsiniz. Yazımı ve syntaxları HTML’den farklı olmasına rağmen HTML ile aynı işlevdedir.

Örnek olarak Pug’da “< ve >” işaretleri bulunmaz. HTML kodlarını Pug’a hızlıca çevirmek için bu siteye bakabilirsiniz.

Aşağıdaki resimlerde HTML ve Pug syntax farkını görebilirsiniz.

Aynı kodların Pug hali ise aşağıdaki resimdedir.

Neden Pug?

Geçen gün bir NodeJS projesi geliştirirken normalde kullandığım “handlebars” şablon motorunun oldukça yavaş olduğunu fark ettim. Ayrıca birkaç yerde de sorun yaşadım. Bu yüzden yeni bir arayışa geçtim. Bunun sonucu olarak “Pug” adında bir şey buldum.

Dosyalarımızı “pug” uzantılı olarak kaydedip tarayıcıda görüntüleyebiliyoruz. Neden direk olarak HTML kullanmıyoruz diye düşünmüş olabilirsiniz. Bunun sebebi, HTML’de kodları bölmek mümkün değil yapılsa bile çok uğraş verilmesi gerekiyor. Bu yüzden bize temamızı bölmek için şablon motorları gerekiyor. Ek olarak Pug’da HTML aksine if-else yapısı kullanılabiliyor.

Ya da veri tabanından bilgi çekip onu yazdırmamız gereken yerlerde HTML kullanamayız. Bu yüzden şablon motorları şart.

NodeJS Pug Nasıl Kurulur?

Öncelikle terminalimize gelip

kodlarını yazıyoruz. Daha sonra projenize dahil etmek için

kodlarını projemize ekliyoruz. Böylelikle “views” klasörü içerisine eklediğimiz tüm pug uzantılı dosyalara kolaylıkla erişebiliyor ve projemize eklemiş oluyoruz.

NodeJS Pug Layouts

Temayı bölmekten bahsetmiştim peki nedir bu tema bölmek?

NodeJS’de Pug kullanmamın en temel amacı aslında sayfayı parçalara bölmek. Örneğin: ana sayfa, hakkımda, iletişim, blog şeklinde 4 adet sayfam var. Bu sayfaların üst kısmında bulunan header ile alt kısmında bulunan footer tüm sayfalarda aynı. Ben bu yüzden sayfamın üst ve alt kısmının kodlarını “main-layout.pug” isimli bir dosyaya kaydediyorum.

Daha sonra header ve footer olması gereken yerde “main-layout.pug” içerisinde bulunan kodları projeme tek komut satırı ile dahil ediyorum. Kafanız mı karıştı? O zaman resimlerle anlatayım.

Yukarıdaki gibi bir ana sayfam var.

Bu şekilde bir hakkımda sayfam var. İki resimde de görüldüğü gibi bu sayfaların header yani yukarıda yer alan turuncu renkli “HOME , ABOUT , BLOG , CONTACT” yazan yerleri aynı.

Aynı şekilde aşağıda yer alan sosyal ikonları da tamamen aynı. Tüm sayfalarda iki kısım statik olarak bulunuyor.

Eğer ben her sayfada header ve footer kodlarını yazarsam sayfaların yüklenmesi aşırı yavaşlayacak, dosya boyutları büyüyecektir. O yüzden ben gelip “main-layout.pug” isimli bir dosya oluşturuyorum. Ve bu dosyanın içine header ve footer kodlarını yazıyorum. Dediğim gibi tüm sayfalarda header ve footer sabit. Sabit olmayan yerleri eklemek için “block” yöntemini kullanacağım, şu an onu söyleyerek kafanızı daha fazla karıştırmak istemiyorum.

Daha sonra blog sayfamı oluşturmak için “blog.pug” isimli bir dosya oluşturuyorum. Bu sayfa aşağıdaki gibi olacak.

Bu yüzden “blog.pug” dosyama gidip öncelikle header ve footerı dahil ediyorum. Bunu yapmak için

kodunu yazıyorum. Böylelikle “main-layout” dosyamda parçalara böldüğüm header ve footerı dahil ettim.

Eğer ben araya hiçbir dinamik içeriği eklemezsem sayfam aşağıdaki gibi görünür.

Ancak ben “block” metodunu kullanarak sayfamın dinamik içeriğini dahil ediyorum.

Sonuç olarak istediğim blog sayfası görünümüne ulaşıyorum.

“NodeJS Pug Nedir?” yazım buraya kadardı, hoşunuza gittiyse yorum atmayı ve paylaşmayı unutmayın.

NodeJS ile ilgili diğer yazılarımı okumak için buraya tıklayabilirsiniz.