Finally, we’ll explore a couple of Pug’s more advanced features by building a simple Node/Express project which uses Pug as its template engine. We’ll start by installing it from npm, go over its basic syntax and then look at several examples of using JavaScript in Pug. In this guide, I’ll demonstrate how to get up and running with Pug. Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug is a template engine for Node and for the browser. This can be a nightmare to debug and to maintain. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. And while this is not the most difficult task, it can often feel a little boring or repetitive. Following example shows how we can use this feature −Īpp.As web designers or developers, we likely all have to write our fair share of HTML. 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.
Features not supported: include and inline variable interpolations. Add the following code to your index.js file. Based on original Pug modules with hand-picked dependencies.
Now that Pug is installed, set it as the templating engine for your app. To use Pug with Express, we need to install it, s dng Template Engine trong Express bn cn phi khai báo thêm cho Express mt thuc tính, chúng ta s khai báo 2 thuc tính sau trong file app.js ca d án : 1. There is a lot of ground to cover on this. Bn cn phi cài t Pug vào d án ca bn bng cách m terminal và gõ dòng lnh : npm install -save pug. 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)
