<\/div>\n

Merhaba,<\/p>\n

D\u00fcnya de\u011fi\u015fiyor, iyi k\u00f6t\u00fc bir hale b\u00fcr\u00fcn\u00fcyor. Her ge\u00e7en g\u00fcn bir \u00f6ncekinden ya nesnel de\u011fi\u015fiklikle fark\u0131n\u0131 ortaya koyuyor ya da bamba\u015fka bir renk ile yeni hayata kald\u0131\u011f\u0131 noktadan devam ediyor. Tabiat\u0131n f\u0131trat\u0131nda bir matematik varken insan\u0131 hesaba kat\u0131nca kompleks ve \u00f6ng\u00f6r\u00fclemez bir vaziyet ortaya \u00e7\u0131k\u0131yor. \u0130nsan hayat\u0131 “bug\u00fcn < yar\u0131n” ba\u011f\u0131nt\u0131s\u0131yla yorumlamakta ve d\u00fcnlere, yar\u0131nlara nazaran beyhude bir anlam kat\u0131yor. D\u00fcnyan\u0131n girmi\u015f oldu\u011fu bu anlams\u0131z maratondan mesleklerde nasibini al\u0131yor. Hangisi olursa olsun icras\u0131nda d\u00fcnde kalan sanat\u00e7\u0131 \u00e7ok ge\u00e7meden bu g\u00fcnden antika muamelesi g\u00f6r\u00fcyor.<\/p>\n

Velhas\u0131l, bizler kendi icra etti\u011fimiz yaz\u0131l\u0131m sanat\u0131nda d\u00fcn\u00fc ge\u00e7ebilmek ve bu g\u00fcne bir nebze e\u015flik edebilmek i\u00e7in bu \u00e7abay\u0131 g\u00f6ze alm\u0131\u015f ve mesle\u011fimizin bir par\u00e7as\u0131 olarak ba\u015f\u0131ndan beri kabul etmi\u015f bulunmaktay\u0131z. \u015eimdi bu i\u00e7eri\u011fimizde zamanla HTML yap\u0131s\u0131ndaki devrimsel geli\u015fimin neticesi olan Node.js’de ki Express.js mod\u00fcl\u00fcn\u00fcn Pug yap\u0131s\u0131 \u00fczerine konu\u015fuyor olaca\u011f\u0131z.<\/p>\n

Pug Nedir?<\/h2>\n

HTML mimarisel olarak etiket a\u00e7\/kapat mant\u0131\u011f\u0131nda \u00e7al\u0131\u015fan bir yap\u0131sal \u00f6zelli\u011fe sahiptir.
\n\u00d6rne\u011fin a\u015fa\u011f\u0131daki kod blo\u011funu incelersek;<\/p>\n

