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

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

作者: 万年孤寂_ | 来源:发表于2017-08-16 20:53 被阅读0次

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既然是模板引擎,页面中有公用的部分肯定是要封装成一个模板,在其他页面需要使用的时候直接调用就好。调用的时候...

  • 2018-12-05 jade

    1jade(模板引擎)使用jade解析字符串下载jade(命令:cnpm install jade/npm ins...

  • 模板引擎-jade模板库-1

    模板引擎: jade-破坏式、侵入式、强依赖 ejs-温和、非侵入式、弱依赖性 模板引擎:生成页面 1. jade...

  • NodeJS 模板引擎 ejs&jade

    模板引擎其实就是渲染页面用的,主流的主要有jade和ejs;jade是一个破坏式的模板引擎,侵入式、强依赖;如果用...

  • 模板引擎

    1.模板引擎:模板引擎编译成html,静态js,css; jade与pug同名 2.如何使用jade解析字符串: ...

  • 在 express 项目中使用 html 模板

    在 express 项目中使用 html 模板 express默认使用jade模板,可以配置让其支持使用ejs或h...

  • 在Express中使用html模板

    express默认使用jade模板,可以配置让其支持使用ejs或html模板。 第一条:若出现返回的html模板不...

  • jade模板引擎与gulp自动化构建工具

    jade使用 jade是一款基于haml的html模板引擎,已改为pug 1.全局安装 npm install j...

  • Express使用html模板

    express默认使用jade模板,可以配置让其支持使用ejs或html模板。 1. 安装ejs 在项目根目录安装...

  • 小程序-template嵌套template的数据传递

    说明 一个页面需要多个界面进行组合模板1:courses-isbuy 代码: 模板2:分类模板 嵌套组合模板(模板...

网友评论

      本文标题:jade模板简单使用及页面之间嵌套关系

      本文链接:https://www.haomeiwen.com/subject/ibtirxtx.html