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'.

  • 相关阅读:
    [zz] 从VMM中终止GUEST OS中运行进程
    [zz]Linux流量监控工具 – iftop (最全面的iftop教程)
    [zz]Ubuntu终端下Nethogs网络流量监控工具
    AtomicBoolean运用
    JDK中的URLConnection参数详解
    java读取文本文件数据
    tomcat时区设置
    java的upload
    java复习(set 、list、map)
    NIO学习笔记1
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6989459.html
Copyright © 2011-2022 走看看