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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。