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

  • 相关阅读:
    Java集合框架:Collections工具类
    百度编辑器多图上传返回图片绝对路径问题
    iOS开发中“此证书的签发者无效”的解决方式
    codeblocks如何watch指针
    codeblocks如何watch数组
    printf不支持%lf
    doxygen可以生成C/C++代码的文档(根据注释)
    codeblocks中右键源文件没有Rename选项?
    codeblocks中给GCC编译器加参数
    codeblocks设置当前行高亮
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6989459.html
Copyright © 2011-2022 走看看