母版

  1. 页面的公共部分
  2. 定义多个block块，让子页面进行覆盖
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  {% block page-css %}
  
  {% endblock %}
</head>
<body>

<h1>这是母板的标题</h1>

{% block page-main %}

{% endblock %}
<h1>母板底部内容</h1>
{% block page-js %}

{% endblock %}
</body>
</html>

 

继承

  1. {% extends '母版的名字' %}
  2. 重新复写block块
# 在子页面中使用如下语句继承

{% extends 'layouts.html' %}

 

 

注意事项

  • {% extends '母版的名字' %} 母版的名字带引号
  • {% extends '母版的名字' %} 写在第一行，上面不再写内容（如果写内容，在页面顶部会显示出来）
  • 要显示的内容要写在block块中
  • 多写一个 css\js 的 block 块

 

组件

  1. 把一小段共用的HTML文本写入一个HTML文件， nav.html
  2. 在需要该组件的模板中
{% include 'nav.html' %}

 

作者：Star-Hitian