Variables created this way can be of any data type that can be used in JavaScript. Though the example below isn’t practical, it helps to show how variables can be set and used in their simplest form. If you then just want to put that variable into the DOM as-is, an equals sign can accomplish that. Unlike php, where the code to be executed needs to be wrapped in a tag, all that’s needed to set up a variable in Pug is a hyphen. pug file is very easy to do since it is a JavaScript templating language. Without further adieu, let’s get started! Creating and using variables within Pug Today I’m going to show you how you can use variables and logic in your templates to make them dynamic and flexible, allowing you to write one template to hold lots of different pieces of information that are all formatted the same rather than writing out a separate HTML file for each one. In my previous post, I showed you how to create elements in Pug with classes, ids, attributes, and nesting. Under the partials folder, create a new file called mixins.pug with the following content.Using the Pug Templating Engine Part 2 – Logic First, let's create a partial file to declare our mixin. We're going to skip some of the basic examples and go to a slightly more advanced one, using attributes in mixins. This is an excellent use-case for PugJS mixin functionality documented here. However, this would probably not be the most efficient way to go about it. How might we do this? We could probably figure out a way to do this with conditional logic as described in part 3. Furthermore, let's say you want to be able to style the form independently in each place. Let's say you have a form element that you want to use in multiple places throughout your application. To follow along, be sure your code is up to date with the last part. Let's get started!įor brevity, I won't list our starting code here. In this post, I will demonstrate how to use Pug to create reusable blocks of code with mixins. In the last part, I covered using using "partials" in PugJS. This post is the fifth in a short series on using the PugJS templating engine with nodejs and expressjs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |