知识点
- 学习 art-template 的模板继承
目录结构
├── index.html
├── layout.html
├── list.html
├── header.html
├── footer.html
核心代码
<!-- 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>
<script src="/node_modules/bootstrap/dist/js/bootstrap.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 }}
<!-- header.html -->
<div>
<h1>公共的头部</h1>
</div>
<!-- footer.html -->
<div>
<h1>公共的底部</h1>
</div>
