{"id":16133,"date":"2024-01-21T06:08:15","date_gmt":"2024-01-21T02:38:15","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/"},"modified":"2024-01-21T06:08:15","modified_gmt":"2024-01-21T02:38:15","slug":"%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/","title":{"rendered":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc Handlebars: Templating Engine \u0628\u0631\u0627\u06cc Node\/JavaScript\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 Handlebars \u0628\u0627 Node.js \u0648 Express \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 Handlebars \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc &#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d9%85%d8%b9%d8%b1%d9%81%db%8c\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d9%85%d9%88%d8%aa%d9%88%d8%b1_%d9%82%d8%a7%d9%84%d8%a8_%da%86%db%8c%d8%b3%d8%aa%d8%9f\" >\u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%af%d8%b3%d8%aa%d9%87_%d8%af%d8%b3%d8%aa%d9%87\" >\u062f\u0633\u062a\u0647 \u062f\u0633\u062a\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_handlebars_%d8%a8%d8%a7_nodejs\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Handlebars \u0628\u0627 Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d9%88%db%8c%da%98%da%af%db%8c_%d9%87%d8%a7%db%8c_%d8%b2%d8%a8%d8%a7%d9%86_handlebars\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u0628\u0627\u0646 Handlebars<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%a7%d9%86%d8%aa%d9%82%d8%a7%d9%84_%d9%be%d8%a7%d8%b1%d8%a7%d9%85%d8%aa%d8%b1%d9%87%d8%a7_%d8%a8%d9%87_%d9%82%d8%a7%d9%84%d8%a8_%d9%87%d8%a7\" >\u0627\u0646\u062a\u0642\u0627\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0628\u0647 \u0642\u0627\u0644\u0628 \u0647\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%b4%d8%b1%d8%a7%db%8c%d8%b7\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0631\u0627\u06cc\u0637<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%ad%d9%84%d9%82%d9%87_%d9%87%d8%a7\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0644\u0642\u0647 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%ac%d8%b2%d8%a6%db%8c\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0632\u0626\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d8%b3%d8%a7%d8%ae%d8%aa%d9%86_%db%8c%da%a9_helper_%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c\" >\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 Helper \u0633\u0641\u0627\u0631\u0634\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-handlebars-templating-engine-%d8%a8%d8%b1%d8%a7%db%8c-node-javascript%d8%af%d8%b1-%d8%a7%db%8c%d9%86-%d9%85%d9%82%d8%a7%d9%84%d9%87-%d9%82%d8%b5%d8%af\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 8<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b9%d8%b1%d9%81%db%8c\"><\/span>\u0645\u0639\u0631\u0641\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 Handlebars \u0628\u0627 Node.js \u0648 Express \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 Handlebars \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f <em>\u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/em> \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 (SSR)<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f \u0631\u0648\u0634 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Handlebars \u0628\u0627 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/expressjs.com\/\">Express.js<\/a> \u0686\u0627\u0631\u0686\u0648\u0628 \u0648 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0645\u06a9 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u067e\u0648\u06cc\u0627.  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.<\/p>\n<h2 id=\"whatisatemplateengine\"><span class=\"ez-toc-section\" id=\"%d9%85%d9%88%d8%aa%d9%88%d8%b1_%d9%82%d8%a7%d9%84%d8%a8_%da%86%db%8c%d8%b3%d8%aa%d8%9f\"><\/span>\u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a\u061f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u062f\u0647\u0647 90 \u06a9\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0628\u0647 \u062f\u0646\u06cc\u0627 \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u060c \u0628\u06cc\u0634\u062a\u0631 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0639\u0644\u0645\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0646\u062a\u0634\u0627\u0631 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062d\u0642\u06cc\u0642\u0627\u062a\u06cc \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0627\u0646\u0627\u0644 \u0627\u0631\u062a\u0628\u0627\u0637\u06cc \u0628\u06cc\u0646 \u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u0647\u0627 \u0648 \u062f\u0627\u0646\u0634\u0645\u0646\u062f\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f.  \u0628\u06cc\u0634\u062a\u0631 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u062f\u0631 \u0622\u0646 \u0632\u0645\u0627\u0646 \u062b\u0627\u0628\u062a \u0628\u0648\u062f\u0646\u062f.  \u06cc\u06a9 \u0648\u0628 \u062b\u0627\u0628\u062a page \u0628\u0631\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9\u0633\u0627\u0646 \u0627\u0633\u062a \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f \u0631\u0648\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631  \u0627\u06af\u0631 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u0686\u06cc\u0632\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u0631\u0648\u06cc \u0622 page\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u062f.<\/p>\n<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0633\u06cc\u0627\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u062a\u0631 \u0648 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a.  \u0627\u0645\u0631\u0648\u0632\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0645\u0647 \u0628\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u0646\u062f.  \u0627\u06a9\u062b\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0645\u0631\u0648\u0632\u06cc \u067e\u0648\u06cc\u0627 \u0647\u0633\u062a\u0646\u062f.  \u0645\u062b\u0644\u0627\u060c \u0631\u0648\u06cc \u0641\u06cc\u0633\u0628\u0648\u06a9 \u0645\u0646 \u0648 \u0634\u0645\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u060c \u0641\u06cc\u062f\u0647\u0627\u06cc \u062e\u0628\u0631\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f page \u0627\u0632 \u0647\u0645\u0627\u0646 \u0627\u0644\u06af\u0648 \u067e\u06cc\u0631\u0648\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u06cc\u0639\u0646\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0645\u062a\u0648\u0627\u0644\u06cc \u0628\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0622\u0646\u0647\u0627)\u060c \u0627\u0645\u0627 \u0645\u062d\u062a\u0648\u0627 \u0645\u062a\u0641\u0627\u0648\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0627\u0633\u062a &#8211; \u0642\u0627\u0644\u0628 \u0628\u0631\u0627\u06cc \u0641\u06cc\u062f \u062e\u0628\u0631\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0648 \u0633\u067e\u0633 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0622\u0646 \u0627\u0633\u062a \u0631\u0648\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0648 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u0642\u0627\u0644\u0628 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u067e\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0647\u0645 \u062f\u0631 \u0628\u06a9\u200c\u0627\u0646\u062f \u0648 \u0647\u0645 \u062f\u0631 \u062c\u0644\u0648\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0627\u06af\u0631 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u062f\u0631 backend \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <em>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/em> (SSR).<\/p>\n<h2 id=\"handlebars\"><span class=\"ez-toc-section\" id=\"%d8%af%d8%b3%d8%aa%d9%87_%d8%af%d8%b3%d8%aa%d9%87\"><\/span>\u062f\u0633\u062a\u0647 \u062f\u0633\u062a\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Handlebars \u0647\u0645 \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0628\u06a9\u200c\u0627\u0646\u062f \u0648 \u062c\u0644\u0648\u06cc\u06cc \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0645\u062d\u0628\u0648\u0628 front-end <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/emberjs.com\/\">\u0627\u062e\u06af\u0631<\/a> \u0627\u0632 Handlebars \u0628\u0647 \u200b\u200b\u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>Handlebars \u067e\u0633\u0648\u0646\u062f\u06cc \u0627\u0632 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mustache.github.io\/\">\u0633\u0628\u06cc\u0644<\/a> \u0632\u0628\u0627\u0646 \u0642\u0627\u0644\u0628 \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0627\u0633\u062a \u0631\u0648\u06cc \u0633\u0627\u062f\u06af\u06cc \u0648 \u062d\u062f\u0627\u0642\u0644 \u0642\u0627\u0644\u0628.<\/p>\n<h2 id=\"usinghandlebarswithnodejs\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_handlebars_%d8%a8%d8%a7_nodejs\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Handlebars \u0628\u0627 Node.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062e\u0627\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0622\u0646 \u067e\u0648\u0634\u0647 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>npm init -y<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Node.js \u062e\u0627\u0644\u06cc \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639\u060c \u0628\u0627\u06cc\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc Node.js \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/express\">\u0628\u06cc\u0627\u0646<\/a> \u0648 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/express-handlebars\">\u0641\u0631\u0645\u0627\u0646 \u0627\u06a9\u0633\u067e\u0631\u0633<\/a> \u0645\u0627\u0698\u0648\u0644 \u0647\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> npm install --save express express-handlebars<\/span>\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/strong>: \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Handlebars \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0627\u0632 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u06a9\u0645\u06a9\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f <code>express-handlebars<\/code> \u06a9\u0647 Handlebars \u0631\u0627 \u0628\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 \u0634\u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0645\u0631\u06a9\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u0646\u062d\u0648 \u0627\u0644\u06af\u0648\u060c \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>express-handlebars<\/code>\u060c \u0627\u0645\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0627\u0644\u06af\u0648 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f <em>\u062a\u0644\u0641\u06cc\u0642\u06cc<\/em> \u0648 <em>\u062a\u0641\u0633\u06cc\u0631<\/em> \u062e\u0648\u062f\u062a\u0627\u0646\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/handlebarsjs.com\/api-reference\/compilation.html\">\u0645\u0631\u062c\u0639 API \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644<\/a> \u0647\u0645\u0686\u0646\u06cc\u0646.<\/p>\n<p>\u0633\u067e\u0633\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Handlebars \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0633\u0627\u0632\u06cc\u0645.  \u0627\u06cc\u0646 <code>views<\/code> \u067e\u0648\u0634\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc Handlebars \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\">.\n\u251c\u2500\u2500 app.js\n\u2514\u2500\u2500 views\n    \u251c\u2500\u2500 home.hbs\n    \u2514\u2500\u2500 layouts\n        \u2514\u2500\u2500 main.hbs\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 <code>layouts<\/code> \u067e\u0648\u0634\u0647 \u062f\u0627\u062e\u0644 <code>views<\/code> \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u06cc\u0627 \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0627\u06cc\u0646 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u0634\u0627\u0645\u0644 \u0633\u0627\u062e\u062a\u0627\u0631 HTML\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0648 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u06cc\u0646 \u0642\u0627\u0644\u0628\u200c\u0647\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 <code>main.hbs<\/code> \u0641\u0627\u06cc\u0644 \u0637\u0631\u062d \u0627\u0635\u0644\u06cc \u0627\u0633\u062a.  \u0627\u06cc\u0646 <code>home.hbs<\/code> \u0641\u0627\u06cc\u0644 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0642\u0627\u0644\u0628 Handlebars \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0622\u0646 \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647\u060c \u0642\u0627\u0644\u0628 \u0647\u0627 \u0648 \u067e\u0648\u0634\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0645\u062b\u0627\u0644 \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f import \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0631 \u0645\u0627 <code>app.js<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">const<\/span> express = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'express'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> exphbs = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'express-handlebars'<\/span>);\n<\/code><\/pre>\n<p>\u0633\u067e\u0633\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Express \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">const<\/span> app = express();\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645 <code>express-handlebars<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u062a\u0648\u0631 \u062f\u06cc\u062f \u0645\u0627:<\/p>\n<pre><code class=\"hljs\">app.engine(<span class=\"hljs-string\">'hbs'<\/span>, exphbs({\n    <span class=\"hljs-attr\">defaultLayout<\/span>: <span class=\"hljs-string\">'main'<\/span>,\n    <span class=\"hljs-attr\">extname<\/span>: <span class=\"hljs-string\">'.hbs'<\/span>\n}));\n\napp.set(<span class=\"hljs-string\">'view engine'<\/span>, <span class=\"hljs-string\">'hbs'<\/span>);\n<\/code><\/pre>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\u060c \u067e\u0633\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc Handlebars \u0627\u0633\u062a <code>.handlebars<\/code>.  \u0627\u0645\u0627 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u06cc\u0646\u062c\u0627\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645 <code>.hbs<\/code> \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>extname<\/code> \u067e\u0631\u0686\u0645 \u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f \u0632\u06cc\u0631\u0627 \u06a9\u0648\u062a\u0627\u0647\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0627\u0645\u0644 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">\u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e<\/a> \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627 \u0648 \u0633\u0628\u06a9 \u0647\u0627 \u062f\u0631 <code>main.hbs<\/code> \u0686\u06cc\u062f\u0645\u0627\u0646:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- &lt;meta&gt; tags&gt; --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Book Face<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        {{{body}}}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/(email\u00a0protected)\/dist\/umd\/popper.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0648 \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 <code>home.hbs<\/code> \u0628\u0631\u0627\u06cc \u062f\u0631\u062c \u067e\u06cc\u0627\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello World from Handlebars<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062a\u0627 \u0628\u062a\u0648\u0627\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0631\u0633\u06cc\u062f page\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 root \u0645\u0633\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\">app.get(<span class=\"hljs-string\">'\/'<\/span>, <span class=\"hljs-function\">(<span class=\"hljs-params\">req, res<\/span>) =&gt;<\/span> {\n    res.render(<span class=\"hljs-string\">'home'<\/span>);\n});\n<\/code><\/pre>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u06cc\u06a9 \u067e\u0648\u0631\u062a \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627:<\/p>\n<pre><code class=\"hljs\">app.listen(<span class=\"hljs-number\">3000<\/span>, <span class=\"hljs-function\">() =&gt;<\/span> {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'The web server has started \u0631\u0648\u06cc port 3000'<\/span>);\n});\n<\/code><\/pre>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 <code>node app.js<\/code> \u062f\u0631 console\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodemon.io\/\">\u06af\u0631\u0647<\/a>.  \u0628\u0627 nodemon\u060c \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0633\u0631\u0648\u0631 \u0646\u062f\u0627\u0631\u06cc\u0645 &#8211; \u0648\u0642\u062a\u06cc \u06a9\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645\u060c nodemon \u0633\u0631\u0648\u0631 \u0631\u0627 \u062a\u0627\u0632\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> npm i -g nodemon<\/span>\n<\/code><\/pre>\n<p>\u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 nodemon \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0632\u06cc\u0631 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> nodemon app.js<\/span>\n<\/code><\/pre>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/guide-to-handlebars-templating-engine-for-node-2.png\" alt=\"\u0641\u0631\u0645\u0627\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0648\u062c\u0648\u062f \u0647\u0645\u0647 \u0686\u06cc\u0632\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Handlebars \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h2 id=\"handlebarslanguagefeatures\"><span class=\"ez-toc-section\" id=\"%d9%88%db%8c%da%98%da%af%db%8c_%d9%87%d8%a7%db%8c_%d8%b2%d8%a8%d8%a7%d9%86_handlebars\"><\/span>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u0628\u0627\u0646 Handlebars<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u06af\u0630\u0627\u0634\u062a\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Handlebars\u060c \u0645\u0627 \u06cc\u06a9 \u0641\u06cc\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0641\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0633\u0627\u062f\u0647 \u0628\u06cc\u0631\u0648\u0646 \u0645\u06cc \u06a9\u0634\u062f \u0648 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0641\u06cc\u062f \u062d\u0627\u0648\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc\u06cc \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0646\u0638\u0631\u0627\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0627\u06af\u0631 \u0646\u0638\u0631\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 &#8211; a &#8220;\u0627\u0648\u0644\u06cc\u0646 \u06a9\u0633\u06cc \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0646\u0638\u0631 \u0645\u06cc \u062f\u0647\u062f \u0631\u0648\u06cc \u067e\u06cc\u0627\u0645 \u0627\u06cc\u0646 \u067e\u0633\u062a&#8221; \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645 <code>home.hbs<\/code> \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar navbar-dark bg-dark\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-brand\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Book Face<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/picsum.photos\/500\/500\"<\/span>\n                    <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by Janith Kasun<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>This is supposed to be a comment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>This is supposed to be a comment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0642\u0627\u0644\u0628 Handlebars \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>navbar<\/code> \u0648 \u0627\u0644\u0641 <code>card<\/code> \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u06a9\u0627\u0646\u200c\u062f\u0627\u0631 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc\u200c\u0634\u062f\u0647.<\/p>\n<p>\u0645\u0627 page \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0627\u0633\u062a:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/guide-to-handlebars-templating-engine-for-node-3.png\" alt=\"\u0642\u0627\u0644\u0628 \u0641\u0631\u0645\u0627\u0646\" title=\"\"><\/p>\n<h2 id=\"passingparameterstotemplates\"><span class=\"ez-toc-section\" id=\"%d8%a7%d9%86%d8%aa%d9%82%d8%a7%d9%84_%d9%be%d8%a7%d8%b1%d8%a7%d9%85%d8%aa%d8%b1%d9%87%d8%a7_%d8%a8%d9%87_%d9%82%d8%a7%d9%84%d8%a8_%d9%87%d8%a7\"><\/span>\u0627\u0646\u062a\u0642\u0627\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0628\u0647 \u0642\u0627\u0644\u0628 \u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0642\u0633\u0645\u062a \u062d\u0630\u0641 \u06a9\u0646\u06cc\u0645 page \u062e\u0648\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 page.  \u0627\u06cc\u0646\u0647\u0627 \u0628\u0639\u062f\u0627\u064b \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u0634\u0648\u0646\u062f:<\/p>\n<pre><code class=\"hljs\">app.get(<span class=\"hljs-string\">'\/'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n    res.render(<span class=\"hljs-string\">'home'<\/span>, {\n        <span class=\"hljs-attr\">post<\/span>: {\n            <span class=\"hljs-attr\">author<\/span>: <span class=\"hljs-string\">'Janith Kasun'<\/span>,\n            <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">'https:\/\/picsum.photos\/500\/500'<\/span>,\n            <span class=\"hljs-attr\">comments<\/span>: ()\n        }\n    });\n});\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 <code>post<\/code> \u0634\u0627\u0645\u0644 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <code>author<\/code>\u060c <code>image<\/code>\u060c \u0648 <code>comments<\/code>.  \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 <code>post<\/code> \u062f\u0631 \u0642\u0627\u0644\u0628 Handlebars \u0645\u0627 <code>{{post}}<\/code>:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{post.image}}\"<\/span>\n                    <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{post.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>This is suppose to be a comment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>This is suppose to be a comment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0628\u0627 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0627 \u0647\u0646\u062f\u0644\u0631\u06cc \u06a9\u0647 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f page\u060c \u0622\u0646\u0647\u0627 \u062f\u0631\u062c \u0634\u062f\u0647 \u0627\u0646\u062f \u0631\u0648\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0638\u0627\u0647\u0631 HTML \u0627\u06cc\u0633\u062a\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u0642\u0628\u0644 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3 id=\"usingconditions\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%b4%d8%b1%d8%a7%db%8c%d8%b7\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0631\u0627\u06cc\u0637<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0645\u0646\u0637\u0642 \u0634\u0631\u0637\u06cc \u062f\u0627\u0631\u06cc\u0645\u060c \u06cc\u0639\u0646\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0648 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u0648\u062c\u0648\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0634\u0631\u0637\u06cc \u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc Handlebars \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{post.image}}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{post.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    {{#if post.comments}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-comment\">&lt;!-- Display comment logic --&gt;<\/span>\n\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{else}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>Be first to comment \u0631\u0648\u06cc this post!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{\/if}}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f &#8220;\u0627\u0648\u0644\u06cc\u0646 \u0646\u0638\u0631 \u0628\u0631\u0627\u06cc \u0646\u0638\u0631 \u0628\u0627\u0634\u06cc\u062f&#8221; \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0631\u0648\u06cc \u0627\u06cc\u0646 \u067e\u0633\u062a&#8221; \u0628\u062e\u0634 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u0634\u0645\u0627 page \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0622\u0631\u0627\u06cc\u0647 \u0646\u0638\u0631\u0627\u062a \u062e\u0627\u0644\u06cc \u0627\u0633\u062a:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/guide-to-handlebars-templating-engine-for-node-4.png\" alt=\"\u0642\u0627\u0644\u0628 \u062f\u0633\u062a\u0647 \u0628\u0627 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0648 \u06a9\u0627\u0631\u062a\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 <code>#if<\/code> \u06cc\u06a9 \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u062f\u0627\u062e\u0644\u06cc \u062f\u0631 Handlebars \u0627\u0633\u062a.  \u0627\u06af\u0631 \u0639\u0628\u0627\u0631\u062a if \u0628\u0631\u06af\u0631\u062f\u062f <code>true<\/code>\u060c \u0628\u0644\u0648\u06a9 \u062f\u0627\u062e\u0644 <code>#if<\/code> \u0628\u0644\u0648\u06a9 \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.  \u0627\u06af\u0631 <code>false<\/code>\u060c <code>undefined<\/code>\u060c <code>null<\/code>\u060c <code>\"\"<\/code>\u060c <code>0<\/code>\u060c \u06cc\u0627 <code>()<\/code> \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u0628\u0644\u0648\u06a9 \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0622\u0631\u0627\u06cc\u0647 \u0645\u0627 \u062e\u0627\u0644\u06cc \u0627\u0633\u062a (<code>()<\/code>) \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0644\u0648\u06a9 \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><code>#if<\/code>  \u0641\u0642\u0637 \u06cc\u06a9 \u0634\u0631\u0637 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0646\u062d\u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (<code>===<\/code>).  \u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0686\u0646\u062f \u0634\u0631\u0637 \u06cc\u0627 \u0646\u062d\u0648 \u0627\u0636\u0627\u0641\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u06a9\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0642\u0627\u0644\u0628 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u0627\u0646\u062c\u0627\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<h3 id=\"usingloops\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%ad%d9%84%d9%82%d9%87_%d9%87%d8%a7\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0644\u0642\u0647 \u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06cc\u06a9 \u067e\u0633\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062d\u0627\u0648\u06cc \u0686\u0646\u062f\u06cc\u0646 \u0646\u0638\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u0631\u0627\u06cc \u0639\u0628\u0648\u0631 \u0627\u0632 \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u0622\u0631\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0686\u0646\u062f \u0646\u0638\u0631 \u067e\u0631 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\">app.get(<span class=\"hljs-string\">'\/'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n    res.render(<span class=\"hljs-string\">'home'<\/span>, {\n        <span class=\"hljs-attr\">post<\/span>: {\n            <span class=\"hljs-attr\">author<\/span>: <span class=\"hljs-string\">'Janith Kasun'<\/span>,\n            <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">'https:\/\/picsum.photos\/500\/500'<\/span>,\n            <span class=\"hljs-attr\">comments<\/span>: (\n                <span class=\"hljs-string\">'This is the first comment'<\/span>,\n                <span class=\"hljs-string\">'This is the second comment'<\/span>,\n                <span class=\"hljs-string\">'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'<\/span>\n            )\n        }\n    });\n});\n<\/code><\/pre>\n<p>\u0648 \u0627\u06a9\u0646\u0648\u0646\u060c \u062f\u0631 \u0642\u0627\u0644\u0628 \u062e\u0648\u062f\u060c \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>#each<\/code> \u062d\u0644\u0642\u0647 \u0628\u0631\u0627\u06cc \u0639\u0628\u0648\u0631 \u0627\u0632 \u0647\u0645\u0647 \u0622\u0646\u0647\u0627:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{post.image}}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{post.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    {{#if post.comments}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        {{#each post.comments}}\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>{{this}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        {{\/each}}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{else}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>Be first to comment \u0631\u0648\u06cc this post<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{\/if}}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0631\u0648\u0646 <code>#each<\/code> \u062d\u0644\u0642\u0647\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>this<\/code> \u0628\u0631\u0627\u06cc \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u062a\u06a9\u0631\u0627\u0631 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a.  \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0628\u0647 \u0631\u0634\u062a\u0647 \u0627\u06cc \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0633\u067e\u0633 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/guide-to-handlebars-templating-engine-for-node-5.png\" alt=\"\u0647\u0631 \u062a\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u062f\u0631 \u0641\u0631\u0645\u0627\u0646\" title=\"\"><\/p>\n<p>\u0627\u06af\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0647\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0622\u0646 \u0634\u06cc \u0646\u06cc\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>this.name<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 <code>name<\/code> \u0631\u0634\u062a\u0647.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u062d\u0627\u0648\u06cc \u0686\u0646\u062f\u06cc\u0646 \u067e\u0633\u062a \u0628\u0627\u0634\u062f:<\/p>\n<pre><code class=\"hljs\">app.get(<span class=\"hljs-string\">'\/'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">req, res<\/span>) <\/span>{\n    res.render(<span class=\"hljs-string\">'home'<\/span>, {\n        <span class=\"hljs-attr\">posts<\/span>: (\n            {\n                <span class=\"hljs-attr\">author<\/span>: <span class=\"hljs-string\">'Janith Kasun'<\/span>,\n                <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">'https:\/\/picsum.photos\/500\/500'<\/span>,\n                <span class=\"hljs-attr\">comments<\/span>: (\n                    <span class=\"hljs-string\">'This is the first comment'<\/span>,\n                    <span class=\"hljs-string\">'This is the second comment'<\/span>,\n                    <span class=\"hljs-string\">'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'<\/span>\n                )\n            },\n            {\n                <span class=\"hljs-attr\">author<\/span>: <span class=\"hljs-string\">'John Doe'<\/span>,\n                <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">'https:\/\/picsum.photos\/500\/500\u061f2'<\/span>,\n                <span class=\"hljs-attr\">comments<\/span>: (\n                )\n            }\n        )\n    });\n});\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0647\u0645 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 <code>#each<\/code> \u0628\u0631\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u0633\u062a \u0647\u0627:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        {{#each posts}}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{this.image}}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{this.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    {{#if this.comments}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        {{#each this.comments}}\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>{{this}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        {{\/each}}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{else}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>Be first to comment \u0631\u0648\u06cc this post<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{\/if}}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        {{\/each}}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h3 id=\"usingpartial\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_%d8%ac%d8%b2%d8%a6%db%8c\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0632\u0626\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0645\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u062f\u0627\u0631\u0627\u06cc \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0647\u0633\u062a\u0646\u062f.  \u062f\u0631 \u0633\u0637\u062d \u067e\u0627\u06cc\u0647\u060c \u0627\u06cc\u0646\u0647\u0627 \u0647\u0633\u062a\u0646\u062f <em>\u0633\u0631\u062a\u06cc\u062a\u0631<\/em>\u060c <em>\u0628\u062f\u0646<\/em>\u060c \u0648 <em>\u067e\u0627\u0648\u0631\u0642\u06cc<\/em> \u0628\u062e\u0634 \u0647\u0627  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0633\u0631\u0628\u0631\u06af \u0648 \u067e\u0627\u0648\u0631\u0642\u06cc \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062f\u0631 \u0622\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <em>\u0647\u0645\u0647<\/em> \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0632\u0648\u062f\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0622\u0632\u0627\u0631\u062f\u0647\u0646\u062f\u0647 \u0648 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0632\u0627\u0626\u062f \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n<p>\u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 Handlebars \u0628\u0631\u0627\u06cc \u062a\u0642\u0633\u06cc\u0645 \u0628\u0646\u062f\u06cc \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627 \u0648 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <em>\u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632<\/em> \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 &#8220;\u062c\u0632\u0626\u06cc&#8221; \u062f\u0631 \u062e\u0648\u062f \u0635\u0641\u062d\u0627\u062a.<\/p>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0686\u0648\u0646 \u067e\u0627\u0648\u0631\u0642\u06cc \u0646\u062f\u0627\u0631\u06cc\u0645\u060c a \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 <code>header.hbs<\/code> \u0648 \u0627\u0644\u0641 <code>posts.hbs<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 a <code>partials<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627:<\/p>\n<pre><code class=\"hljs\">.\n\u251c\u2500\u2500 app.js\n\u2514\u2500\u2500 views\n    \u251c\u2500\u2500 home.hbs\n    \u251c\u2500\u2500 layouts\n    |  \u2514\u2500\u2500 main.hbs\n    \u2514\u2500\u2500 paritials\n       \u2514\u2500\u2500 header.hbs\n       \u2514\u2500\u2500 posts.hbs\n<\/code><\/pre>\n<p>\u0633\u067e\u0633\u060c \u06a9\u062f \u0647\u062f\u0631 \u0631\u0627 \u0628\u0647 \u062f\u0627\u062e\u0644 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>header.hbs<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar navbar-dark bg-dark\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-brand\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Book Face<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0648 \u06a9\u062f \u0641\u06cc\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>posts.hbs<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        {{#each posts}}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{this.image}}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{this.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    {{#if this.comments}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        {{#each this.comments}}\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>{{this}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        {{\/each}}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{else}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>Be first to comment \u0631\u0648\u06cc this post<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{\/if}}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        {{\/each}}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0648 \u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 <code>home.hbs<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-template-variable\">{{&gt;<span class=\"hljs-name\">header<\/span>}}<\/span><span class=\"xml\">\n\n<\/span><span class=\"hljs-template-variable\">{{&gt;<span class=\"hljs-name\">posts<\/span> <span class=\"hljs-attr\">posts<\/span>=posts}}<\/span><span class=\"xml\">\n<\/span><\/code><\/pre>\n<p>\u06a9\u0627\u0631\u0628\u0631 \u062a\u0641\u0627\u0648\u062a\u06cc \u0646\u0645\u06cc \u0628\u06cc\u0646\u062f\u060c \u0627\u0645\u0627 \u0645\u0627 <code>home.hbs<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0627\u0633\u062a.  \u0648\u0642\u062a\u06cc \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0634\u0627\u0645\u0644 <code>header.hbs<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0648 \u06af\u0630\u0634\u062a \u0627\u0644\u0641 <code>posts<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u0647 <code>posts<\/code> \u0632\u0645\u06cc\u0646\u0647 \u0627\u0632 <code>posts.hbs<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<p>\u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>posts<\/code> \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0645\u0627 \u0628\u0647 <code>posts<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0631 <code>posts.hbs<\/code> page  \u0641\u0627\u06cc\u0644.<\/p>\n<h3 id=\"buildingacustomhelper\"><span class=\"ez-toc-section\" id=\"%d8%b3%d8%a7%d8%ae%d8%aa%d9%86_%db%8c%da%a9_helper_%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c\"><\/span>\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 Helper \u0633\u0641\u0627\u0631\u0634\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0631\u0648\u06cc \u0631\u0627 page\u060c \u0645\u0627 \u06cc\u06a9 \u0646\u0638\u0631 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0648 \u062e\u0637 \u0645\u0635\u0631\u0641 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u062e\u0644\u0627\u0635\u0647 \u06a9\u0631\u062f\u0646 \u0622\u0646 \u0645\u062a\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u062f\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Handlebars\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0646\u0638\u0631\u0627\u062a \u0631\u0627 \u0628\u0647 64 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0628\u0631\u0634 \u0645\u06cc \u062f\u0647\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\">app.engine(<span class=\"hljs-string\">'hbs'<\/span>, exphbs({\n    <span class=\"hljs-attr\">defaultLayout<\/span>: <span class=\"hljs-string\">'main'<\/span>,\n    <span class=\"hljs-attr\">extname<\/span>: <span class=\"hljs-string\">'.hbs'<\/span>,\n    <span class=\"hljs-attr\">helpers<\/span>: {\n        <span class=\"hljs-function\"><span class=\"hljs-title\">getShortComment<\/span>(<span class=\"hljs-params\">comment<\/span>)<\/span> {\n            <span class=\"hljs-keyword\">if<\/span> (comment.length &lt; <span class=\"hljs-number\">64<\/span>) {\n                <span class=\"hljs-keyword\">return<\/span> comment;\n            }\n\n            <span class=\"hljs-keyword\">return<\/span> comment.substring(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">61<\/span>) + <span class=\"hljs-string\">'...'<\/span>;\n        }\n    }\n}));\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u062f\u0631 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>posts.hbs<\/code> \u0627\u0644\u06af\u0648\u06cc \u062e\u0644\u0627\u0635\u0647 \u06a9\u0631\u062f\u0646 \u0646\u0638\u0631\u0627\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"posts\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row justify-content-center\"<\/span>&gt;<\/span>\n        {{#each posts}}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-lg-7\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 50px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{this.image}}\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Posted by {{this.author}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\n                    {{#if this.comments}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        {{#each this.comments}}\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>{{getShortComment this}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                        {{\/each}}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{else}}\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"list-group-item\"<\/span>&gt;<\/span>Be first to comment \u0631\u0648\u06cc this post<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    {{\/if}}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        {{\/each}}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0645\u0637\u0645\u0626\u0646\u0627\u064b \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc\u060c \u0646\u0638\u0631\u0627\u062a \u0628\u0631\u06cc\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u0645\u0627 page \u0627\u06a9\u0646\u0648\u0646:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/guide-to-handlebars-templating-engine-for-node-6.png\" alt=\"\u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0645\u06a9\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0641\u0631\u0645\u0627\u0646\" title=\"\"><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 Handlebars &#8211; \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0628\u0631\u0627\u06cc Node.js \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u06cc\u0645.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Handlebars\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u067e\u0648\u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0631\u0646\u062f\u0631 \u0634\u0648\u0646\u062f \u0631\u0648\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06cc\u0627 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0631\u0637 \u0647\u0627\u060c \u062d\u0644\u0642\u0647 \u0647\u0627\u060c \u062c\u0632\u0626\u06cc \u0647\u0627 \u0648 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc Handlebars\u060c \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0645\u0627 \u0686\u06cc\u0632\u06cc \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 HTML \u0627\u06cc\u0633\u062a\u0627 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u06a9\u062f \u0646\u06cc\u0632 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a \u0631\u0648\u06cc <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jkasun\/sa-handle-bars\/\">GitHub<\/a>\u060c \u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u062f\u0633\u062a\u0647 \u062f\u0631 \u0622\u0646\u0647\u0627 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/handlebarsjs.com\/\">\u0635\u0641\u062d\u0647 \u0648\u0628 \u0631\u0633\u0645\u06cc<\/a>.<\/p>\n<\/div>\n<p>    (\u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0631\u062c\u0645\u0647)# \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<br \/><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-21 06:08:03<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;16133&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0631\u0627\u0647\u0646\u0645\u0627\u06cc Handlebars: Templating Engine \u0628\u0631\u0627\u06cc Node\\\/JavaScript\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 Handlebars \u0628\u0627 Node.js \u0648 Express \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 Handlebars \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0634 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc ...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 8<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0645\u0639\u0631\u0641\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 Handlebars \u0628\u0627 Node.js \u0648 Express \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0644\u0628 \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 Handlebars \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 (SSR) \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f \u0631\u0648\u0634 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Handlebars \u0628\u0627 Express.js \u0686\u0627\u0631\u0686\u0648\u0628 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[],"class_list":["post-16133","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=16133"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/16133\/revisions"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=16133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=16133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=16133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}