node.js+express+jade系列四：jade嵌套的使用

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", οnclick="loginClick()") 登录

模板引用完成

 

转载于:https://www.cnblogs.com/ajun/p/3546455.html