What is HTML pug

Home › Forums › Web Design › HTML › What is HTML pug

  • This topic is empty.
  • Creator
    Topic
  • July 18, 2024 at 10:10 am #6289
    design
    Keymaster
      Up
      0
      Down
      ::

      Pug (formerly known as Jade) is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It allows developers to write HTML code more succinctly and maintainably by using a clean, whitespace-sensitive syntax.

      Features of Pug

      1. Concise Syntax: Pug eliminates the need for closing tags and reduces the need for repetitive coding, making the markup more readable.
      2. Whitespace Sensitivity: Pug uses indentation to define the structure of the HTML, similar to languages like Python.
      3. Mixins and Inheritance: Pug supports mixins (reusable pieces of templates) and template inheritance, which can make your code DRY (Don’t Repeat Yourself).
      4. Embedded JavaScript: You can embed JavaScript directly in your Pug templates, making it easy to insert dynamic content.

      Basic Example

      Here is a basic example of a Pug template and the resulting HTML:

      Pug Template (example.pug)

      doctype html
      html(lang="en")
      head
      title My Pug
      Example
      body
      h1 Welcome to Pug
      p
      This is an example of a Pug template.
      a(href="https://www.example.com")
      Visit Example.com

      Resulting HTML

      html

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <title>My Pug Example</title>
      </head>
      <body>
      <h1>Welcome to Pug</h1>
      <p>This is an example of a Pug template.</p>
      <a href="https://www.example.com">Visit Example.com</a>
      </body>
      </html>

      Installation and Usage

      To use Pug with Node.js, you need to install it via npm (Node Package Manager):

      sh
      npm install pug

      You can then use Pug in your Node.js application to render templates. Here’s a basic example:

      Node.js Application (app.js)

      javascript
      const express = require('express');
      const app = express();
      const path = require('path');
      // Set the view engine to Pug
      app.set('view engine', 'pug');
      app.set('views', path.join(__dirname, 'views'));
      // Route to render the Pug template
      app.get('/', (req, res) =>
      {
      res.render('index', { title: 'My Pug Example',
      message: 'Welcome to Pug' });
      });

      // Start the server
      app.listen(3000,

      () => {
      console.log('Server is running on http://localhost:3000');
      });

      Pug Template (views/index.pug)

      pug
      doctype html
      html(lang="en")
      head
      title= title
      body
      h1= message
      p
      This is an example of a Pug template.
      a(href="https://www.example.com") Visit Example.com

      When you run this Node.js application and visit http://localhost:3000, you will see the rendered HTML from the Pug template.

      Benefits of Using Pug

      1. Readability: Pug’s clean and minimal syntax makes it easier to read and understand, especially for larger templates.
      2. Maintainability: With features like mixins and template inheritance, Pug promotes code reuse and maintainability.
      3. Efficiency: Pug compiles to optimized JavaScript, making the rendering process efficient.
      4. Integration: Pug integrates seamlessly with various frameworks and tools, particularly with Express in Node.js.

      Pug is a powerful template engine that simplifies writing and managing HTML by providing a more readable and maintainable syntax. Its integration with JavaScript and Node.js makes it a popular choice for developers.

    • Creator
      Topic
    Share
    • You must be logged in to reply to this topic.
    Share