\r\n<html>\r\n<head>\r\n    <title>\u00d6rnek HTML<\/title>\r\n<\/head>\r\n\r\n<body>\r\n    <p>Merhaba<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u015feklinde olu\u015fturulan html yap\u0131s\u0131 biz yaz\u0131l\u0131mc\u0131lar i\u00e7in a\u00e7\/kapat i\u015fleminde zaman maliyetini getirmektedir.<\/p>\n
Pug ise bu maliyeti olduk\u00e7a d\u00fc\u015f\u00fcrmekte ve html’e nazaran daha kolay bir yakla\u015f\u0131m sergilememizi sa\u011flamaktad\u0131r.
\nYukar\u0131daki \u00f6rne\u011fi Pug ile ger\u00e7ekle\u015ftirirsek e\u011fer;<\/p>\n
\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        p Merhaba\r\n<\/pre>\n\u015feklinde \u00e7al\u0131\u015fmam\u0131z yeterlidir. Bu g\u00f6rm\u00fc\u015f oldu\u011funuz yap\u0131 asl\u0131nda yukar\u0131daki ile birebir ayn\u0131 \u00f6zelli\u011fi sergilemektedir.<\/p>\n
Tabi ki de Pug yap\u0131s\u0131n\u0131n, yap\u0131sal ve i\u015flevsel kritik noktalar\u0131n\u0131 makalemizin devam\u0131nda gerekti\u011fi noktada konu\u015faca\u011f\u0131z lakin \u015fimdilik Pug’\u0131 tan\u0131mlamaya devam edelim.<\/p>\n
Pug’\u0131n genel \u00f6zellikleri;<\/p>\n
\nEski ad\u0131 Jade’dir.<\/li>\n
Dosyalar\u0131 birbirlerine nodule etmemize yarar.<\/li>\n
Layout’u extend ederek yani payla\u015fmam\u0131z\u0131 sa\u011flayarak farkl\u0131 dosyalarda kullanabilmemizi sa\u011flar.<\/li>\n
Klasik html’de olmayan programatik yap\u0131lar\u0131 kullanmam\u0131za imkan sa\u011flar;\n\nDe\u011fi\u015fkenler<\/li>\n
D\u00f6ng\u00fcler<\/li>\n
Kontrol Mekanizmalar\u0131<\/li>\n
Diziler vs…<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nPug Entegrasyonu<\/h2>\nPug’\u0131 kullanabilmek i\u00e7in projenize a\u015fa\u011f\u0131daki kodlarla entegrasyonu sa\u011flayabilirsiniz.<\/p>\n
\r\nnpm install pug --save\r\n<\/pre>\nPug Yap\u0131sal Kriterleri ve \u00d6zellikleri<\/h2>\nPug yap\u0131s\u0131n\u0131 olu\u015ftururken dikkat edilmesi gereken \u00f6zelliklere ve kurallara g\u00f6z atarsak e\u011fer;<\/p>\n
\n\nKural 1<\/strong>
\nPug ile olu\u015fturulacak html yap\u0131s\u0131nda bir nesne bir \u00fcstteki nesnenin dahili veya harici olup olmayaca\u011f\u0131n\u0131 kullan\u0131lan “tab” yahut “space” de\u011feri ile belirlemektedir.<\/p>\n\r\ndiv\r\np\r\n<\/pre>\nYukar\u0131daki \u015fekilde tan\u0131mlanan bir pug yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibi \u00e7\u0131kt\u0131 verecektir.
\n<div><\/div><p><\/p><\/code>
\nE\u011fer ki “p” etiketini “div” i\u00e7erisine almak istiyorsak;<\/p>\n
\r\n\/\/--space\r\ndiv\r\n p\r\n<\/pre>\ngibi ya da<\/p>\n
\r\n\/\/--tab\r\ndiv\r\n    p\r\n<\/pre>\n\u015feklinde \u00e7al\u0131\u015fmam\u0131z gerekecektir.
\n<div><p><\/p><\/div><\/code><\/p>\n
\u00d6rnek;<\/p>\n
\r\ndiv\r\n    p\r\n    p\r\nstrong\r\np\r\n    div\r\n        br\r\n        hr\r\ndiv\r\n<\/pre>\n\u00c7\u0131kt\u0131;
\n<div><p><\/p><p><\/p><\/div><strong><\/strong><p><div><br\/><hr\/><\/div><\/p><div><\/div><\/code>
\n\u015feklinde olacakt\u0131r.\n<\/li>\n
\nKural 2<\/strong>
\nHtml nesnelerine bir yaz\u0131\/de\u011fer\/veri yazarken iki t\u00fcrl\u00fc yaz\u0131m \u015fekli mevcuttur.<\/p>\n\n\nDirekt olarak nesnenin yan\u0131na tek sat\u0131rl\u0131k de\u011fer yaz\u0131labilir.<\/p>\n\r\ndiv\r\n    p x\r\n    p y\r\ndiv z\r\n<\/pre>\nBu kullan\u0131m\u0131n \u00e7\u0131kt\u0131s\u0131;
\n<div><p>x<\/p><p>y<\/p><\/div><div>z<\/div><\/code>\n<\/li>\n
\n\u0130lgili nesnenin bir sat\u0131r alt\u0131nda “|” karakterinin e\u015fli\u011finde de\u011fer yaz\u0131labilir.<\/p>\n\r\ndiv\r\n    |x\r\n    p \r\n        |y\r\n    p\r\n        |z\r\n    |w\r\ndiv p\r\n<\/pre>\n\u00c7\u0131kt\u0131;
\n<div>x<p>y<\/p><p>z<\/p>w<\/div><div>p<\/div><\/code>\n<\/li>\n<\/ol>\n<\/li>\n
\nKural 3<\/strong>
\nHtml etiketlerine attribute atarken a\u015fa\u011f\u0131daki \u015fekilde \u00e7al\u0131\u015f\u0131lmaktad\u0131r.<\/p>\n\r\ndiv(style="background-color:gray; width:350px; color:yellow;")\r\n    |Merhaba\r\n    p\r\n        |Nas\u0131ls\u0131n?\r\n    p(style="font-size:8px;") \u0130yi diyelim, iyi olsun...\r\n<\/pre>\n\u00c7\u0131kt\u0131;
\n<div style=\"background-color:gray; width:350px; font-color:yellow;\">Merhaba<p>Nas\u0131ls\u0131n?<\/p><p style=\"font-size:8px;\">\u0130yi diyelim, iyi olsun...<\/p><\/div><\/code>\n<\/li>\n<\/ul>\n
Pug Dosyas\u0131n\u0131 Render Etmek<\/h2>\nBir \u00f6nceki Node.js \u2013 Express Nedir?<\/a> ba\u015fl\u0131kl\u0131 makalemde Node.js’de Express.js’in ne oldu\u011fundan ve express.js ile sunucu olu\u015fturmaktan bahsetmi\u015ftik. \u0130\u015fte bizler Pug dosyalar\u0131n\u0131 ilgili makaledeki yap\u0131y\u0131 kullanarak render edece\u011fiz.<\/p>\n
Tabi \u00f6ncelikle projemizin ana dizininde “views” ad\u0131nda bir klas\u00f6r olu\u015ftural\u0131m ve ard\u0131ndan i\u00e7erisine herhangi bir isimde “.pug” uzant\u0131l\u0131 dosyam\u0131z\u0131 ekleyelim. \u00d6rne\u011fin “pug2.pug”<\/span><\/p>\n
\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        | Merhaba\r\n<\/pre>\nArd\u0131ndan “.js” uzant\u0131l\u0131 \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z dosyam\u0131zda a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmalar\u0131 ger\u00e7ekle\u015ftirelim;<\/p>\n\r\nconst express = require("express");\r\nconst app = express();\r\n\/\/\u0130lgili uygulamaya pug mtooru belirtilmektedir.\r\napp.set("view engine", "pug");\r\napp.get("\/", (request, response) => {\r\n    \/\/pug dosyas\u0131 response ile render edilmektedir.\r\n    response.render("pug2");\r\n});\r\napp.listen(5000, () => {\r\n    console.log("Yay\u0131n ba\u015flad\u0131...");\r\n});\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “app.set” fonksiyonuyla ilgili route’a pug motoru tan\u0131mlanmakta ve “response.render” fonksiyonu ile “pug2” isimli pug dosyam\u0131z render edilmektedir. “Peki hoca sistem “pug2” dosyas\u0131n\u0131n views klas\u00f6r\u00fc alt\u0131nda oldu\u011funu nereden biliyor?<\/strong><\/em>” diye sorma ihtimalinize nazaran pug’un varsay\u0131lan olarak view nesnelerini ana dizindeki “views” klas\u00f6r\u00fc alt\u0131nda aramakta oldu\u011funu s\u00f6ylemekte fayda var.<\/p>\nBu i\u015flem neticesinde ilgili pug dosyam\u0131z render edilmi\u015f olacakt\u0131r ve belirtilen portta belirtilen route adresinde \u00e7al\u0131\u015ft\u0131r\u0131lacakt\u0131r.
\n<\/a><\/p>\n
Pug Programatik \u00d6zellikleri<\/h2>\nPug yap\u0131s\u0131nda html’de olmayan programatik yap\u0131lar\u0131 kullanabilmekteyiz. \u015eimdi s\u0131ras\u0131yla bu yap\u0131lar\u0131 inceleyelim;<\/p>\n
\n\nRender Esnas\u0131nda Parametre Olarak De\u011fer G\u00f6nderme<\/strong>
\nPug dosyas\u0131n\u0131 render ederken parametre olarak belirli de\u011ferleri g\u00f6nderebiliriz.<\/p>\n\r\nconst express = require("express");\r\nconst app = express();\r\napp.set("view engine", "pug");\r\napp.get("\/", (request, response) => {\r\n    response.render("pug2", { degisken1: "de\u011fi\u015fken 1", degisken2: "de\u011fi\u015fken 2", degisken3: { x: 3, y: true } });\r\n});\r\napp.listen(5000, () => {\r\n    console.log("Yay\u0131n ba\u015flad\u0131...");\r\n});\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “render” fonksiyonunda ikinci parametreye de\u011ferlerimizi belirtmi\u015f olduk. Bu de\u011ferlere a\u015fa\u011f\u0131daki gibi ula\u015fabilmekteyiz;<\/p>\n
\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        p=degisken1\r\n        p=degisken2\r\n        p=degisken3.x\r\n<\/pre>\n\u015eimdi bu de\u011ferlere kar\u015f\u0131l\u0131k gelen paremetre isimlerinin yani de\u011fi\u015fkenlerin nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 inceleyelim.\n<\/li>\n
\nDe\u011fi\u015fken Tan\u0131mlama ve De\u011ferini \u00c7a\u011f\u0131rma<\/strong>
\nPug dosyalar\u0131nda de\u011fi\u015fken tan\u0131mlamak i\u00e7in “-(tire)” karakterinin kullan\u0131lmas\u0131 gerekmektedir.<\/p>\n\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        - let degisken1 = "de\u011fi\u015fken 1"\r\n        - let degisken2 = "de\u011fi\u015fken 2"\r\n        - let degisken3 = [3, 5, 7]\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “degisken1”, “degisken2” ve “degisken3” olmak \u00fczere de\u011fi\u015fkenlerimiz tan\u0131mlanm\u0131\u015ft\u0131r. Bu tan\u0131mlamalar\u0131n sonuna “;” karakterinin koyulmas\u0131na gerek yoktur.<\/p>\n
Tan\u0131mlanan de\u011fi\u015fkenleri kullanabilmek i\u00e7in iki farkl\u0131 yol mevcuttur;<\/p>\n
\n\nDe\u011fi\u015fkenlerin de\u011ferini “=” operat\u00f6r\u00fc ile direkt olarak getirebilmekteyiz.<\/p>\n\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        - let degisken1 = "de\u011fi\u015fken 1"\r\n        - let degisken2 = "de\u011fi\u015fken 2"\r\n    div= degisken1\r\n    div\r\n        =degisken2\r\n<\/pre>\n<\/li>\n\nE\u011fer ki de\u011fi\u015fken de\u011feri metinsel ifadelerin aras\u0131na yazd\u0131r\u0131lacaksa “#{degiskenadi}” kal\u0131b\u0131 kullan\u0131lmal\u0131d\u0131r.<\/p>\n\r\nhtml\r\n    head\r\n        title \u00d6rnek HTML\r\n    body\r\n        - let degisken1 = "de\u011fi\u015fken 1"\r\n        - let degisken2 = "de\u011fi\u015fken 2"\r\n        - let degisken3 = [3, 5, 7]\r\n    div degisken1 de\u011fi\u015fkeninin de\u011feri = #{degisken1}\r\n    div\r\n        |degisken2 de\u011fi\u015fkeninin de\u011feri = #{degisken2}\r\n<\/pre>\n<\/li>\n<\/ol>\n<\/li>\n\nPug Dosyalar\u0131n\u0131 Include Etmek<\/strong>
\nBir pug dosyas\u0131n\u0131 bir ba\u015fka pug dosyas\u0131 i\u00e7erisine a\u015fa\u011f\u0131daki gibi include edebiliriz.<\/p>\n\r\n\/\/-head.pug\r\nhead\r\n    title Include\r\n<\/pre>\n\r\n\/\/-body.pug\r\nbody\r\n    |Merhaba\r\n<\/pre>\n\r\n\/\/-pug2.pug\r\nhtml\r\n    include head\r\n    include body\r\n<\/pre>\n<\/li>\n\nKontrol Yap\u0131lar\u0131n\u0131 Kullanma(If – Else If- Else)<\/strong>
\nIf – Else If – Else kal\u0131b\u0131n\u0131 a\u015fa\u011f\u0131daki gibi kolayca kullanabilmekteyiz.<\/p>\n\r\nbody\r\n    div\r\n        - let sayi = 12\r\n        if !sayi\r\n            |Say\u0131 de\u011fi\u015fkeni yok\r\n        else if sayi < 10\r\n            |Say\u0131 de\u011fi\u015fkeninin de\u011feri 10'den k\u00fc\u00e7\u00fckt\u00fcr. Say\u0131 : #{sayi}\r\n        else\r\n            |Say\u0131 de\u011fi\u015fkeninin de\u011feri 10'a e\u015fit ya da b\u00fcy\u00fckt\u00fcr. Say\u0131 : #{sayi}\r\n<\/pre>\nBurada dikkat edilmesi gereken husus, ‘if – else if – else’ yap\u0131s\u0131n\u0131n hangi html nesnesi i\u00e7erisinde kullan\u0131ld\u0131\u011f\u0131d\u0131r. Ayriyetten her bir kontrol sonras\u0131 yap\u0131lan i\u015flem bir “tab” ya da “space” i\u00e7eride ger\u00e7ekle\u015ftirilmelidir.\n<\/li>\n
\nD\u00f6ng\u00fc Kullan\u0131m\u0131<\/strong>
\nPug dosyalar\u0131nda genellikle “each” d\u00f6ng\u00fcs\u00fc i\u015fimizi g\u00f6recektir.
\n\u00d6rnek 1;<\/p>\n\r\nbody\r\n    ul\r\n        each val in [1, 3, 5, 7, 9]\r\n            li= val\r\n<\/pre>\n\u00d6rnek 2;<\/p>\n
\r\nbody\r\n    ul\r\n        -let array = [1, 3, 5, 7, 9]\r\n        each val in array\r\n            li= val\r\n<\/pre>\n\u00d6rnek 3;<\/p>\n
\r\nbody\r\n    ul\r\n        -let array = "Merhaba D\u00fcnya"\r\n        each val in array\r\n            li= val\r\n<\/pre>\nE\u011fer ki “each” d\u00f6ng\u00fclerinde elemanlar\u0131n index numaras\u0131n\u0131 kullanmak isterseniz a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015f\u0131lmas\u0131 gerekmektedir;<\/p>\n
\r\nbody\r\n    ul\r\n        -let array = [1, 3, 5, 7, 9]\r\n        each val, index in array\r\n            li= index + "- " + val\r\n<\/pre>\nE\u011fer ki ilgili dizide veri kontrol\u00fc yapmak istiyorsan\u0131z “each” d\u00f6ng\u00fcs\u00fcne \u00f6zel “else” yap\u0131s\u0131n\u0131 kullanabilirsiniz.<\/p>\n
\r\nbody\r\n    ul\r\n        -let array = []\r\n        each val in array\r\n            li= val\r\n        else\r\n            li Veri Yok\r\n<\/pre>\n“each” d\u00f6ng\u00fcs\u00fcne nazaran “while” d\u00f6ng\u00fcs\u00fcn\u00fcde kullanmak isterseniz a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyiniz.<\/p>\n
\r\nbody\r\n    ul\r\n        - let sayac = 0\r\n        while sayac < 100\r\n            li= sayac++\r\n<\/pre>\n<\/li>\n<\/ul>\nEvet, bu i\u00e7eri\u011fimiz ile Pug yap\u0131s\u0131 \u00fczerine g\u00fczel bir giri\u015f yapt\u0131\u011f\u0131m\u0131z\u0131 ve olaya tam teferruatl\u0131 sa\u011flam temeller att\u0131\u011f\u0131m\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcyorum. \u0130\u00e7eri\u011fimizde genel olarak bilinmesi gerekenleri sundu\u011fumuzdan dolay\u0131 bundan sonraki Pug ile ilgili kalan di\u011fer konular\u0131 kendilerine has i\u00e7eriklerde ele almay\u0131 tercih ediyorum.<\/p>\n
O halde sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere diyelim…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, D\u00fcnya de\u011fi\u015fiyor, iyi k\u00f6t\u00fc bir hale b\u00fcr\u00fcn\u00fcyor. Her ge\u00e7en g\u00fcn bir \u00f6ncekinden ya nesnel de\u011fi\u015fiklikle fark\u0131n\u0131 ortaya koyuyor ya da bamba\u015fka bir renk ile yeni hayata kald\u0131\u011f\u0131 noktadan devam ediyor. Tabiat\u0131n f\u0131trat\u0131nda bir...<\/p>\n","protected":false},"author":1,"featured_media":8746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2495,2145,2499],"tags":[2502,2497,2147,2501,2500,2506,2504,2507,2509,2505,2508,2503,2510],"class_list":["post-8688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-express-js","category-node-js","category-pug","tag-express-pug","tag-express-js","tag-node-js","tag-node-js-pug","tag-pug","tag-pug-conditionals","tag-pug-degiskenler","tag-pug-donguler","tag-pug-each","tag-pug-if-else","tag-pug-loops","tag-pug-nedir","tag-pug-while"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8688"}],"version-history":[{"count":55,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8688\/revisions"}],"predecessor-version":[{"id":8747,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8688\/revisions\/8747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8746"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}