Set compile/render options using the Configuration API. Pug Options Jump to heading # Optional: Compile/Render Options Jump to heading # Read more at Changing a Template’s Rendering Engine. Pug templates used to be called Jade templates and the project was renamed. Optional: Set your own Library instance.I publish a few articles and tutorials each week, please consider entering your email here if you’d like to be added to my once-weekly email list. pug file looks like, and why a template engine is important in web development. Hopefully, you can now understand what Pug.js is, what a. You can view the weather website full code (using Pug) on Github. With Pug, you can’t copy HTML from anywhere, you have to convert everything to Pug before you can use it.The slightest mistake in your formatting/indenting/spacing means big problems for your code. Most importantly, we can write JavaScript that actually (almost/kind of) looks like JavaScript within our pug files.There are even shorthands for classes (.) and IDs (#) Pug makes use of indentation to determine the nesting of tags. This greatly improves code-readability and streamlines projects with multiple developers. When you write with Pug, you write code that looks like paragraphs.Switching from EJS to Pug brought our code down from 27 lines to just 17!.ejs file looked like in my last tutorial:
Recall the following code from my: Build a Weather Website in 30 minutes with Node.js + Express + OpenWeather tutorial where we used EJS as our template language: // TERMINAL npm install ejs -save // SERVER.JS app.set('view engine', 'ejs') The same way we use other template engines. In short: At run time, Pug (and other template engines) replace variables in our file with actual values, and then send the resulting HTML string to the client. To understand Pug, you need to remember that the browser reads HTML and CSS and then displays formatted images and text to the client based on what that HTML and CSS tells it to do.Ī template engine allows us to inject data and then produce HTML.
I strongly encourage you to check out those links before proceeding. Here is the tutorial, and Here is the full code on GitHub. In this tutorial, we’re going to be examining a weather website that I previously built with Node.js, Express JS, EJS, and OpenWeatherMap’s API. I laughed at this picture for a long time - via Prerequisites
0 kommentar(er)
