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!
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
Andrey Mitko19,127 Points
Pug "block" vs "include"?
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?
Jeff MudayTreehouse Moderator 28,372 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.
extends keywords are conceptually similar and are used together to implement template inheritance and modularity. The
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 ALSO inherits pieces of its code from common inlcudes of a
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!