What is PUG//JADE Template ?
Pug
is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers…

PUG//JADE Attributes.
Tag attributes look similar to html (with optional comma), but their values are just regular JavaScript.

PUG/JADE CODE

a(href='https://www.google.com' target='_blank') Google
a(class='button', href='https://www.google.com' target='_blank') Google
a(class='button', href='https://www.google.com' target='_blank') Google

COMPILE HTML RESULT

Google
Google
Google

Pug also supports block unbuffered code:

PUG/JADE CODE

var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

COMPILE HTML RESULT

  • Uno
  • Dos
  • Tres
  • Cuatro
  • Cinco
  • Seis
  • Mixin Blocks
    Mixins can also take a block of pug to act as the content:

    PUG/JADE CODE

    mixin article(title)
      .article
        .article-wrapper
          h1= title
          if block
            block
          else
            p No content provided
    
    +article('Hello world')
    
    +article('Hello world')
      p This is my
      p Amazing article
    

    COMPILE HTML RESULT

    Hello world

    No content provided

    Hello world

    This is my

    Amazing article

    You may also like

    Leave a Reply