jade笔记模板教程 – 随身笔记

nodejs模板 ejs

*注意学习使用jade模板时要注意元素的缩进和空格，否则会出错。

代码概况

doctype
html
  head
    title #{title}
    script(type='text/javascript').
     alert(1);
    style.
     body{background: red;}

  body
    div#container.wo.haha 1123123
    a(href='http://qq.com' title='haha') 链接
    div: div 1


翻译如下：
<!DOCTYPE html>
<html>
  <head>
    <title>111</title>
    <script type="text/javascript">
      alert(1);
    </script>
    <style>
      body{background: red;}
    </style>
  </head>

  <body>
    <div id="container" class="wo haha">1123123</div>
    <a href="http://qq.com" title="haha">链接</a>
    <div>
      <div>1</div> 
    </div>
  </body>
</html>

创建标签

创建标签

doctype
<!DOCTYPE html>


html
<html></html>

meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


link(type="text/css",rel="stylesheet",href="./stylesheets/style.css")
<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

div
<div></div>


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



div#container.wo.haha
<div id="container" class="wo haha"></div>


#foo //由于div用的比较多所以直接这样就可以创建div了
<div id="foo"></div>

内嵌(元素的缩进很关键;同级的要并列，内嵌的要缩进)

方法一
div
 span
  <div><span></span></div> 

方法二
div: div 1
  <div><div>1</div></div>

添加文本内容

处理小段文本
p wahoo!
<p>wahoo!</p>


处理大段文本 
效果还是在同一行上但是有了层次感
p 
 | foo bar baz
 | rawr rawr
 | super cool
 | go jade go
 | &nbsp;
<p>foo bar baz rawr.....&nbsp;</p>


p.
 123sdf
 sdfsdfdsf
 sdfdf
<p>123sdf sdfsdfdsf sdfdf</p>



p 这里是<b>文字</b> //解析html
<p>这里是<b>文字</b></p>


p= '这里是<b>文字</b>' //不解析html
<p>这里是&lt;b&gt;文字&lt;/b&gt;</p>

html识别和转义

//不识别html
- var wo='<span style="color:red"></span>'
div #{wo}
或者
div= wo

输出：&lt;span style=&quot;color:red&quot;&gt;&lt;/span&gt;


//识别html
- var wo='<span style="color:red"></span>'
div !{wo}
或者
div!= wo
输出：<span style="color:red"></span>

变量

例如数据是{tit:'标题'}
title #{tit}
<title>标题</title>


- var name = 'yaochun'
p my name is #{name}
<p>my name is yaochun</p>



| !{"<script>alert(1)</script>"}
<script>alert(1)</script>



- var name = '<script></script>'
| #{name}
&lt;script&gt;&lt;/script&gt;



- var html = "<script src='javascripts/jquery-1.8.3.min.js'></script>"
| !{html}
<script src="javascripts/jquery-1.8.3.min.js"></script>




| !{'<link href="https://sdeno.com/wp-content/themes/flat_ui/css/flat-ui.min.css" rel="stylesheet">'}



script(type='text/javascript').
 $(function(){
 alert( $().jquery );
 });


style.
 #container{border: 1px solid red;}

变量输出表达式

- var wo="<div>"
div #{wo}  或者  div= wo    

另外 div !{wo}  div!= wo //就可以直接在页面中识别出html标签而不转化为&lt; &quot;

嵌入js语法

-function run(str){return str.replace(/(<a .+?>)|(<\/a>)/ig,"");}  //只移除a标签
  !{delHtmlTag(  val.post_con  )}

引入外部文件

include head/head.jade   //引入head目录下的head.jade
include head.jade        //引入跟目录下的head.jade

extends ./layout.jade   标识符block 涉及到继承问题，引入的内容要被当前内容覆盖

script(type="text/javascript",src='./javascripts/1.js')
<script type="text/javascript" src="./javascripts/1.js"></script>

link(type="text/css",rel="stylesheet",href="./stylesheets/style.css")
<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

元素属性设置用()

input(value='值' disabled='disabled')#haha.txt
<input value="值" disabled="disabled" id="haha" class="txt">

a(href='http://qq.com' title='haha') 链接
<a href="http://qq.com" title="haha">链接</a>

直接显示表达式

p \#{tit}
<p>#{tit}</p>

IE hack css

IE 10以上版本不识别

| !{' <!--[if gte IE 7]> <link href="css/flat-ui.min.css" rel="stylesheet"> <![endif]--> '}   //只有大于IE7才能识别

<!--[if gte IE 7]> <link href="css/flat-ui.min.css" rel="stylesheet"> <![endif]-->

条件语句

if title=='1111'
  p You are owner!
else
  p You are #{title},and you are not owner!



类似switch语句
- friends = 1
  case friends
    when 0
       p you have no friends
    when 1
       p you have a friend
    default
       p you have #{title} friends


合并 when，满足friends = 0或者friends = 1都执行p you have a friend
- friends = 0
  case friends
    when 0
    when 1
      p you have a friend
    default
      p you have #{title} friends

循环遍历

- for (var i = 0; i < 3; i++)
    li #{i}

<li>0</li>
<li>1</li>
<li>2</li>

-----------------------------------

- var jobs = ["fe", "wandoujia"]
each job in jobs
  li= job

<li>fe</li>
<li>wandoujia</li>

------------------------------------

- var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
each val,key in jobs
  li #{key} : #{val}

<li>catagory : fe</li>
<li>company : wandoujia</li>
<li>local : beijing</li>

http://ju.outofmemory.cn/entry/143002

http://expressjs.jser.us/jade.html