We can also use these passed variables within the text. Open localhost:3000/dynamic in your browser and following should be the output. Then, create a new view file in the views directory, named dynamic.pug, using the following code. _.get('//dynamic_view', dynamicMessage) // Define routes Create a new route handler with the following code.Īpp: app // equals to pug.use(app) and app.use(pug.middleware) When we render a Pug template, we can actually pass it a value from our route handler, which we can then use in our template. The following line of code covers defining attributes, classes, and id for a given html tag.ĭiv.#division(width = "100",height = "100") Class and ID attributes have special representations. To define attributes, we use a comma separated list of attributes, in parenthesis. These comments are converted to html comments(). Pug uses the same syntax as JavaScript(//) for creating comments. To put tags inside this block, simply enter tag in a new line and You can use "." at the end of tag to denote block of text. There are three methods to put text inside of a tag −īut that gets tedious if you have a lot of text. As soon as Pug encounters the next tag on the same or the outer indentation level, it closes the tag for us. However, the tag was on the same indentation, thus it was a sibling of tag. Like in the above example, was indented within the tag, so it was inside it.
Tags are nested according to their indentation.
Let’s explore some of these features of Pug. Pug is capable of doing much more than simplifying HTML markup. We don’t need to keep track of closing our tags, no need to use class and id keywords, rather use '.' and '#' to define them. What Pug does is, it converts this very simple looking markup to html. _.get('/hello', getMessage) // Define routes To run this page, add the following route to your app. Inside the directory, create a file named first_view.pug, and enter the following data in it. Now, create a new directory called views.
Var _ = router() //Instantiate the routerĪpp.use(_.routes()) //Use the routes defined using the router Add the following code to your app.js file. Once pug is installed, set it as the templating engine for your app. To use Pug with Koa, we need to install it using the following command. There is a lot of ground to cover on this. Pug is a very powerful templating engine, which has a variety of features such as filters, includes, inheritance, interpolation, etc. Templating engines are used to remove the cluttering of our server code with HTML, concatenating strings wildly to existing HTML templates.
0 kommentar(er)
