DEV Community

Discussion on: Shared HTML Layouts With Pugjs

Collapse
 
nkratzmeyer profile image
Nathan Kratzmeyer

This is a great question and you're almost there! You're wanting to do something I didn't cover in this series which is to do an "include". To start, you'll modify your main-layout. Let's do the header. To include the header in your main-layout, change:

block header
Enter fullscreen mode Exit fullscreen mode

to

include ../header.pug
Enter fullscreen mode Exit fullscreen mode

Then change your header.pug file to just be the content you want to show like this:

h1 testing header
Enter fullscreen mode Exit fullscreen mode

Then just do the same for your other content. Then you might want to restructure your folders to have a subfolder called "partials" or "includes" where you would put your header and footer. The stuff that's directly in the views folder should probably be your "main pages". Like your "About", "Contact", etc. pages. Make sense? Thank you very much for the question! I'll definitely write a new post covering this in more detail in the next couple of days.

Collapse
 
misterhtmlcss profile image
Roger K. • Edited

Thank you so so much for your detailed reply and I definitely look forward to reading any further articles on Pug as well.

Thread Thread
 
nkratzmeyer profile image
Nathan Kratzmeyer

I just added another post on using the includes functionality. Hopefully you find it helpful! Thanks so much for reading and asking questions.