静态文件html页面树结构如下:
base.html代码结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>
{% block title %} {% endblock %}
</title>
{% block extCSS %} {% endblock %}
</head>
<body>
{% block nav %} {% endblock %}
{% block content %} {% endblock %}
{% block footer %} {% endblock %}
{% block extJS %} {% endblock %}
</body>
</html>base_main.html代码如下: 继承原来的页面进行填坑操作
{% extends 'base.html' %}
{% block extCSS %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
{% endblock %}all_stu.html代码如下: 继承自base_main.html, 填坑title与content, 这样做的好处在于多个页面有相同元素的时候, 我们可以把他提取到一个基础文件里面, 然后不同的页面进行继承后就可以使用了, 只需要将不同的内容进行安装即可.
{% extends 'base_main.html' %}
{% block title %}
学生选课结果信息
{% endblock %}
{% block content %}
<ul>
{% for stu in stus %}
<li>
id:{{ stu.s_id }}
姓名:{{ stu.s_name }}
<a href="/stu/stutocourse/{{ stu.s_id }}">课程</a>
</li>
{% endfor %}
</ul>
{% endblock %}