I have covered just about everything you need to build dynamic websites or applications as easily as you can. Pug is an incredibly versatile templating engine for Nodejs applications. I just wanted to illustrate just how flexible Pug can be to meet just about any need you may have when creating your templates. The possibilities are endless, though the deeper you go, the harder it is to maintain the project. You could even put a block inside of a mixin inside of an include which is in another mixin. For instance, you could create a block inside of an include. PugceptionĪll of the concepts we've discussed can be used together.

Overall, you should have all of the skills needed to build most things using Pug as a templating engine, but I would like to talk about one more thing before I wrap up this post. Passing data between code chunks or iterating over posts to spit out data programmatically is much easier when it can be done this way. It's not hard to see how this capability can make development go much faster. My Site Home Hello, world! Name: This is the title This is the content Site Footer In the example, the title argument is 'This is the title' and the content argument is 'This is the content'.Īfter using the mixin in a template, the compiled markdown will look like this: Using the mixins in templates is pretty straightforward and should feel similar to writing JavaScript function. Instead, you need to call the mixin with a plus sign.Īs you can see, the example above calls the post mixin, +post() with two arguments being passed in. Because it's a mixin and not just markup, it's not going to actually display anything where the include is placed. This is how we include the file which holds the mixin. First, there is an include statement beneath the extends layout.pug line. The hello.pug page looks pretty much the same as before, but with a few changes. hello.pug extends layout.pug include mixins/post.pug block content h1 Hello, world! include includes/form.pug +post ( 'This is the title', 'This is the content' ) block scripts script console.

Pug template examples