jade （pug）

最新推荐文章于 2024-04-29 09:17:59 发布

clayja

最新推荐文章于 2024-04-29 09:17:59 发布

阅读量1.6k

点赞数

分类专栏： Tools 其他文章标签： html jade pug

本文链接：https://blog.csdn.net/clayja/article/details/61423233

版权

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

  资料： 
 https://segmentfault.com/a/1190000006198621#articleHeader10 

  【jade】 

  编译：jade name.jade 编译成压缩后的html 

  jade -P name.jade 有缩进 

  jade -P -w name.jade 实时编译 

  语法： 

  1.子标签相对于父标签，缩进两个空格，标签与内容缩进一个空格 

  2.添加class，id 可在标签后直接添加例如（h1.class#id <==><h1 class = "class" id = "id"></h1>）div可省略标签名（.class#id <==> <div class="class" id="id"></div>）; 

  对于其他属性，在标签后的括号内写明即可（a(href = "http://www.baidu.com") <==> <a href="http://www.baidu.com"></a>） 

  3.对于大段文本，可以在标签后紧贴'.'(注意是紧贴，否则'.'也会被当成文本)，然后另起一行输入正常的文本（可以有html成对的标签）。（或：'|'表示换行，嵌套标签写法遵循jade语法规律 ） 

  4.注释： 

  单行注释：// <==> <!-- --> 

  非缓冲注释：//- 不会编译到html 

  块注释：//- 

  p balabala~~ 注释上层即注释上层包含的全部标签内容 

  IE注释：<!--[if IE 8]>balabala~<![end if]--> 

  5.变量赋值与替换： 

  jade name.jade -P -w --obj "{'course':'hello'}" (命令行传值) 

  jade name.jade -P -w -O name.json (json文件传值) 

  - var course = "jade" (文档声明变量，优先级最高) 

  变量替换：#{course.toUpperCase()} 

  6.转义与非转义： 

  转义（不保留变量中原始标签）： #{变量名} 或者 标签名= 变量名（p= 变量名） 

  非转义（保留变量中原始标签） ：!{变量名} 或者 标签名!= 变量名(p!= 变量名) 

  对于#{}或者!{}通过反斜线'\'表示（\#{something} <==> #{something}） 

  input(value=data)，当data无值是为空 

  7.循环语句： 

  while循环： 

  - var n = 0 

ul

  while(n < 4) 

  li= n++ 

  for循环： 

  - var course = { course: 'jade',level: 'high'} 

  - for （var k in course） 

  p= course[k] 

  each循环： 

  - each value,key in course 

  p #{key}: #{value} 

  遍历数组： 

  - var courses = ['node','jade','express'] 

  each item in courses 

  p= item 

  嵌套循环： 

  - var sections = [{id: 1,items:['a','b']},{id: 2,items:['c','d']}] 

dl

  each section in sections.length > 0?sections : [{id: 0,items:['none']}] 

  dt= section.id 

  each item in section.items 

  dd= item 

  8.条件语句： 

  if-else： 

  if 表达式 

  .... 

  else if 表达式 

  ..... 

  else 

  ...... 

  unless： 

  unless 表达式（表达式值为false执行） 

  ....... 

  case-when（类似于switch-case）： 

  case 变量 

  when 'balabala~' : ....... 

  when 'balabala~' : ....... 

  when 'balabala~' : ....... 

...

  default 

  ..... 

  9.mixin 

  普通mixin： 

  声明： mixin name 

  p jade study 

  调用：+name 

  带参数的mixin： 

  声明： 

  mixin study(name,courses) 

  p #{name} 

  ul.courses 

  each course in courses 

  li= course 

  调用： 

  +study('Ivan',['jade','node','js']) 

  嵌套的mixin： 

  声明： 

  mixin group(student) 

  h4 #{student.name} 

  +study(student.name,studeng.courses) 

  调用： 

  +group({name: 'Ivan',courses: ['jade','node','js']}) 

  mixin内联代码块： 

  声明： 

  mixin team(name) 

  h4 #{name} 

  if block //如果有代码块 

  block 

  else 

  p no block 

  调用： 

  +team('clayja') 

  p Good job! 

  mixin传递属性： 

  声明（单一属性）： 

  mixin attr(name) 

  p(class!=attributes.class) #{name} //这里传递的是class属性 

  //attributes已经转义，所以应该使用！=避免二次转义编译后: 

  调用： 

  +attr('attr')(class='magic') 

  声明（多属性）： 

  mixin attrs(name) 

  p&attributes(attributes) #{name} 

  调用： 

  +attrs('attrs')(class='attrClass',id='attrId') 

  mixin参数个数不确定： 

  声明： 

  mixin magic(name, ...items) 

  ul(class='#{name}') 

  each item in items 

  li= item 

  调用： 

  +magic('magic','jade','node','js') 

  10.模板继承： 

  layout.jade 

  doctype html 

  <!--[if IE 8]><html class='ie8'><![endif]--> 

  <!--[if IE 9]><html class='ie9'><![endif]--> 

  <!--[if !IE]><!--><html><!--<![endif]--> 

  head 

  include head 

  body 

  block desc 

  p desc from layout 

  block content //声明 

  </html> 

  index.jade 

  extends layout.jade //相对路径 

  block content 

  //当前文件声明的同名block将覆盖extends继承的 

  11.模板包含： 

  include filename（可以是jade、html） 

  12.filters(配合其他插件使用，如less，coffee，markdown) 

  语法： 

  :markdown或:less或:coffee 

  但不能传动态数据。 

  13.runtime 

  。。。。 

  14.html2jade: 

关注