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

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语法对缩进要求非常严格,所以父级和子级的缩进是两个字符,缩进有问题会报错吆

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,349评论 1赞 92
  • 原文链接:http://www.jianshu.com/p/2a9367afe9e7 1510997059(1)....
    悬笔e绝阅读 5,746评论 0赞 0
  • Express框架里内嵌了Jade模板引擎。正好项目里也要用到,本篇整理了下Jade的相关用法。 安装与执行 标签...
    张歆琳阅读 25,743评论 8赞 42
  • 林花谢了春红,绿意渐浓,又到五月初五。端午佳节,一年一次,从古至今。每每临近这个传统节日,浓浓的粽叶香、甜甜的糯米...
    梅的絮语阅读 856评论 0赞 0
  • 我做了个很美的梦,梦里有个我喜欢他,他也刚好喜欢我的人,可惜的是,梦醒了。我也再也记不清他的脸。
    我想和你一起慢慢变老qyt阅读 248评论 0赞 0

友情链接更多精彩内容