用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板
Blog 项目源码：https://github.com/JmilkFan/JmilkFan-s-Blog
目录
前文列表
用 Flask 来写个轻博客 (1) — 创建项目
用 Flask 来写个轻博客 (2) — Hello World！
用 Flask 来写个轻博客 (3) — (M)VC_连接 MySQL 和 SQLAlchemy
用 Flask 来写个轻博客 (4) — (M)VC_创建数据模型和表
用 Flask 来写个轻博客 (5) — (M)VC_SQLAlchemy 的 CRUD 详解
用 Flask 来写个轻博客 (6) — (M)VC_models 的关系(one to many)
用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
用 Flask 来写个轻博客 (8) — (M)VC_Alembic 管理数据库结构的升级和降级
用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数
扩展阅读
使用 Bootstrap
Bootstrap: 是一个基于 HTML/CSS/JavaScript 的前端框架, 兼容大部分的 jQuery 插件, 它简洁灵活, 提供了大量内置的样式接口，使得 Web 开发更加简单快捷.
下载 Bootstrap
- 点这里进入 Bootstrap 官方网站
- 点击 Download Bootstrap
- 再点击 Download Bootstrap
使用 Bootstrap: 将下载的 ZIP 文件解压到项目文件夹下, 并重命名为 static.
NOTE 1: 该 static 目录需要跟 main.py 在同一目录下, 这样 main.py 才能够找到这些文件.
NOTE 2: 该 static 目录也会成为该项目中存放所有 CSS 文件/字体文件/图片文件/Javascript文件 的目录.
(env)fanguiju@fanguiju:/opt/JmilkFan-s-Blog$ ll static/
total 20
drwxrwxr-x 5 fanguiju fanguiju 4096 Nov 23 14:35 ./
drwxr-xr-x 7 fanguiju fanguiju 4096 Nov 23 14:35 ../
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 css/
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 fonts/
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 js/
- 1
- 2
- 3
- 4
- 5
- 6
- 7
编写 Jinja 模板文件
在对每个路由页面进行渲染时, 都会使用到一个 Jinja 模板, 而每一个 Jinja 模板文件中都含有类似的 HTML 代码(样式表/网页 meta 信息/共用的JS库文件). 我们当然不希望每次编写一个 Jinja 模板时, 都重复的编写这些 HTML 代码. 所以这里会应用到 Jinja 最强大的功能之一: 模板继承.
先创建一个 templates 目录, 用于存放所有的 Jinja 模板文件
创建一个 base.html 基础模板, 用于实现一个高重用的 HTML 文件基础代码.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,, initial-scale=1">
<!-- Will be replace the page title -->
<title>{% block title %}Home{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<!-- Macro: `render paginate` -->
{% macro render_pagination(pagination, endpoint) %} <nav> <ul class="pagination"> <li> {% if pagination.has_prev %} <a href="{{ url_for('home', page=pagination.prev().page) }}" aria-label="Previous"> {% else %} <a href="{{ url_for('home', page=1) }}" aria-label="Previous"> {% endif %} <span aria-label="true">«</span> </a> </li> {% for page in pagination.iter_pages() %} {% if page %} {% if page != pagination.page %} <li> <a href="{{ url_for(endpoint, page=page) }}"> {{ page }} </a> </li> {% else %} <li><a href="">{{ page }}</a></li> {% endif %} {% else %} <li><a>...</a></li> {% endif %} {% endfor %} <li> <a href="{{ url_for('home', page=pagination.next().page ) }}" aria-label="Next"> <span aria-hidden="true">»</span> </a> <li> </ul> </nav>
{% endmacro %}
</head>
<body>
<div class="container"> <div class="jumbotron"> <!-- Replace the route function to URL: `/` --> <h1><a href="{{ url_for('home')}} ">JmilkFan's Blog</a></h1> <p>Welcome to the blog!</p> </div> {% block body %} body_content {% endblock %}
</div>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
可以通过继承某个基础模板来得到一个子模板, 在子模板中只需要替换掉基础模板中的一些标记段落, 就能够得到一个新的模板, 这与 Python 中继承的概念类似.
- NOTE 1: 上述代码段中
{% block XXX %}old{% endblock %}控制代码块的意义是标识出了该 Jinja 模板中可以被替换的部分. 在子模板继承时, 可以在子模版中实现{% block XXX %}new{% endblock %}语句，把父模板中的 block 控制代码块替换掉. - NOTE 2: 上述的代码中定义了一个宏
render_pagination(pagination, endpoint), 用于生成 Bootstrap 风格的分页链接列表. 宏定义要位于 HTML 代码的头部<head>.
- pagination: SQLAlchemy 的分页对象
flask_sqlalchemy.Pagination object - endpoint: 视图函数名(EG. post())
- pagination: SQLAlchemy 的分页对象
继承一个模板
要继承一个父模板, 需要在子模板中使用 extends 控制代码块.
现在在 home.html 中继承 base.html 模板.
{% extends "base.html"%}
{% block title %}JmilkFan's Blog{% endblock %}
- 1
- 2
- NOTE: 现在的 home.heml 模板仅替换了 base.html 代码块中的
{% block title %}
最后：
我们启动 Flask Server 服务并使用浏览器访问 http://127.0.0.1:5000 来查看一下 home.html 的页面。
文章来源: is-cloud.blog.csdn.net，作者：范桂飓，版权归原作者所有，如需转载，请联系作者。
原文链接：is-cloud.blog.csdn.net/article/details/53306560
- 点赞
- 收藏
- 关注作者
评论（0）