用 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/
编写 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>
可以通过继承某个基础模板来得到一个子模板, 在子模板中只需要替换掉基础模板中的一些标记段落, 就能够得到一个新的模板, 这与 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 %}
- NOTE: 现在的 home.heml 模板仅替换了 base.html 代码块中的
{% block title %}
最后:
我们启动 Flask Server 服务并使用浏览器访问 http://127.0.0.1:5000
来查看一下 home.html 的页面。
用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板的更多相关文章
- 用 Flask 来写个轻博客 (14) — M(V)C_实现项目首页的模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 实现所需要的视图函数 实现 home.html 模板 代码分析 实现效 ...
- 用 Flask 来写个轻博客 (15) — M(V)C_实现博文页面评论表单
目录 目录 前文列表 实现 post 视图函数 在 posthtml 中添加表单 效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hell ...
- 用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数
目录 目录 前文列表 视图函数 在 viewspy 文件中定义视图函数 定义右侧边栏的视图函数 为每一张数据表定义视图函数 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask ...
- 用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验
目录 目录 前文列表 WTForms WTF 的基础使用 常用的字段类型 fieldsDateField fieldsIntegerField fieldsFloatField fieldsStrin ...
- 用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 Jinja 中常用的过滤器 default float int len ...
- 用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
#目录 前文列表 扩展阅读 Jinja 变量名 注释 控制语句 if 语句 循环 过滤器 无参数调用 带参数调用 宏 定义宏 调用宏 结果 兼容 JavaScript 前文列表 用 Flask 来写个 ...
- 用 Flask 来写个轻博客
用 Flask 来写个轻博客 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写个轻博客 (3) — (M)V ...
- 用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 第一阶段结语 打 Tag 前文列表 用 Flask 来写个轻博客 (1 ...
- 用 Flask 来写个轻博客 (36) — 使用 Flask-RESTful 来构建 RESTful API 之五
目录 目录 前文列表 PUT 请求 DELETE 请求 测试 对一条已经存在的 posts 记录进行 update 操作 删除一条记录 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 ...
随机推荐
- hdu 5396 Expression
考虑到此题麻烦了某hust大神&体现出了自己数学能力的欠缺 虽然最近一直比较忙 还是把这题的题解写下来吧 首先看完数据范围后 应该有不少人会反应到是$n^3$的DP 以$F[i][j]$表示从 ...
- mysql的windows客户端链接远程全套案例
我是linux 的服务器,navicat12的客户端, 开始链接的时候需要开服务器上得对外爆漏端口 3306,方法: 添加指定需要开放的端口: firewall-cmd --add-port=/tcp ...
- SQL语句:随机取3条不重复的记录
随机取3条不重复的记录 [Access]select top 3 * from tablename order by rnd(id); [SqlServer]select top 3 * from t ...
- 用shell脚本实现MongoDB数据库自动备份
一.创建MongoDB备份目录 用来存放数据 mkdir -p /data/mongodb_bak/mongodb_bak_now mkdir -p /data/mongodb_bak/mongodb ...
- drf:restful概念,类继承关系,drf请求封装,drf请求流程,版本控制组件,认证组件(token),权限组件
1.restful规范 resfful规范的概念最重要: 是一套规范,规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的就是,以前写增删改查的时候需要些四个视图寒素,rest ...
- Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...
- FWT公式一览
总表 真值表 对应运算 FWT IFWT A=B=0 A≠B A=B=1 左项 右项 左项 右项 0 0 1 & L+R R L-R R 0 1 0 ^ L+R L-R (L+R)/2 (L- ...
- __attribute__ ((packed))字节对齐
1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...
- 读取hive文件并将数据导入hbase
package cn.tansun.bd.hbase; import java.io.IOException; import java.net.URI; import java.util.List; ...
- python面试题之简要描述Python的垃圾回收机制(garbage collection)
这里能说的很多.你应该提到下面几个主要的点: Python在内存中存储了每个对象的引用计数(reference count).如果计数值变成0,那么相应的对象就会小时,分配给该对象的内存就会释放出来用 ...