首先有一些公共的模块，如头部、尾部，这些模块可以单独拿出来，然后在每一个要使用这些模块的地方包含这些公共的模块
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 ^_^