<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Pug paketinde Layout yap\u0131s\u0131n\u0131n Block kullan\u0131larak nas\u0131l in\u015fa edildi\u011fini ele alaca\u011f\u0131z.<\/p>\n
\u0130lk olarak ana dizinimizde bulunan “views” klas\u00f6r\u00fcne “layout.pug” ad\u0131nda bir dosya ekleyelim. Layout’ta sitemizin genel tasar\u0131m\u0131n\u0131 tutaca\u011f\u0131z lakin d\u00fczeni olu\u015ftururken micro y\u00f6netimi sa\u011flayabilmek i\u00e7in site tasar\u0131m\u0131n\u0131 m\u00fcmk\u00fcn mertebe k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lmemiz gerekecektir. Bu i\u015flemide “block” yap\u0131s\u0131n\u0131 kullanarak icra edece\u011fiz.<\/p>\n
\r\n\/\/- layout.pug\r\nhtml\r\n    head\r\n        block header\r\n    body\r\n        block content\r\n        block footer\r\n<\/pre>\nYukar\u0131daki “layout.pug” dosyas\u0131na g\u00f6z atarsan\u0131z e\u011fer sitenin ana tasar\u0131m \u015fablonu olu\u015fturulmu\u015f ama opsiyonel k\u0131s\u0131mlar\u0131 “block” keyword\u00fc ile bu layout’tan t\u00fcreyecek s\u0131n\u0131flara b\u0131rak\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Layout’tan t\u00fcreyen sayfalarda ise a\u015fa\u011f\u0131da oldu\u011fu gibi ilgili layout sayfas\u0131 “extends” edilmelidir. Ard\u0131ndan block k\u0131s\u0131mlar\u0131 yine “block” keyword\u00fc ile \u00e7a\u011fr\u0131l\u0131p istenildi\u011fi \u015fekilde doldurulmaktad\u0131r.<\/p>\n
\r\n\/\/-home.pug\r\nextends layout\r\nblock header\r\n    title Home Sayfas\u0131\r\nblock content\r\n    div\r\n        strong Merhaba\r\n        p Buras\u0131 Home sayfas\u0131d\u0131r.\r\nblock footer\r\n    span\r\n        |Alt B\u00f6l\u00fcm | Home\r\n<\/pre>\n\r\n\/\/-about.pug\r\nextends layout\r\nblock header\r\n    title About Sayfas\u0131\r\nblock content\r\n    div\r\n        strong Merhaba\r\n        p Buras\u0131 About sayfas\u0131d\u0131r.\r\nblock footer\r\n    span\r\n        |Alt B\u00f6l\u00fcm | Footer\r\n<\/pre>\n\r\n\/\/-contact.pug\r\nextends layout\r\nblock header\r\n    title Contact Sayfas\u0131\r\nblock content\r\n    div\r\n        strong Merhaba\r\n        p Buras\u0131 Contact sayfas\u0131d\u0131r\r\nblock footer\r\n    span\r\n        |Alt B\u00f6l\u00fcm | Contact\r\n<\/pre>\nBu dosyalar haz\u0131rland\u0131ktan sonra script \u00fczerinden her pug dosyas\u0131na \u00f6zel route tan\u0131mlan\u0131p ili\u015fkili dosyalar render edilmelidir.<\/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("home");\r\n});\r\napp.get("\/home", (request, response) => {\r\n    response.render("home");\r\n});\r\napp.get("\/about", (request, response) => {\r\n    response.render("about");\r\n});\r\napp.get("\/contact", (request, response) => {\r\n    response.render("contact");\r\n})\r\napp.listen(5000, () => {\r\n    console.log("Yay\u0131n ba\u015flad\u0131...");\r\n});\r\n<\/pre>\nOlu\u015fturdu\u011fumuz sunucuda dinledi\u011fimiz 5000 portunu tetiklersek e\u011fer a\u015fa\u011f\u0131daki gibi sonu\u00e7lar al\u0131nacakt\u0131r.<\/p>\n
home.pug<\/strong><\/em> i\u00e7in;
\n<html><head><title>Home Sayfas\u0131<\/title><\/head><body><div><strong>Merhaba<\/strong><p>Buras\u0131 Home sayfas\u0131d\u0131r.<\/p><\/div><span>Alt B\u00f6l\u00fcm | Home<\/span><\/body><\/html><\/code>
\nabout.pug<\/strong><\/em> i\u00e7in;
\n<html><head><title>About Sayfas\u0131<\/title><\/head><body><div><strong>Merhaba<\/strong><p>Buras\u0131 About sayfas\u0131d\u0131r.<\/p><\/div><span>Alt B\u00f6l\u00fcm | Footer<\/span><\/body><\/html><\/code>
\ncontact.pug<\/strong><\/em> i\u00e7in;
\n<html><head><title>Contact Sayfas\u0131<\/title><\/head><body><div><strong>Merhaba<\/strong><p>Buras\u0131 Contact sayfas\u0131d\u0131r<\/p><\/div><span>Alt B\u00f6l\u00fcm | Contact<\/span><\/body><\/html><\/code><\/p>\n
\u015euana kadar yapm\u0131\u015f oldu\u011fumuz \u00e7al\u0131\u015fmada block keywordleri layout’ta ki \u015fablonu ezerek bar\u0131nd\u0131rd\u0131klar\u0131 i\u00e7eri\u011fi ilgili alana eklemektedirler.<\/p>\n
S\u00f6zgelimi;<\/p>\n
\r\nhtml\r\n    head\r\n        block header\r\n            meta(description = `${title} Sayfas\u0131`)\r\n    body\r\n        block content\r\n        block footer\r\n<\/pre>\nYukar\u0131daki layout’ta g\u00f6rd\u00fc\u011f\u00fcn\u00fcz header blo\u011funda varsay\u0131lan olarak bir meta etiketi tan\u0131mlanm\u0131\u015ft\u0131r. E\u011fer ki bu layout \u015fuana kadar bildi\u011fimiz \u015fekilde kullan\u0131l\u0131rsa;<\/p>\n
\r\n\/\/-home.pug\r\nextends layout\r\n\r\nblock header\r\n    title Home Sayfas\u0131\r\nblock content\r\n    div\r\n        strong Merhaba\r\n        p Buras\u0131 Home sayfas\u0131d\u0131r.\r\nblock footer\r\n    span\r\n        |Alt B\u00f6l\u00fcm | Home\r\n<\/pre>\nheader blo\u011fu komple ezilmekte ve yerine pug sayfam\u0131zda belirtilen ilgili blo\u011fa ait veri bas\u0131lmaktad\u0131r. Dolay\u0131s\u0131yla render sonucu elde edilen sonu\u00e7 a\u015fa\u011f\u0131daki gibi olacakt\u0131r;
\n<html><head><title>Home Sayfas\u0131<\/title><\/head><body><div><strong>Merhaba<\/strong><p>Buras\u0131 Home sayfas\u0131d\u0131r.<\/p><\/div><span>Alt B\u00f6l\u00fcm | Home<\/span><\/body><\/html><\/code>
\n\u0130\u015fte b\u00f6yle durumlarda, layout’ta ki varsay\u0131lan \u015fablonlar\u0131n yan\u0131na pug dosyas\u0131ndan gelen yap\u0131lar\u0131 eklemek istiyorsan\u0131z “append” keyword\u00fcn\u00fc a\u015fa\u011f\u0131daki gibi kullanman\u0131z yeterlidir.<\/p>\n
\r\nextends layout\r\n\r\nblock append header\r\n    title Home Sayfas\u0131\r\nblock content\r\n    div\r\n        strong Merhaba\r\n        p Buras\u0131 Home sayfas\u0131d\u0131r.\r\nblock footer\r\n    span\r\n        |Alt B\u00f6l\u00fcm | Home\r\n<\/pre>\nBu durumda elde edilen \u00e7\u0131kt\u0131;
\n<html><head><meta description=\"Home Sayfas\u0131\"\/><title>Home Sayfas\u0131<\/title><\/head><body><div><strong>Merhaba<\/strong><p>Buras\u0131 Home sayfas\u0131d\u0131r.<\/p><\/div><span>Alt B\u00f6l\u00fcm | Home<\/span><\/body><\/html><\/code>
\n\u015feklinde olacakt\u0131r.<\/p>\n
Tabi yukar\u0131daki son \u00f6rnekte script dosyas\u0131ndan “title” parametresini g\u00f6ndermeyi unutmuyoruz \ud83d\ude09<\/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("home", { title: "Home" });\r\n});\r\napp.get("\/home", (request, response) => {\r\n    response.render("home", { title: "Home" });\r\n});\r\napp.get("\/about", (request, response) => {\r\n    response.render("about", { title: "About" });\r\n});\r\napp.get("\/contact", (request, response) => {\r\n    response.render("contact", { title: "Contact" });\r\n})\r\napp.listen(5000, () => {\r\n    console.log("Yay\u0131n ba\u015flad\u0131...");\r\n});\r\n<\/pre>\nVelhas\u0131l, Pug paketinde block keyword\u00fc ile layout yap\u0131s\u0131n\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 incelemi\u015f olduk. Faydalanman\u0131z dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Pug paketinde Layout yap\u0131s\u0131n\u0131n Block kullan\u0131larak nas\u0131l in\u015fa edildi\u011fini ele alaca\u011f\u0131z. \u0130lk olarak ana dizinimizde bulunan “views” klas\u00f6r\u00fcne “layout.pug” ad\u0131nda bir dosya ekleyelim. Layout’ta sitemizin genel tasar\u0131m\u0131n\u0131 tutaca\u011f\u0131z lakin d\u00fczeni olu\u015ftururken...<\/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":[2511,2513,2512],"class_list":["post-8749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-express-js","category-node-js","category-pug","tag-layout-ve-block-yapisi","tag-pug-block","tag-pug-layout"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8749","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=8749"}],"version-history":[{"count":15,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8749\/revisions"}],"predecessor-version":[{"id":8765,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8749\/revisions\/8765"}],"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=8749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}