jade模板引擎mixins

mixins基本用法:

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

<p>this is a demo</p>

带有参数的mixins方法:

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

<p>my name is sqrtthree</p>
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>nodejs</li>
</ul>

带有不定参的mixin方法:

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

<ul class='list'>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>nodejs</li>

属性传递的mixin方法:

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

<p class='tips'>text</p>

Jade模板block

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

<p>this is a demo.</p>
<p>this is a demo.</p>
<p>this is a demo.</p>
<p>this is a demo.</p>

调用其他文件中的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.

<!DOCTYPE html>
<html>
  <head>
    <title>this is a demo.</title>
  </head>
  <body>
    <h1>demo.</h1>
    <h2>Look, this is a demo.</h2>
    <p>this is a paragraph.</p>
  </body>
</html>

或者使用includes

div#footer
  p copyright.

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

    include footer

<!DOCTYPE html>
<html>
  <head>
    <title>this is a demo.</title>
  </head>
  <body>
    <h1>Hello, World.</h1>
    <div id="footer">
      <p>copyright.</p>
    </div>
  </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容