zoukankan      html  css  js  c++  java
  • [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'.

  • 相关阅读:
    【LeetCode】Rotate List
    【LeetCode】Longest Valid Parentheses
    【LeetCode】Longest Substring Without Repeating Characters
    【LeetCode】Multiply Strings
    【LeetCode】Triangle
    hdfs 查看报告--命令(hdfs dfsadmin -report)
    hive
    java ---面向对象
    java--数组
    java--函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6989459.html
Copyright © 2011-2022 走看看