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>© 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>© 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 %}
总结
在这两篇教程中，我们全面学习了Flask模板系统的各个方面：
- 模板渲染基础与原理
- 各种对象属性的访问方式
- 内置过滤器和自定义过滤器
- 条件判断和循环控制语句
- 宏定义和模板继承体系
- 静态文件管理和版本控制
这些知识构成了Flask前端开发的基础，掌握它们后，你已经能够构建结构清晰、易于维护的Web应用界面。在接下来的专栏中，我们将深入探讨Flask的表单处理、数据库集成和用户认证等高级主题。
