So how the heck do we pass those arguments ?
INDENTATION IS IMPORTANT, anyway so let’s see what does this mean exactly, think of Pug files as html files but with variables and stuff, because that’s literally what a template is, it helps us pass arguments and do programming stuff inside the file, so this tells us that the title tag in our file equals a variable called title and then we see an h1 tag but the value of the text to it equals a variable called message pug extension says that this is a pug file so it has a tiny bit different syntax than html BUT TRUST ME it’s just as easy So in your views directory create a new file and name it home.pug now this. pug files to use for rendering templates and by default it’ll look inside a directory called views so please go ahead and make that directory as we’ll create our first template
#Pug template rendering code#
This is extremely simple but just cared to to have it in a separate section you knowĪdd this to your express code after requiring Pug itself app.set('view engine', 'pug') this will tell express to look out for. We’ll also need nodemon to save time so npm i -save-dev nodemon
#Pug template rendering install#
Then just install Pug using npm npm i pug Initialize a new project with the defaults using npm init -y Make a new directory and navigate into it with mkdir express_templates & cd express_templates Honestly there are plenty of choices and among them areĪnd many others you can look at here, for this tutorial i picked the easiest option which is Pug, it has great features and the template language itself is easy peasy 🍋 squeezyĪs per every node / express project the steps are simple
So it allows us to pass arguments to pre-defined templates of our own, it also supports logic like conditionals, filtering and all that stuff so you have great control over the data This approach makes it easier to design an HTML page. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client.
Following example shows how we can use this feature −Īpp.So what the 🦆 is a template engne anyway ? And what problems does it solve me ? So according to the express.js documentationĪ template engine enables you to use static template files in your application. Instead of copying that to every view we create, we can use the include feature. For example, if you see a news website, the header with logo and categories is always fixed. Pug provides a very intuitive way to create components for a web page. But if we don’t pass any object or pass one with no user key, then we will get a signup link. When we render this using our routes, we can pass an object as in the following program − To achieve this, we can define a simple template like − If a User is logged in, the page should display "Hi, User" and if not, then the "Login/Sign Up" link. We can use conditional statements and looping constructs as well. The above code will display the following output. This method of using values is called interpolation. For example, in the above example, if we wanted to put Greetings from TutorialsPoint, then we could have done the following. To run this page, add the following route to your app −Īpp.get('/first_template', function(req, res) syntax. Inside that create a file called first_view.pug, and enter the following data in it. Add the following code to your index.js file.
Now that Pug is installed, set it as the templating engine for your app. To use Pug with Express, we need to install it, There is a lot of ground to cover on this. Pug is a very powerful templating engine which has a variety of features including 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)
