What that means is that you can write your header and footer once, then extend it where you want it. Then if you needed to update something down the road, you’d have to check EVERY SINGLE PAGE to make sure you updated it, lest you end up with broken links or images. Imagine a time when you built a website using plain HTML and had to copy and paste the header and footer to every single HTML file you wrote.

I will explain what this means and why it’s useful. If you’ve ever worked with something like Laravel, React, or even WordPress then this concept should feel somewhat familiar. Pug allows you to use inheritance to create a layout for the frontend and then insert blocks of data into the layout where appropriate. That’s what I will be talking about in today’s post. Those things are enough to get a frontend up and running, but there’s still more to learn which can make your developer experience much better.

So far in this series, I have covered basic templating and how to use logic when creating a frontend with Pug.

Using the Pug Templating Engine Part 3 – Layouts

Pug template foreach