中软首页
●  教育部授予:“软件工程专业大学生实习实训基地”资质
●  商务部授予:“中国服务外包示范培训中心”资质
●  工信部授予:国家信息技术紧缺人才培养工程“521计划”资格
●  获得腾讯授予:中国IT教育十大影响力品牌

≡ 技术知识库
当前位置:网站首页>技术知识库>>文章内容
HTML模板引擎——Jade
作者:中软卓越   来源:中软卓越    时间:2017-06-20 13:56:43    字体:[大] [中] [小]

安装


  • 项目基于 gulp gulp-jade

  • 项目安装 npm install


用法

jade使用 缩进式 语法,剔除了html的尖括号写法。

引用源码看下效果

//index.jade 
html(lang="en") head include tpl/meta title Document
body .content h2.title h2标签
    p.text p标签  // 引入list.jade  include tpl/list


  • 1.子元素换行,并缩进 两个 空格,或使用 : 连接子元素。


// 换行缩进方式 ul
  li // 以':'连接方式 ul: li // 编译结果 <ul>
  <li>li>
ul>


  • class id 直接使用 . # 代替,可连写多个,中间 不需要 空格,div可以省略。


#content.wrapper // 编译结果 <div id="content" class="warpper">div>


  • 属性使用() 紧跟 标签。


a(href='#') // 编译结果 <a href="#">a>


  • 使用 include 引入代码块,.jade可以省略。




include tpl/list // 编译结果:引入tpl/list.jade文件,并编译成html。
 欢迎来到中软国际教育集团技术知识库,小卓与您共同学习,共同进步!

中软国际教育科技微网页二维码
版权所有 © 2008-2014 北京中软国际教育科技股份有限公司 京ICP备09078625号-2 京公安备11010802014778号 隐私声明 | 联系我们 | 网站地图

华东

华南

华中

华北

西北

西南

东北