首先有一些公共的模塊，如頭部、尾部，這些模塊可以單獨拿出來，然后在每一個要使用這些模塊的地方包含這些公共的模塊
header.html
<div> <h1>公共的頭部</h1> </div>
footer.html
<div> <h1>公共的底部</h1> </div>
接着是總體布局模板，這個模板會包含一些公共模塊，並留下一些坑
layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"> {{ block 'head' }} <!-- 留一個樣式坑，將要留給繼承該模板的模板去填坑 --> {{ /block }} </head> <body> <!-- 包含公共頭部 --> {{ include './header.html' }} {{ block 'content' }} <!-- 留一個內容坑，將要留給繼承該模板的模板去填坑 --> <!-- 坑里可以有一些默認內容 --> <h1>默認內容</h1> {{ /block }} <!-- 包含公共底部 --> {{ include './footer.html' }} <script src="/node_modules/jquery/dist/jquery.js"></script> {{ block 'script' }} <!-- 留一個腳本坑 --> {{ /block }} </body> </html>
最后是最終要渲染的模板，這個模板要繼承布局模塊模板並將其留下的坑填上
index.html
{{extend './layout.html'}} {{ block 'head' }} <style> body { background-color: skyblue; } </style> {{ /block }} {{ block 'content' }} <div> <h1>index 頁面填坑內容</h1> </div> {{ /block }} {{ block 'script' }} <script> window.alert('index 頁面自己的 js 腳本') </script> {{ /block }}
並非必選填完所有坑
list.html
{{extend './layout.html'}} {{ block 'content' }} <div> <h1>列表頁自己的內容</h1> </div> {{ /block }}
end ^_^