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