jade是express自帶的模板引擎
jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板
例如
有一個主jade文件layout.jade,引用top.jade和footer.jade這兩個
如下設計
1:layout.jade的文件
doctype html
html
head
title blog
link(rel='stylesheet', href='/stylesheets/style.css')
body
div#m_div
include top
block content_main
include footer
2:top.jade
div#top
div#menu
ul
li
a(href="/") 首頁
li
a(href="/") 博文
li
a(href="/") 隨筆
li
a(href="/") 管理
3:footer.jade
div#footer
div#footer_info footer
主要是紅色部分
include:用來引用外部jade文件
block:標識當引用layout是顯示的部分
4:index.jade文件,引用layout.jade文件
通過extends layout 引用,類似於asp.net中的master頁面
extends layout
block content_main
div#m_left
div#m_left_login
div#login_success
fieldset#login_fm
legend 登錄
label 用戶名:
input(type="text",id="username",name="username" style="width:150px;border:1px #ccccff solid;")
br
br
label 口 令:
input(type="password", id="pwd",name="pwd" style="width:150px;border:1px #ccccff solid;")
br
br
button(id="loginBtn",name="loginBtn", onclick="loginClick()") 登錄
模板引用完成
