Flask模板高级技巧

用户8589624

发布于 2025-11-15 19:19:55

1080

文章被收录于专栏：nginxnginx

Flask模板高级技巧

四、控制语句

4.1 条件判断

{% if user.age < 18 %}
    <p>未成年用户</p>
{% elif user.age > 60 %}
    <p>老年用户</p>
{% else %}
    <p>成年用户</p>
{% endif %}

4.2 循环语句

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>标题</th>
            <th>内容</th>
        </tr>
    </thead>
    <tbody>
        {% for post in posts %}
        <tr class="{{ loop.cycle('odd', 'even') }}">
            <td>{{ loop.index }}</td>
            <td>{{ post.title }}</td>
            <td>{{ post.content }}</td>
        </tr>
        {% else %}
        <tr>
            <td colspan="3">暂无文章</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

循环变量说明：

loop.index: 当前迭代次数(从1开始)
loop.index0: 当前迭代次数(从0开始)
loop.revindex: 反向迭代次数
loop.first: 是否第一次迭代
loop.last: 是否最后一次迭代
loop.length: 序列长度

4.3 宏定义（模板函数）

定义宏：

{% macro render_comment(comment) %}
<div class="comment">
    <p>{{ comment.author }} 说：</p>
    <blockquote>{{ comment.content }}</blockquote>
</div>
{% endmacro %}

使用宏：

{{ render_comment(comment) }}

<!-- 导入其他模板中的宏 -->
{% from 'macros.html' import render_comment %}

五、模板继承

5.1 基础模板(base.html)

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}默认标题{% endblock %}</title>
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    {% endblock %}
</head>
<body>
    <div class="container">
        {% block content %}
        <h1>默认内容</h1>
        {% endblock %}
    </div>
    
    {% block footer %}
    <footer>
        <p>&copy; 2023 My App</p>
    </footer>
    {% endblock %}
</body>
</html>

5.2 子模板继承

{% extends "base.html" %}

{% block title %}用户主页 - {{ super() }}{% endblock %}

{% block head %}
    {{ super() }}
    <style>
        .profile { color: blue; }
    </style>
{% endblock %}

{% block content %}
    <div class="profile">
        <h1>{{ user.username }}的个人资料</h1>
        <p>年龄: {{ user.age }}</p>
    </div>
{% endblock %}

{% block footer %}
    <footer>
        <p>&copy; 2023 用户中心</p>
    </footer>
{% endblock %}

5.3 包含其他模板

<!-- 包含头部 -->
{% include 'header.html' %}

<!-- 带参数包含 -->
{% include 'user_card.html' with user=current_user %}

<!-- 忽略缺失模板 -->
{% include 'sidebar.html' ignore missing %}

六、加载静态文件

6.1 静态文件组织

标准项目结构：

myapp/
├── app.py
├── static/
│   ├── css/
│   ├── js/
│   └── images/
└── templates/

6.2 引用静态文件

<!-- CSS文件 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

<!-- JavaScript文件 -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

<!-- 图片 -->
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">

<!-- 使用缓存清除 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css', v=1.0) }}">

6.3 静态文件版本控制

在配置中添加版本号：

app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 3600  # 1小时缓存
app.config['STATIC_VERSION'] = '1.0.0'

模板中使用：

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v={{ config.STATIC_VERSION }}">

6.4 使用CDN资源

{% if config.CDN_ENABLED %}
    <script src="https://cdn.example.com/jquery/3.6.0.min.js"></script>
{% else %}
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
{% endif %}