[Pug] Template Engine -- Jade/ Pug

Looking at the follow code:

.wrapper
    - const upName = name && name.toUpperCase();
    h2
        | Hello #{name.toUpperCase()}
        | Welcome, #{upName}
        em How are you?

    img.img(src="none.jpg" alt=`Dog ${age}`)

 

1. .wapper: div with wrapper class

div.wrapper

By defualt it consider as div class if you don't wirte div, just give a class name.

 

2. Define javascript variable:

    - const upName = name && name.toUpperCase();

 

3. Write content is different line:

    h2
        | Hello #{name.toUpperCase()}
        | Welcome, #{upName}

Using '|' we can write content in diffferent line, but it still display in the same line on the interface.

 

4. Mixin Javascript:

        | Hello #{name.toUpperCase()}
        | Welcome, #{upName}

 

5. Attr:

img.img(src="none.jpg" alt=`Dog ${age}`)

 

6. Write Javascript inside attr:

alt=`Dog ${age}`

 

7. Define a main layout file with some 'block' placeholder:

doctype html
html
  head
    title= `${title} | ${h.siteName}`
    link(rel='stylesheet', href='/dist/style.css')
    link(rel="shortcut icon" type="image/png" href="/images/icons/doughnut.png")
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    block header
      header.top
        nav.nav
          .nav__section.nav__section--pages
            li.nav__item
              a.nav__link.nav__link--logo(href="/")
                != h.icon('logo')
            each item in h.menu
              li.nav__item
                a.nav__link(href=item.slug, class=(currentPath.startsWith(item.slug) ? 'nav__link--active' : ''))
                  != h.icon(item.icon)
                  span #{item.title}
          .nav__section.nav__section--search
            .search
              input.search__input(type="text" placeholder="Coffee, beer..." name="search")
              .search__results
          .nav__section.nav__section--user
            if user
              li.nav__item: a.nav__link(href="/hearts", class=(currentPath.startsWith('/hearts') ? 'nav__link--active' : ''))
                != h.icon('heart')
                span.heart-count #{user.hearts && user.hearts.length}
              li.nav__item: a.nav__link(href="/logout", class=(currentPath.startsWith('/logout') ? 'nav__link--active' : ''))
                != h.icon('logout')
                span Logout
              li.nav__item: a.nav__link(href="/account", class=(currentPath.startsWith('/account') ? 'nav__link--active' : ''))
                img.avatar(src=user.gravatar + 'd=retro')
            else
              li.nav__item: a.nav__link(href="/register", class=(currentPath.startsWith('/register') ? 'nav__link--active' : '')) Register
              li.nav__item: a.nav__link(href="/login", class=(currentPath.startsWith('/login') ? 'nav__link--active' : '')) Log In

    block messages
      if locals.flashes
        .inner
          .flash-messages
            - const categories = Object.keys(locals.flashes)
            each category in categories
              each message in flashes[category]
                .flash(class=`flash--${category}`)
                  p.flash__text!= message
                  button.flash__remove(onClick="this.parentElement.remove()") ×
    .content
      block content

    block scripts
      script(src=`https://maps.googleapis.com/maps/api/js?key=${process.env.MAP_KEY}&libraries=places`)
      script(src="/dist/App.bundle.js")

Inside the layout.pug, you can see many 'block', it will use whatever you write under 'block' as default value, and later you can pass the content to replace the default value.

 

8. Extends main layout and override 'block':

extends layout

block content
    p Hello

Now the 'block content' in layout.pug will be overrided with 'p Hello'.