jade复用

时间 2019-11-16

标签 jade 栏目 Node.js 繁體版

原文原文链接

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

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

layout.jadespa

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

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

extends ./layout.jade

block title
  title Article Title

block content
  h1 My Article

生成htmlhtm

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

也能够经过include 引入 blog

include ./layout.jade

若是想要追加代码片断，可使用 append 和 prepend 指令。append 用于在原有代码片断以后追加，prepend 用于在原有代码片断以前追加。继承

layout.jadejade

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

test.jadeit

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>