Jinja模版继承

一、前言

　　Jinja模版继承还是比较强大的，通过 {% block %}来定义可以被自被子模版继承的内容。

二、模版继承讲解

1、首先写一个父模版，定义为page1.html

<!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.0">
    {% block head %}
        <link rel="stylesheet" href="{{ url_for('static',filename='style.css')}}">
        <title>{% block title %}My Webpage{% endblock %} </title>
        <h1>我是父页面</h1>
    {% endblock %}   
    
</head>
<body>
    <div id="content">{% block content %}新页面{% endblock %}</div>
    <div id="footer">
        {% block footer %}
            &copy;Copyright 2022 by limozi
        {% endblock %}

    </div>
</body>
</html>

2、再写一个子模版继承父模版的内容，定义为page2.html

<!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.0">
    {% extends "page1.html" %}
    {% block title %}index{% endblock %}
    {% block head %}
        {{ super() }}
    {% endblock %}
    {% block content %}
        <h1>我是继承页面</h1>
    {% endblock %}
</head>
<body>
    
</body>
</html>

三、继承执行结果

1、page1页面

 

2、page2页面

 

posted @ 2022-09-09 10:45  梅梅不想踩坑  阅读(53)  评论(0)  编辑  收藏  举报