How to use Attributes in Pug ?

Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or reference data.

Pug also supports JavaScript natively, hence using JavaScript expressions, we can format HTML code. This approach allows us to reuse static web pages which have dynamic data. Angular brackets are not used while specifying the tags.

Attributes in Pug

Attribute provides the meta-information related to the HTML element. They are used to add extra effects to the element. They are specified using the name/value pair like name=”value” within the parenthesis. Every name has some value that must be written within a single or double quote. There are different types of attributes like meta tag attributes, global attributes, and event-handling attributes.

Syntax of Attributes in Pug

tag_name (attribute_name='attribute value')

Alternative Syntax for using attributes

tag_name.class_name 
tag_name#id

Approach to use Attributes in Pug:

• Express Setup: Initializes an Express.js server.
• Setting View Engine: Configures Pug as the view engine for rendering templates.
• Routing: Defines a single route for the root URL (/). When accessed, it renders the Pug template.
• Pug Template: The Pug template defines the structure and content of the HTML page along with the attributes.
• Styling: Internal CSS is used within the Pug template (style.) to set margins and styles for headings and other components.

Steps to Install Pug in Node App:

Step 1: Create a NodeJS Application using the following command:

npm init -y

Step 2: Install the required dependencies using the following command:

npm i pug express

Step 3: Create a views folder that contains the pug file.

Folder Structure:

Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "express": "^4.18.2",
    "pug": "^3.0.2"
}

Example 1: Global and Meta Tag Attributes in Pug

HTML

doctype html
html
  head
    //- Meta Attributes
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title GeeksforGeeks Pug
    style.
      .heading {
        margin: 1rem ;
        text-align: center;
        color:green;
      }
      ul,dl{
         margin:1rem;
        padding :1.3rem;
        border:2px solid red;
      }
      #first{
        background-color:#00dd33;
      }
      #second{
        background-color:#3355dd;
      }

  body
    //- Global Attribute
    h1(class ="heading") Welcome to GeeksforGeeks
    div
      h3(class ="heading") Global Attributes Example
      ul
        li DSA
          ol(type='I')
            li Array
            li Linked List
        dl
          dt(id="first") Coffee
          dd - 500 gms
          dt(id='second') Milk
          dd - 1 ltr Tetra Pack

Javascript

// app.js

const express = require("express");
const app = express();
const port = 3000;
app.set("view engine", "pug");
app.get("/", (req, res) => {
      res.render("attribute");
});
app.listen(port, () => {
      console.log(`server is running at http://localhost:${port}`);
});

Output:

Global Attribute Example

Example 2: This example implements attributes in events.

HTML

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Event handler Attribute
    style.
      body {
        text-align: center;
      }
      h2 {
        color: green;
      }
      #container {
        cursor: pointer;
      }
    script.
      const toggleColor = () => {
        const element = document.getElementById("container");
        const currentColor = element.style.color;
        if (currentColor === "red") {
          element.style.color = "green";
        } else {
          element.style.color = "red";
        }
      };
  body
    h2 Welcome to GeeksforGeeks
    //-  Event handler attribute
    #container(onclick="toggleColor()")
      | Click to toggle the text color

Javascript

// app.js

const express = require("express");
const app = express();
const port = 3000;
app.set("view engine", "pug");
app.get("/", (req, res) => {
      res.render("attribute");
});
app.listen(port, () => {
      console.log(`server is running at http://localhost:${port}`);
});

Output:

Attributes in Pug