jade模板简单使用及页面之间嵌套关系

html-css012

jade模板简单使用及页面之间嵌套关系,第1张

Jade既然是模板引擎,页面中有公用的部分肯定是要封装成一个模板,在其他页面需要使用的时候直接调用就好。调用的时候有两种方法:

一    使用include引入模板,模板中的css,js可以正常加载,但是如果想在当前页面再引入css,js文件页面就会报错,目前还不知道怎么解决

    demo01.jade

  head.jade

footer.jade

demo01.jade生成的html

二是用extends引入模板

  index页面

      page6.jade

下面是生成的html页面

这样引入既可以把相同的css和js写到一个模板里面多次使用,同时也可以在引用模板的index.jade页面再引入单个的css和js,并可以直接写内部样式和js逻辑。值得注意的是,模板page06.jade中引入的js要放到block append scripts上面,如果放到下面渲染出来的页面公用js会在又引入的js文件下面(就会出现你虽然引入jquery了,但是你index.jade模板中使用$依然报错)。

另外,index.jade页面的block append scripts(这个scripts是个名字,随便命名),是模板中引入的js放到index.jade页面引入js的前面,还有一种block prepend scripts的写法,模板中引入的js放到index.jade页面引入的js后面(不推荐使用)。

温馨提示:jade语法对缩进要求非常严格,所以父级和子级的缩进是两个字符,缩进有问题会报错吆

叠加方式如下。

jade嵌套的使用jade是express自带的模板引擎jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板例如有一个主jade文件layout.jade,引用top.jade和footer.jade这两个如下设计1:layout.jadedoctypehtmhtmlheadtitlebloglink(rel='stylesheet',href='/stylesheets/style.css'bodydiv#m_divincludetopblockcontent_maiincludefooter2top.jaddiv#topdiv#menuulfooter.jaddiv#footerdiv#footer_infofooter主要是红色部分include:用来引用外部jade文件block:标识当引用layout是显示的部分4:index.jade文件,引用layout.jade文件通extendslayout引用,类似于asp.netmasterxtendslayoublockcontent_maindiv#m_lefdiv#m_left_lodiv#logfieldset#login_fmlegend登录labelinput(type="text",id="username",name="username"style="width:150px,border:1px#ccccffsolid,")brbrlabeinput(type="password",id="pwd",name="pwd"style="width:150px,border:1px#ccccffsolid,")bbutton(id="loginBtn",name="loginBtn",οnclick="loginClick()")登录模板引用完成。

英国声迹调音台好。英国SOUNDTRACSS18-414路调音台,英国声迹公司曾先后推出Jade,Solitaire,SequelII系列调音台,现在更是为了提供给客户多种选择推出了较低价位的琥珀系列调音台。