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 Using Templates with Express Breaking Your Project’s Templates into Partials

Andrey Mitko
Andrey Mitko
19,127 Points
Posted by Andrey Mitko
Andrey Mitko
19,127 Points

Pug "block" vs "include"?

Hello everyone,

I did not quite get the difference between the "block" and "include" methods in Pug. "Include" seems like a cleaner solution, since we do not need to specify "extends" and block "name". Are there any limitations to using "include" or is it just a matter of preference?

Thanks, Andrey

1 Answer

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

Pug is a pretty impressive templating language. There are many others, but Pug is deceptively simple, while being expressive and powerful. What's most important is that Pug supports inheritance.

The block and extends keywords are conceptually similar and are used together to implement template inheritance and modularity. The block and extends keywords, are a little different. You will use BOTH of these together to make great templates.

In a template, a block is simply a “block” of Pug template code that a child template may replace. The parent block can provide default content, if it makes sense for your purpose, though default content is purely optional. Andrew says typically "the block is simply the place where the child template will inject its content."

In a template, using extends works to inject code and blocks from another file into the child template. When extends is the first line in a child template, it is typically a layout that brings in a layout of blocks and "boilerplate" code.

Andrew demonstrates that the process is recursive -- that is a template can inherit code from many templates. In the example Andrew was showing the page template is the child of layout.pug and inherits all its code. The page template is only expected to inject its own content into the content block, yet inherited everything else from the layout.pug. So it doesn't have any of the HTML boilerplate or css or JavaScript it simply inherts those from the layout.pug.

But the layout.pug ALSO inherits pieces of its code from common inlcudes of a header.pug and footer.pug The header.pug and the footer.pug in the example are more functioning as "code injections" and contain blocks of DEFAULT content themselves.

I hope this helps!