模板继承--宏

最新推荐文章于 2024-11-01 16:18:44 发布

dremcl

最新推荐文章于 2024-11-01 16:18:44 发布

阅读量136

点赞数

文章标签： flask

本文链接：https://blog.csdn.net/dremcl/article/details/105676471

版权

模板继承

Flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素提取出来，放在父模板中，并且父模板通过定义block给子模版开一个口，子模版根据需要，在实现这个block，假设现在有一个base.html这个父模板。

block 里面添加内容，在另外的文件中继承它里面的内容：{% extends ‘xxx.html’ %}
base.html:

{% block header %}
    <ur>
        <li>首页</li>
        <li>课程详情</li>
        <li>视频</li>
        <li>关于我们</li>
    </ur>
{% endblock %}

index.html:

{% extends 'base.html' %}

更改父模板中的数据，也需要用到block，还需在后面添加名字（重写父模板）若仍想调用父模板，可以用{{ super() }}：

<title>{% block title %}
{% endblock %}</title>
################################
{% block title %}
    首页
{% endblock %}

模板可嵌套但不能重名！！！！如：
不能多继承！！！！

{% block footer %}
    <div class="footer">
        这是底部
    </div>
{% block foo %}
    ....
{% endblock %}
{% endblock %}
#############################
{% block footer %}
    {% block foo %}
        haha...
    {% endblock %}
{% endblock %}

静态文件的配置

web应用中会出现大量的静态文件来使得网页更加生动美观，类似于css样式文件、javaScript脚本文件、图片文件、字体文件等静态资源。在Jinja中加载静态文件非常简单，只需要通过url_for全局函数就可以实现了。
在static文件夹下，创建各类文件！然后再html中引入该文件，例如：在头部引入css文件或者js文件

<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>

而图片这类资源需要放在主体部分里面：

<img src="{{ url_for('static', filename='images/1.jpg') }}" alt="">

模板的继承是可以使用的，而图片可以直接在子模板中的主体部分引入！

宏的使用

当有参数多个出现时，可以使用宏来使代码简化，宏的定义一般是{% macro 类的名字(重复出现的内容)：使用宏使这个模板简化：

<div class="item-group">
    <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2590480112.jpg" alt="" class="thumbnail">
    <p class="item-title">龙门</p>
    <p class="item-rating">
        {% set rating = 7.5 %}
        {% set lights = ((rating|int)/2)|int %}
        {% set halfsb = (rating|int)%2 %}
        {% set grays = 5 - lights - halfsb %}
        {% for light in range(0, lights) %}
        <img src="{{ url_for('static', filename='images/rate_light.png')}}" alt="">
        {% endfor %}
        {% for half in range(0, halfsb) %}
        <img src="{{ url_for('static', filename='images/rate_half.jpg')}}" alt="">
        {% endfor %}
        {% for gray in range(0, grays) %}
        <img src="{{ url_for('static', filename='images/rate_gray.png')}}" alt="">
        {% endfor %}
        {{ rating }}

而宏：

{% macro itemGroup(thumbnail, title, rating) %}
    <div class="item-group">
                <img src="{{ thumbanil }}" alt="" class="thumbnail">
                <p class="item-title">{{ title }}</p>
                <p class="item-rating">
                    {% set lights = ((rating|int)/2)|int %}
                    {% set halfsb = (rating|int)%2 %}
                    {% set grays = 5 - lights - halfsb %}
                    {% for light in range(0, lights) %}
                    <img src="{{ url_for('static', filename='images/rate_light.png')}}" alt="">
                    {% endfor %}
                    {% for half in range(0, halfsb) %}
                    <img src="{{ url_for('static', filename='images/rate_half.jpg')}}" alt="">
                    {% endfor %}
                    {% for gray in range(0, grays) %}
                    <img src="{{ url_for('static', filename='images/rate_gray.png')}}" alt="">
                    {% endfor %}
                    {{ rating }}
                </p>
            </div>
{% endmacro %}

之后只需在使用这个代码的地方替换：

<div class="list-group">
    {{ itemGroup('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2588279882.jpg', '小妇人', 8.1)}}
    {{ itemGroup('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2596184412.jpg', '君王', 7.7)}}
    <div class="item-group">
        <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2590480112.jpg" alt="" class="thumbnail">
        <p class="item-title">龙门</p>
        <p class="item-rating">
            {% set rating = 7.5 %}
            {% set lights = ((rating|int)/2)|int %}
            {% set halfsb = (rating|int)%2 %}
            {% set grays = 5 - lights - halfsb %}
            {% for light in range(0, lights) %}
            <img src="{{ url_for('static', filename='images/rate_light.png')}}" alt="">
            {% endfor %}
            {% for half in range(0, halfsb) %}
            <img src="{{ url_for('static', filename='images/rate_half.jpg')}}" alt="">
            {% endfor %}
            {% for gray in range(0, grays) %}
            <img src="{{ url_for('static', filename='images/rate_gray.png')}}" alt="">
            {% endfor %}
            {{ rating }}
        </p>
    </div>
</div>

将<div class="item-group">的内容更改成：{{ itemGroup('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2588279882.jpg', '小妇人', 8.1)}}这种形式

{% macro listGroup(module_title, items) %}
        <div class="item-list-group">
            <div class="item-list-top">
                <span class="module-title">{{ module_title}}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="list-group">
<!--                宏的调用-->
                {% for item in items[0:3] %}
                    {{ itemGroup(item.thumbnail, item.title, item.rating) }}
                {% endfor %}
                </div>
            </div>
    {% endmacro %}

{{ listGroup('电影', movies) }}
<hr>
{{ listGroup('电视剧', tvs) }}

两个宏合并之后：

<body>
<!--定义宏-->
    {% macro itemGroup(thumbnail, title, rating) %}
        <div class="item-group">
                    <img src="{{ thumbanil }}" alt="" class="thumbnail">
                    <p class="item-title">{{ title }}</p>
                    <p class="item-rating">
                        {% set lights = ((rating|int)/2)|int %}
                        {% set halfsb = (rating|int)%2 %}
                        {% set grays = 5 - lights - halfsb %}
                        {% for light in range(0, lights) %}
                        <img src="{{ url_for('static', filename='images/rate_light.png')}}" alt="">
                        {% endfor %}
                        {% for half in range(0, halfsb) %}
                        <img src="{{ url_for('static', filename='images/rate_half.jpg')}}" alt="">
                        {% endfor %}
                        {% for gray in range(0, grays) %}
                        <img src="{{ url_for('static', filename='images/rate_gray.png')}}" alt="">
                        {% endfor %}
                        {{ rating }}
                    </p>
                </div>
    {% endmacro %}
    {% macro listGroup(module_title, items) %}
        <div class="item-list-group">
            <div class="item-list-top">
                <span class="module-title">{{ module_title}}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="list-group">
<!--                宏的调用-->
                {% for item in items[0:3] %}
                    {{ itemGroup(item.thumbnail, item.title, item.rating) }}
                {% endfor %}
                </div>
            </div>
    {% endmacro %}
    <h1>豆瓣评分</h1>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input">
        </div>
        {{ listGroup('电影', movies) }}
        <hr>
        {{ listGroup('电视剧', tvs) }}
        </div>

    </div>
</body>