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

  • 相关阅读:
    [USACO5.1]二维凸包模板
    HTML 5 Web 存储
    计算两个坐标点的距离(高德or百度)
    Cache的一些总结
    PowerDesigner最基础的使用方法
    MongoDB安装
    MangoDB CSharp Driver
    Linq语法详细
    where用法
    .Net下二进制形式的文件存储与读取
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6989459.html
Copyright © 2011-2022 走看看