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
  • 相关阅读:
    border-color
    animation
    servlet injection analysis
    事务隔离级别
    write RE validation
    Filter
    Annotation
    Injector
    gradle的安装
    Build tool
  • 原文地址：https://www.cnblogs.com/rongfengliang/p/3527082.html
Copyright © 2011-2022 走看看