zoukankan      html  css  js  c++  java
  • 模板引擎jade学习

    语言参考

    标签列表

    doctype

    关于文档的类型 默认是html

    doctype html
    <!DOCTYPE html>
    

    简洁文档类型标记

    xml
    <?xml version="1.0" encoding="utf-8" ?>
    transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    basic
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
    mobile
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

    You can also use your own literal custom doctype:

    doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

    标签

    默认,每行最开始的(或者在空格之后的(只有空格))代表一个html 标签 ,可以嵌入缩进,创建像html 文档结构的样式。

    ul
    li Item A
    li Item B
    li Item C
    <ul>
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
    </ul>
    

    jade 也知道那种标签是可以自己关闭的。

    img
    <img/>
    

    Block 扩展

    jade 提供的支持内联的嵌入标签

    a: img
    <a><img/></a>

    属性

    标签属性看起来比较像html, 然后它们的值只是规则的javascript.

    a(href='google.com') Google
    a(class='button', href='google.com') Google
    <a href="google.com">Google</a>
    <a class="button" href="google.com">Google</a>
    

    普通的javascript扩展也可以使用:

    - var authenticated = true
    body(class=authenticated?'authed':'anon')
    <body class="authed"></body>
    

    Boolean 属性

    input(type='checkbox', checked)
    input(type='checkbox', checked=true)
    input(type='checkbox', checked=false)
    input(type='checkbox', checked=true.toString())
    <input type="checkbox" checked="checked" />
    <input type="checkbox" checked="checked" />
    <input type="checkbox" />
    <input type="checkbox" checked="true" />
    
    doctype html
    input(type='checkbox', checked)
    input(type='checkbox', checked=true)
    input(type='checkbox', checked=false)
    input(type='checkbox', checked=true && 'checked')
    <!DOCTYPE html>
    <input type="checkbox" checked>
    <input type="checkbox" checked>
    <input type="checkbox">
    <input type="checkbox" checked="checked">
    

    Class 属性

    类属性只是简单的字符串、 但是它们可以代表一系列类名, 它们是从javascript中生成的.

    - var classes = ['foo', 'bar', 'baz']
    a(class=classes)
    //- the class attribute may also be repeated to merge arrays
    a.bing(class=classes class=['bing'])
    <a class="foo bar baz"></a>
    <a class="foo bar baz bing"></a>
    

    Class 字面名称

    就是html 标签中class 属性的名称

    a.button
    <a class="button"></a>
    

    默认的标示是div:

    .content
    <div class="content"></div>
    

    ID 字面名称

    就是html 标签中id属性的名称

    a#main-link
    <a id="main-link"></a>
    

    默认是div

    #content
    <div id="content"></div>

    存文本

    Jade提供了三中方式.  、

    Piped Text

    使用 | 字符

    | Plain text can include <strong>html</strong>
    p
    | It must always be on its own line
    Plain text can include <strong>html</strong>
    <p>It must always be on its own line</p>
    

    内联标签

    p Plain text can include <strong>html</strong>
    <p>Plain text can include <strong>html</strong></p>
    

    块标签

    使用.  一个较好的例子就是script 和style.  为了这样做,你仅仅使用 . 在一个标签之后(没有空格)

    script.
      if (usingJade)
        console.log('you are awesome')
      else
        console.log('use jade')
    <script>
      if (usingJade)
        console.log('you are awesome')
      else
        console.log('use jade')
    </script>

    代码

    Jade 可以进行javascript代码的编写.

    非缓存代码

    Unbuffered 代码以- 开始.

    - for (var x = 0; x < 3; x++)
    li item
    <li>item</li>
    <li>item</li>
    <li>item</li>
    

    缓存代码

    缓存代码以= 开始

    p
    = 'This code is <escaped>!'
    <p>This code is &lt;escaped&gt;!</p>
    
    p= 'This code is' + ' <escaped>!'
    <p>This code is &lt;escaped&gt;!</p>
    

     

    注释

    // just some paragraphs
    p foo
    p bar
    <!-- just some paragraphs -->
    <p>foo</p>
    <p>bar</p>
    
    //- will not output within markup
    p foo
    p bar
    <p>foo</p>
    <p>bar</p>
    

    块注释

    body
    //
        As much text as you want
        can go here.
    <body>
      <!--
      As much text as you want
      can go here.
      -->
    </body>

    条件

    进行判断

    - var user = { description: 'foo bar baz' }
    #user
    if user.description
    h2 Description
    p.description= user.description
    else
    h1 Description
    p.description User has no description
    <div id="user">
      <h2>Description</h2>
      <p class="description">foo bar baz</p>
    </div>
    
    unless user.isAnonymous
    p You're logged in as #{user.name}
    if !user.isAnonymous
    p You're logged in as #{user.name}

    迭代

    ul
    each val in [1, 2, 3, 4, 5]
    li= val
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    
    ul
    each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val
    <ul>
      <li>0: zero</li>
      <li>1: one</li>
      <li>2: two</li>
    </ul>
    
    ul
    each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val
    <ul>
      <li>1: one</li>
      <li>2: two</li>
      <li>3: three</li>
    </ul>
    

    Case语句

    - var friends = 10
    case friends
    when 0
    p you have no friends
    when 1
    p you have a friend
    default
    p you have #{friends} friends
    <p>you have 10 friends</p>
    

    Case Fall Through

    - var friends = 0
    case friends
    when 0
    when 1
    p you have very few
    default
    p you have #{friends} friends
    <p>you have very few friends</p>
    

    Block 扩展

    - var friends = 1
    case friends
    when 0: p you have no friends
    when 1: p you have a friend
    default: p you have #{friends} friends
    <p>you have a friend</p>

    过滤

    :markdown
      # Markdown
    
    I often like including markdown documents.
    script
    :coffee
        console.log 'This is coffee script'
    <h1>Markdown</h1>
    <p>I often like including markdown documents.</p>
    <script>console.log('This is coffee script')</script>

    混入

    //- Declaration
    mixin list
    ul
    li foo
    li bar
    li baz
    //- Use
    +list()
    +list()
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
    
    mixin pets(pets)
    ul.pets
    - each pet in pets
    li= pet
    +pets(['cat', 'dog', 'pig'])
    <ul class="pets">
      <li>cat</li>
      <li>dog</li>
      <li>pig</li>
    </ul>
    
    mixin article(title)
    .article
    .article-wrapper
    h1= title
    if block
    block
    else
    p No content provided
    
    +article('Hello world')
    
    +article('Hello world')
    p This is my
    p Amazing article
    <div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>No content provided</p>
      </div>
    </div>
    
    <div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>This is my</p>
        <p>Amazing article</p>
      </div>
    </div>
    
    mixin link(href, name)
    a(class!=attributes.class, href=href)= name
    
    +link('/foo', 'foo')(class="btn")
    <a class="btn" href="/foo">foo</a>

    包含

    // index.jade
    doctype html
    html
    include includes/head
    body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot
    // includes/head.jade
    head
    title My Site
    script(src='/javascripts/jquery.js')
    script(src='/javascripts/app.js')
    
    // includes/foot.jade
    #footer
    p Copyright (c) foobar
  • 相关阅读:
    刷题[极客大挑战 2019]HardSQL
    刷题[安洵杯 2019]不是文件上传
    归并排序算法及其JS实现
    快速排序算法原理及其js实现
    圣杯布局
    什么是文档流
    AngularJs四大特性
    call,apply,bind的区别
    计算给定数组 arr 中所有元素的总和的几种方法
    es6之Decorator
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/3527082.html
Copyright © 2011-2022 走看看