A common example of this concept is cards on social media sites. This allows you to write a sort of “mold” of a component, then fill it out with relevant data later on. Mixins allow you to write chunks of Pug markup with or without dynamic data, then use that markup anywhere you want. What if you needed this sort of idea, but with dynamic data? That’s where mixins come into play. This is also the way you pull other data such as mixins into the current file. There’s not any way to only pull certain pieces out for reuse. It is worth noting that using when using includes, the whole file is included. You write code, then include it somewhere. Honestly, that’s really all there is to know about includes. Now the markup for that page will look like this: hello.pugīelow the h1 tag, I have added a line with the include keyword followed by the path to the file I want to include in the markup. Below is an example showing how to include the form in my hello.pug page.
I will be using the page examples from my previous post to illustrate how things fit together. Rather than writing that out (or copying and pasting) everywhere I want it, I can include it. I have created a simple form with a name input, a message input, and a submit button. includes/form.pugįorm(action='/action-goes-here' method='post') The code below shows what’s in my form template. In our form example, the form code would just be standard Pug templating. Includes allow you to write some static code (no dynamic data) and put it wherever you want in the templates. This is exactly the reason Pug gives us the ability to use includes. Again, that leads to issues with having to update something in multiple locations. If you wanted that on two different pages, you’d have to create the form manually on each page even though they’re exactly the same. Imagine you’ve got a piece of your site that will be used in various places on your site, such as a contact form. These concepts also fall into the DRY category and can help make your life as a developer much easier. Now that we’ve covered templating, logic, and layouts, it’s time to cover the last major piece of Pug: includes and mixins.
Using the Pug Templating Engine Part 4 – Includes & Mixins
0 kommentar(er)
