flask-继承之include

作者: 测试探索 | 来源:发表于2022-08-08 22:23 被阅读0次

flask-继承之include
Flask 框架（2）-模板
C++虚表结构分析笔记
flask-模板的继承
7、使用包含继承，设计我前端的样式，从前端向后传递数据
大数乘法
获取整个app用户所有操作的点
PHP基础 —— 引入php文件
2018-01-12//1.2继承
Android 性能优化

一、实现步骤

image.png

上图片的解读

当前页面的代码复用

image.png

二、目录结构及代码

image.png

app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    """  首页 """
    return render_template('index.html')


@app.route('/course')
def course():
    """  免费课程 """
    return render_template('course.html')


@app.route('/coding')
def coding():
    """  实战课程 """
    return render_template('coding.html')


@app.route('/article')
def article():
    """  手记 """
    return render_template('article.html')


@app.route('/wenda')
def wenda():
    """  问答课程 """
    question = "why"
    return render_template('wenda.html',question=question)

if __name__ == '__main__':
    app.run(debug=True)

base.html:此部分较继承，变动的为css部分，新增article .left和article .right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页-慕课网</title>
    <style type="text/css">
        .container {
            width: 600px;
            height: 500px;
            margin: 0 auto;
        }

        header {
            background: aqua;
        }

        article {
            background: azure;
            height: 500px;
        }

        article .left{
            background-color: blue;
            width: 60%;
            float: left;
        }

        article .right{
            background-color: rebeccapurple;
            width: 40%;
            float: left;
        }


        footer {
            background-color: coral;
        }
    </style>

    {% block head %}
    {% endblock %}
</head>
<body>
<div class="container">
    <header>
        {% block header %}
            页面头部[首页 免费课程 实战课程 金职位 专栏 猿问 手记]
        {% endblock %}
    </header>
    <article>
        {% block content %}
        <p>
            课程内容
        </p>

        {% endblock %}
    </article>
    <footer>页面底部</footer>
</div>
</body>
</html>

sidebar.html

<p> 课程推荐 </p>
<p>问题： {{ question }}</p>

wenda.html:本章节重要知识点，均在此,注意with context和without context的区别和现象展示

{% extends 'base.html' %}
{% block title_txt %}测试{% endblock %}
{% block content %}
    <aside class="left">
        左侧内容区域--问答
    <p>{{ self.title_txt() }}</p>
    </aside>
    <aside class="right">
        右侧内容区域--问答
        <p>问题： {{ question }}</p>
        <p>{{ self.title_txt() }}</p>
        {% include 'sidebar.html' with context %}
    </aside>
{% endblock %}

image.png

article.html

{% extends 'base.html' %}
{% block content %}
    <aside class="left">
        左侧内容区域--手记
    </aside>
    <aside class="right">
        右侧内容区域-- 手记
        {% include 'sidebar.html' %}
    </aside>
{% endblock %}

image.png