Flask 学习系列（四）---Jinjia2 模板继承
1.基模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基模板</title>
<style type="text/css">
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div, ul, li {
margin: 0;
padding: 0;
font-style: normal;
font: 12px/22px "\5B8B\4F53", Arial, Helvetica, sans-serif
} /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul, li {
list-style: none
} img {
border: 0;
vertical-align: middle
} body {
color: #000000;
background: #FFF;
text-align: center
} .clear {
clear: both;
height: 1px;
width: 100%;
overflow: hidden;
margin-top: -1px
} a {
color: #000000;
text-decoration: none
} a:hover {
color: #BA2636
} .red, .red a {
color: #F00
} .lan, .lan a {
color: #1E51A2
} .pd5 {
padding-top: 5px
} .dis {
display: block
} .undis {
display: none
} ul#nav {
width: 100%;
height: 60px;
background: #00A2CA;
margin: 0 auto
} ul#nav li {
display: inline;
height: 60px
} ul#nav li a {
display: inline-block;
padding: 0 20px;
height: 60px;
line-height: 60px;
color: #FFF;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 16px
} ul#nav li a:hover {
background: #0095BB
} </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div>
{% block conent %}{% endblock %} </div>
</body>
</html>
block 是子模板关键字，content在子模板块名称。
不能砸同一个模板中定义多个同名的block标签。
子模板
{% extends "base.html" %}
{% block conent %}
<p class="import">
我是在子模板中
</p>
{% endblock %}
extends 继承父模板的关键字，该标签必须是子模板中的第一个标签。
渲染子模板的python代码：
@app.route("/sub")
def subhtml():
return render_template("sub.html",site_name="繼承測試")
运行截图：
渲染后子页面的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基模板</title>
<style type="text/css">
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div, ul, li {
margin: 0;
padding: 0;
font-style: normal;
font: 12px/22px "\5B8B\4F53", Arial, Helvetica, sans-serif
} /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul, li {
list-style: none
} img {
border: 0;
vertical-align: middle
} body {
color: #000000;
background: #FFF;
text-align: center
} .clear {
clear: both;
height: 1px;
width: 100%;
overflow: hidden;
margin-top: -1px
} a {
color: #000000;
text-decoration: none
} a:hover {
color: #BA2636
} .red, .red a {
color: #F00
} .lan, .lan a {
color: #1E51A2
} .pd5 {
padding-top: 5px
} .dis {
display: block
} .undis {
display: none
} ul#nav {
width: 100%;
height: 60px;
background: #00A2CA;
margin: 0 auto
} ul#nav li {
display: inline;
height: 60px
} ul#nav li a {
display: inline-block;
padding: 0 20px;
height: 60px;
line-height: 60px;
color: #FFF;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 16px
} ul#nav li a:hover {
background: #0095BB
} </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div> <p class="import">
我是在子模板中
</p> </div>
</body>
</html>
Flask 学习系列（四）---Jinjia2 模板继承的更多相关文章
- DocX开源WORD操作组件的学习系列四
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- Flask 学习（四）静态文件
Flask 学习(四)静态文件 动态 web 应用也需要静态文件,一般是 CSS 和 JavaScript 文件.理想情况下你的服务器已经配置好提供静态文件的服务. 在开发过程中, Flask 也能做 ...
- Flask 学习（三）模板
Flask 学习(三)模板 Flask 为你配置 Jinja2 模板引擎.使用 render_template() 方法可以渲染模板,只需提供模板名称和需要作为参数传递给模板的变量就可简单执行. 至于 ...
- scrapy爬虫学习系列四：portia的学习入门
系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备: http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...
- .net reactor 学习系列(四)---.net reactor应用场景
原文:.net reactor 学习系列(四)---.net reactor应用场景 前面已经学习了.net reactor一些基础知识,现在准备学习下实际的应用场景,只是简单的保护和 ...
- Identity Server4学习系列四之用户名密码获得访问令牌
1.简介 Identity Server4支持用户名密码模式,允许调用客户端使用用户名密码来获得访问Api资源(遵循Auth 2.0协议)的Access Token,MS可能考虑兼容老的系统,实现了这 ...
- Django 2.0 学习(13)：Django模板继承和静态文件
Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...
- Flask 学习系列（二）---Jinjia2模板
下面是一个jinjia2的简单模板的例子: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Flask 学习系列（三）---Jinjia2使用过滤器
再Jinjia2中过滤器是一种转变变量输出内容的技术.··过滤器通过管道符号“|与变量链接,并且可以通过圆括号传递参数” .举例说明: {{my_variable|default('my_variab ...
随机推荐
- 洛谷【P4883】mzf的考验
浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...
- algorithm-exercise
https://github.com/billryan/algorithm-exercise Part I - Basics Basic Data Structure string: s2 = &qu ...
- 用expressjs写RESTful API
http://blog.csdn.net/kiwi_coder/article/details/36424671 用expressjs写RESTful API http://blog.csdn ...
- zoj3826 Hierarchical Notation (字符串模拟)
Hierarchical Notation Time Limit: 2 Seconds Memory Limit: 131072 KB In Marjar University, stude ...
- malloc,alloc,realloc之间的相似与区别
三个函数的申明分别是: void* realloc(void* ptr, unsigned newsize); void* malloc(unsigned size); void* calloc(si ...
- utunbu下的codeblocks配置openGL环境
真想骂娘阿,刚开始用utunbu,什么也不明白,不明白我装都软件都在哪里,不知道就像windows下的系统文件那样的文件在哪里,也不知道如何配置环境变量.就这样稀里糊涂的,还要抓紧时间装openGL, ...
- Linux 错误集锦
1. CentOS 7 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决 解决办法: rm -f /var/run/yum.pid,删除文件后再 ...
- ASP.NET学习笔记（四）CDOSYS邮件
使用 CDOSYS 发送电子邮件 CDO (Collaboration Data Objects) 是一项微软的技术,设计目的是用来简化通信程序的创建. CDOSYS 是 ASP 中的内置组件.我们会 ...
- Swoole 多协议 多端口 的应用
目录 概述 网络通信协议设计 多端口监听的使用 小结 概述 这是关于 Swoole 学习的第五篇文章:Swoole 多协议 多端口 的应用. 第四篇:Swoole HTTP 的应用 第三篇:Swool ...
- (function (window, document, undefined) {})(window, document)什么意思？
1.IIFE(即时调用的函数表达式),它采取以下表达式: (function (window, document, undefined) { // })(window, document); Java ...