jade复用

jade复用说白了就是模板的继承。

使用 block 标识符，设置一个可修改的代码片段

layout.jade

doctype html
html
  head
    block title
      title Default title
  body
    block content

test.jade 使用extends继承layout.jade，block后对应代码片段的文字

extends ./layout.jade

block title
  title Article Title

block content
  h1 My Article

生成html

<!DOCTYPE html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
  </body>
</html>

 也可以通过include 引入 

include ./layout.jade

 

如果想要追加代码片段，可以使用 append 和 prepend 指令。append 用于在原有代码片段之后追加，prepend 用于在原有代码片段之前追加。

layout.jade

doctype html
html
  head
    block title
      title Default title
  body
    block content
        p hello

test.jade

extends ./layout.jade

block title
  title Article Title

block append content
  h1 My Article

输出html

<!DOCTYPE html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <p>hello</p>
    <h1>My Article</h1>
  </body>
</html>

 

posted @ 2016-07-20 14:51  tinyphp  Views(251)  Comments(0)  Edit  收藏  举报