AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Pug template2/14/2023 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. It does not directly add anything to the output. ![]() ![]() Unbuffered Code Unbuffered code starts with. There are three types of code: Unbuffered, Buffered, and Unescaped Buffered. I will explain what this means and why it's useful. Pug allows you to write inline JavaScript code in your templates. 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 Comments
Read More
Leave a Reply. |