布局文件layout.html：就是对文件的格式化输出（对其中的标签进行替换）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*共用样式*/ .pa-header{ height:48px; background-color: gold; } .pg-footer{ height:100px; background-color: lawngreen; } </style> <!--自定义样式--> {% block css %}{% end %} </head> <body> <div class="pa-header"> </div> <!--自定义内容--> <div class="pg-content"> {% block body %}{% end %} </div> <div class="pg-footer"></div> <script src=""> </script> <!--自定义js--> {% block js %}{% end %} </body> </html>
组件文件:form.html包含一个自定义form表单
<form action="/"> <input type="text"> <input type="submit"> </form> <!--也可以写点模板语言--> {% for item in list %} <h2>{{item}}</h2> {% end %}
内容文件：引入布局和组件
{% extends '../master/layout.html' %}
{% block css %}
<style>
.pg-content{
background-color: red;
}
</style>
{% end %}
{% block body %}
<h1>Index</h1>
<!--导入组件-->
{% include '../include/form.html' %}
{% end %}
{% block js %}
<script>
console.log('sd')
</script>
{% end %}