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

Bruno Navarrete
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points
Posted by Bruno Navarrete
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points

Nesting inside HTML elements

I ran into this question while juggling a Laravel template a while ago. What happens if I want to repeat the section#content across the board? Should I repeat it in every pug file or can I go with: 

section#content
    block content

Which would be ideal and why?

1 Answer

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Bruno Navarrete ,

Not sure if I understand correctly your question, sorry if I don't! Plus I am no expert in this, I am still another student learning along.

But I think in that case, there are two options:

  1. you want it to have exactly the same content, in which case I think it would be great to just also include it in the layout.pug, right?

  2. you want it to have different content on different scenarios, in which case I think you can make it into another include.

Does that makes sense?

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

I mean if you try doing layout.pug like this:

doctype html
html(lang='en')
    head
        title Flash Cards
    body
        include includes/header.pug
        section#content
            block content    
        include includes/footer.pug

And then, for example, do the index.pug and the card.pug like this:

// index.pug

extends layout.pug

block content
    h2 Welcome, student!

// card.pug

extends layout.pug

block content
    h2= prompt
        if hint
            p
                i Hint: #{hint}

That works. Not sure if that's what you mean, though.