The content is just an arbitrary name I created to indicate which block I wanted to place the content into. The block keyword is what indicates to Pug that this section is a block. All I did was add a block content where I wanted dynamic content to go.
If you weren’t looking for it, you might even miss it. The change in the example above is pretty small. Below is an example on how to set up blocks in the layout. In this example, the buns and patty would be the layout and the toppings would be the block so we can change the content without having to rewrite everything around it. Think of it like a hamburger: We know we need a bun and patty on every burger, but we don’t know what toppings are needed. These places are called “blocks” and you create them by assigning them a name and then filling them out in other files. In short, you can specify places in your layout where content should be filled in. To take advantage of the inheritance system, you will need to understand the concept of blocks. How is that useful? In order to understand that, we need to talk about the other part of this section: blocks. Great! Now you’ve created a layout that doesn’t actually do anything at the moment. The example below shows how you can set up a layout with a header and footer. This is one way Pug allows you to follow a DRY (Don’t Repeat Yourself) pattern when building things. This is beneficial for a few reasons: first, it saves lots of time because you don’t have to write the same thing over and over (or copy and paste while checking formatting), and second because when an update is needed it can be done in one place. 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
0 kommentar(er)
