码迷,mamicode.com
首页 > 其他好文 > 详细

Jade学习笔记

时间:2014-09-10 15:27:50      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   os   io   使用   ar   strong   

  初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习。

  jade是基于缩进的,所以tab与space不能混用;

  属性的设置:link(rel=‘stylesheet‘, href=‘/stylesheets/style.css‘);

  变量的定义:- var users = ["Sally","Joseph","Sam","Mike"]  不要var也可以;

  内容赋值:p= user 或 p ${user} 前者常用于内容就是变量,后者常用于拼接‘Hello ‘ + ${user} , p Hello World 则是后者直接为内容;

  条件语句:

//case语句
- num = 10
case num
    when 0
        p you have no friends
    when 1 : p you have friends
    default
        p you have #{num} friends

//if语句
- options = { description : ‘reference conditionals‘ }
- flag = false
#user
    if options.description
        h2 Description
        p.description= options.description
    else if flag
        h2 Description
        p.description.
            User has no description,
            why not add one...
    else
        h1 Description
        p.description User has no description.

- opts = { flag : false }
#sum
// ! 与 unless 同理
    if !opts.flag
        h2 Hello!
        p= options.description
    unless opts.flag
        h2 World!
        p= options.description

  循环语句:

- for (var i=0;i<3;i++)
    li shit

- var users = ["Sally","Joseph","Sam","Mike"];
- each user in users
    p= user

- addrs = [‘BeiJing‘,‘GuangZhou‘,‘DongGuan‘]
- for addr in addrs
    p #{addr}

- names = {xing:‘ye‘,ming:‘renming‘};
- each val,key in names  
    li #{key} : #{val}

  多行输出:

p 
    | You are sleeping.
    | No I just have a rest.
p.
    Second function.
    Just for testing.    
script.
    console.log(‘Hello world‘);
    console.log(‘Hello life‘);
script
    |console.log(‘Hello world‘);
    |console.log(‘Hello life‘);

  注释:

//
  注释块
  ‘//-‘是服务器端注释

   转义 与 非转义 :

//- 默认和!=是不转义,不安全(标签直接执行); = 则会转义 安全(标签转字符串)
p What‘s up <escaped> 1
p= ‘What s‘ + ‘ up <escaped> 2‘
p
    = ‘What s up <escaped> 3‘
p!= ‘What s‘ + ‘ up <escaped> 4‘
p
    != ‘What s up <escaped> 5‘

  IE条件注释:

<!--[if IE 8]>
    p This is IE 8
<![endif]-->

  extends : 

//- layout.jade
doctype html
html
  head
    block title
      title Default title
  body
    block content
//- index.jade
extends ./layout.jade

block title
  title Article Title

block content
  h1 My Article
<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

  filters :

filters是编译时候运行,所以不能使用动态内容,在服务器端编译。(需要先安装markdown模块)

: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>

  include : 

include ./includes/foot.jade 
include:markdown article.md
//可以是js css等文件 也可以是Filtered Text

  Mixins : 创建可重复使用的jade块

mixin article(title)
    .article
        .article-wrapper
        h1= title
                if block    //block关键字,就是块
                    block
                else
                    p No content provide
+article(‘Hello world‘)
+article(‘Hello DongGuang‘)
    p This is my 
    p Hometown
mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name

+link(‘/foo‘, ‘foo‘)(class="btn")

  直接输出文本: 前面加 |  例如:|Plian text can include <strong>html<strong> 否则会把Plian当做标签<Plian></Plian>

  子集标签除了缩进,还支持a: span: em 这种写法,冒号后面必须加空格。

    

 

Jade学习笔记

标签:des   style   blog   color   os   io   使用   ar   strong   

原文地址:http://www.cnblogs.com/viccici/p/3964399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!