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.