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", onclick="loginClick()") 登錄

模板引用完成

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM