jade模板引擎mixins

mixins基本用法：

mixin demo
    p this is a demo
//- 调用方法
+demo

this is a demo

带有参数的mixins方法：

mixin info(name, skills)
    p my name is #{name}
    ul.skill-box
        li #{skill}
+info('sqrtthree', ['html', 'css', 'javascript', 'nodejs'])

my name is sqrtthree

    
html
    
css
    
javascript
    
nodejs

带有不定参的mixin方法：

mixin info(calssName, ...skills)
    ul(class='#{className}')
        each skill in skills
            li #{skill}
+info('list', 'html', 'css', 'javascript', 'nodejs')


    
html
    
css
    
javascript
    
nodejs

属性传递的mixin方法：

mixin attr(text)
    p(class=attributes.class) #{text}
+attr('text')(class='tips')

text

Jade模板block

block demo
    p this is a demo
block demo
block demo
block demo

this is a demo.
this is a demo.
this is a demo.
this is a demo.

调用其他文件中的mixin模块：

doctype html
html
  head
    title this is a demo.
  body
    h1 demo.

    block cont

extends layout  // 这里的 layout 指的是需要继承的模板文件
block cont
  h2 Look, this is a demo.
  p this is a paragraph.



  
    
  
  
    
demo.
    
Look, this is a demo.
    
this is a paragraph.
  

或者使用includes

div#footer
  p copyright.

doctype html
html
  head
    title this is a demo.
  body
    h1 Hello, World.

    include footer



  
    
  
  
    
Hello, World.
    

      
copyright.