# 二、摸版 ## 摸版 > render\_template 渲染摸版，会在程序文件夹中 templates 子文件夹中寻找模板 ### Jinja2摸版 ```bash mkdir templates echo '

Hello, World!

' > templates/index.html echo '

Hello, {{ name }}!

' > templates/user.html (myproject) [root@localhost myproject]# python app.py ``` ```python from flask import Flask, render_template app = Flask(__name__) app.debug = True @app.route('/') def index(): return render_template('index.html') @app.route('/user/') def user(name): return render_template('user.html', name=name) if __name__ == '__main__': app.run(host='0.0.0.0',port=8080) ``` 测试 ```bash [root@localhost ~]# curl 127.0.0.1:8080

Hello, World!

[root@localhost ~]# curl 127.0.0.1:8080/user/admin

Hello, admin!

``` ### 变量过滤器 * Jinja2 能识别所有类型的变量，甚至是一些复杂的类型，例如列表、字典和对象。在模板 中使用变量的一些示例如下： ```html

A value from a dictionary: {{ mydict['key'] }}.

A value from a list: {{ mylist[3] }}.

A value from a list, with a variable index: {{ mylist[myintvar] }}.

A value from an object's method: {{ myobj.somemethod() }}.

``` | 过滤器名 | 说　　明 | | ---------- | --------------------- | | safe | 渲染值时不转义 | | capitalize | 把值的首字母转换成大写，其他字母转换成小写 | | lower | 把值转换成小写形式 | | upper | 把值转换成大写形式 | | title | 把值中每个单词的首字母都转换成大写 | | trim | 把值的首尾空格去掉 | | striptags | 渲染之前把值中所有的 HTML 标签都删掉 | ### IF控制器 ```html ``` ### For控制器 ```html ``` ### 宏控制器 ```bash {% macro render_comment(comment) %}
  • {{ comment }}
    • {% endmacro %} ``` 为了重复使用宏，我们可以将其保存在单独的文件中，然后在需要使用的模板中导入： ```html {% import 'macros.html' as macros %} ``` 需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有模板中，以避免重复： ```html {% include 'common.html' %} ``` ### 摸版继承 创建基础摸版，可被其他摸版调用: base.html ```html {% block head %} {% block title %}{% endblock %} - My Application {% endblock %} {% block body %} {% endblock %} ``` 基模板的衍生模板 > 注意新定义的 head 块，在基模板中其内容不是空的，所以使用 super() 获取原来的内容 ````html {% extends "base.html" %} {% block title %}Index{% endblock %} {% block head %} {{ super() }} {% endblock %} {% block body %}

    Hello, World!

    {% endblock %} ``` ```` ### 集成 Bootstrap ```bash (myproject) [root@localhost myproject]# pipenv install flask-bootstrap ``` ```python # app.py from flask_bootstrap import Bootstrap '''' bootstrap = Bootstrap(app) ``` ### 使用 Flask-Bootstrap 的模板 > Bootstrap-Flask的出现是为了替代不够灵活且缺乏维护的Flask-Bootstrap。它的主要设计参考了Flask-Bootstrap，其中渲染表单和分页部件的宏基于Flask-Bootstrap中的相关代码修改实现。和Flask-Bootstrap相比 参考： 参考： * base.html 不变 * templates/user.html：使用 Flask-Bootstrap 的模板 ```html {% extends "bootstrap/base.html" %} {% block title %}Flasky{% endblock %} {% block navbar %} {% endblock %} {% block content %}

    Hello, {{ name }}!

    {% endblock %} ``` ![](/files/b7PT0aT03QV2nxyuNu3n) Flask-Bootstrap 的 base.html 模板还定义了很多其他块，都可在衍生模板中使用。 Flask-Bootstrap基模板中定义的块 | 块　　名 | 说　　明 | | ------------- | ------------------- | | doc | 整个 HTML 文档 | | html\_attribs | 标签的属性 | | html | 标签中的内容 | | head | 标签中的内容 | | title | 标签中的内容 | | metas 一组 | 标签 | | styles | 层叠样式表定义 | | body\_attribs | 标签的属性 | | body | 标签中的内容 | | navbar | 用户定义的导航条 | | content | 用户定义的页面内容 | | scripts | 文档底部的 JavaScript 声明 | ### 自定义错误页面 ```python # app.py add @app.errorhandler(404) def page_not_found(e): return render_template('404.html'), 404 @app.errorhandler(500) def internal_server_error(e): return render_template('500.html'), 500 ``` {% hint style="info" %} 方法一： 新建404.html, 500,然后把这两个文件中的页面头部元素改为相应的错误消息。但这种方法会带来很多重复劳动。 方法二： 继承自 **bootstrap/base.html** 的新模板 templates/base.html 其中定义了导航条。这个模板本身也可作为其他模板的基模板 {% endhint %} ```markup {% extends bootstrap/base.html %} {% block title %}Flasky{% endblock %} {% block navbar %} {% endblock %} {% block content %}
    {% block page_content %}{% endblock %}
    ``` templates/404.html：使用模板继承机制自定义 404 错误页面 ```markup {% extends "base.html" %} {% block title %}Flasky - Page Not Found{% endblock %} {% block page_content %}

    Not Found

    {% endblock %} ``` ### 链接 * Flask 提供了 url\_for() 辅助函数，它可以使用程序 URL 映射中保存的信息生成 URL。 * url\_for() 函数最简单的用法是以视图函数名（或者 app.add\_url\_route() 定义路由时使用的端点名）作为参数，返回对应的 URL ```python # 相对路径 url_for('index') 得到的结果是 /。 # 绝对路径 url_for('index', _external=True) 返回的则是绝对地址，在这个示例中是 http://localhost:5000/ # 生成动态地址 url_for('user', name='john', _external=True) 的返回结果是 http://localhost:5000/user/john。 # 关键字参数，用于查询字符串 url_for('index', page=2) 的返回结果是 /?page=2 ``` ### 静态文件 ```python # 默认设置下，Flask 在程序根目录中名为 static 的子目录中寻找静态文件 url_for('static', filename='css/styles.css', _external=True) ``` 示例 ```html {% block head %} {{ super() }} {% endblock %} ``` ### 使用Flask-Moment本地化日期和时间 > 一个优雅的解决方案是，把时间单位发送给 Web 浏览器，转换成当地时间，然后渲染。Web 浏览器可以更好地完成这一任务，因为它能获取用户电脑中的时区和区域设置。 Flask-Moment 是一个 Flask 程序扩展，能把moment.js 集成到 Jinja2 模板中。 ```python pipenv install flask-moment # app.py from flask.ext.moment import Moment moment = Moment(app) ``` templates/base.html：引入 moment.js 库 ```python {% block scripts %} {{ super() }} {{ moment.include_moment() }} {% endblock %} ``` 如何使用 ```python pipenv install datetime # app.py from datetime import datetime @app.route('/') def index(): return render_template('index.html',current_time=datetime.utcnow()) # templates/index.html

    The local date and time is {{ moment(current_time).format('LLL') }}.

    That was {{ moment(current_time).fromNow(refresh=True) }}

    ``` ## --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://close.gitbook.io/yun-wei-bi-ji/python/flask/er-mo-ban.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.