Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Deeper into Routing with Express POST Requests

Dev D
seal-mask
.a{fill-rule:evenodd;}techdegree
Dev D
Front End Web Development Techdegree Student 406 Points
Posted by Dev D
.a{fill-rule:evenodd;}techdegree
Dev D
Front End Web Development Techdegree Student 406 Points

Why we need to write block content in hello.pug file?

Why we need to write block content in hello.pug file?

Wiktor Bednarz
Steven Parker

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

:bookmark: HI, I got alerted by your tag, but this is not a topic I'm familiar with. Hopefully someone who is will leave an answer soon.

1 Answer

Wiktor Bednarz
Wiktor Bednarz
18,647 Points
Wiktor Bednarz
Wiktor Bednarz
18,647 Points

Hi again D,

keep in mind that hello.pug in terms of this course is an extending template. In other words, it is only a part of your main template, which you call upon in your render() method. Before I dive into this in my own words, it would be best for you to try and grasp it on your own using pug docs: https://pugjs.org/language/inheritance.html

Let's go through this step by step. Assuming that when we call a GET request on ./hello route, then your res.render('/hello') serves your main template which is layout.pug. That template is a 'main container' for all of the html you're going to send with your response. It contains your <html>, <head>, <body>. That same layout.pug template is a base template for all of your rendering.

So when that that same layout.pug template is being served to specyfic HTTP request, it is extended with all of the content that you want to serve on that route. So when you request on a ./hello route - your express application knows that user wants to see the contents of that route. So since your hello.pug template is an extension for your main layout.pug template, then it has got to be reflected in code so that the compiler knows how to extend your layout. This function is represented with:

extends layout

call on top of your hello.pug.

The next statement (the one you ask about)

block content

In this statement, word "block" defines that code below it is a part of exportable html. and the word "content" defines what kind of content you want to export (it can be content, scripts, head...)

So now the compiler knows that:

  • user calls for your layout.pug template
  • that specyfic '/hello' route requests for a hello.pug template to extend layout
  • hello.pug template "gives" your layout.pug template a "content variable" nameded "block"

But layout.pug still doesn't know where to put that content received from hello.pug, so you can use that "variable" you created in hello.pug template to insert this content into a specyfic location.

tl;dr:

block content

has two roles. In your main template it indicates where to put content received from extended templates and in your template which is extending other template, it shows how does the html content look like.

I did my best to explain the whole concept as simply as I could, considering that question is by itself very basic, hope this helps you,

Wiktor Bednarz