Flask中jinja2的继承实现方法及实例


Posted in Python onMarch 03, 2021

在继承的使用上,我们最早接触的是父类和子类的继承。不过Flask框架中的继承要简单一些,只要有一个原文件,便可以对其进行继承和修改的操作了。在修改的内容方面,可以通过关键字来进行实现。下面我们就Flask中jinja2的继承的实现先进行理论的介绍,然后带来实例供大家练习。

1、说明

Jinja2中最强大的部分是模板继承。通过模板继承,我们可以创建一个基本(框架)文件,其他文件可以从中继承,然后再根据需要对其进行修改。

在jinja2的框架文件中,使用block关键字表示它包含的内容可以被修改。

2、实例

<!DOCTYPE html>
<html>
<head>
  {% block head %}
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
  <title>{% block title %}{% endblock %} - My Webpage</title>
  {% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
  {% block footer %}
  <script>This is javascript code </script>
  {% endblock %}
</div>
</body>
</html>

这里定义了四处 block,即:head,title,content,footer。那怎么进行继承和变量替换呢?注意看下面的文件

{% extend "base.html" %}    # 继承base.html文件
{% block title %} Dachenzi {% endblock %}  # 定制title部分的内容
{% block head %}
{
{ super() }}    # 用于获取原有的信息
<style type='text/css'>
.important { color: #FFFFFF }
</style>
{% endblock %}  
# 其他不修改的原封不同的继承

实例扩展:

jinja2模板继承

父亲:

<!DOCTYPE html>
<html>
<head>
 <title>模板继承</title>
</head>
<body>
 <span>这是基模板</span>
 <div id="content">{% block content %}{% endblock %}</div>
</body>
</html>

用{% block content %}{% endblock %}包含jinja2的字模板块;

子:

<!DOCTYPE html>
<html>
<head>
 <title>模板继承</title>
</head>
<body>
 {% extend "jinja2_模板继承.html"%}
 {% block content %}
 <p class="importtant">我在子模板</p>
</body>
</html>

{% extends "jinja2_模板继承.html"%}标签是这里的关键,告诉模板引擎这个模板继承自另外一个模板。该标签必须是子模板的第一个标签,解释器会自动将父亲的内容复制到子模板中!

结果应该是这样:

<!DOCTYPE html>
<html>
<head>
 <title>模板继承</title>
</head>
<body>
 <span>这是基模板</span>
 <div id="content">
   <p class="importtant">我在子模板</p>
  </div>
</body>
</html>

到此这篇关于Flask中jinja2的继承实现方法及实例的文章就介绍到这了,更多相关Flask中jinja2的继承如何实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python操作CouchDB数据库简单示例
Mar 10 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
Apr 25 Python
用pandas按列合并两个文件的实例
Apr 12 Python
pyspark 读取csv文件创建DataFrame的两种方法
Jun 07 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
Oct 14 Python
Python:type、object、class与内置类型实例
Dec 25 Python
深入浅析Python 命令行模块 Click
Mar 11 Python
通过cmd进入python的步骤
Jun 16 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
Jun 29 Python
python opencv pytesseract 验证码识别的实现
Aug 28 Python
浅析python实现动态规划背包问题
Dec 31 Python
教你用python实现一个无界面的小型图书管理系统
May 21 Python
基于PyTorch中view的用法说明
Mar 03 #Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
Mar 03 #Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
Mar 03 #Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
Mar 03 #Python
Pytorch 中的optimizer使用说明
Mar 03 #Python
解决pytorch 的state_dict()拷贝问题
Mar 03 #Python
解决pytorch 保存模型遇到的问题
Mar 03 #Python
You might like
详解PHP中foreach的用法和实例
2016/10/25 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
python进阶教程之异常处理
2014/08/30 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python检查ping终端的方法
2019/01/26 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
车工岗位职责
2013/11/26 职场文书
有趣的广告词
2014/03/18 职场文书
师德师风建设方案
2014/05/08 职场文书
学生安全承诺书
2014/05/22 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
python 实现图片特效处理
2022/04/03 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js