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 ...
随机推荐
- AtCoder Grand Contest #026 A - Colorful Slimes 2
Time Limit: 2 sec / Memory Limit: 1024 MB Score : 200200 points Problem Statement Takahashi lives in ...
- C# 序列化反序列化XML的帮助类
以下是一个包装的用于序列化反序列化XML和C# 对象的类. public class XmlSerializeHelper<T> { #region Serial ...
- c# namespace不能和class的name 相同
比如namespace A, 内部Class A, 那么调用class A的方法只能通过A.A.XXX来访问. 或者说实例化一个class A, A a = new A(); // compile ...
- ng2自定义管道
一.管道的作用及本质 作用:数据处理 本质:公用的方法 二.定义管道组件 //summary.pipe.tsimport { Pipe, PipeTransform } from '@angular/ ...
- AngularJs(Part 5)--与后台联系
AngularJS内置了$http这个服务来与后台联系.(默认会把接受到的数据转换为json)当然,还有一个$resource来提供与RESTful后台联系的服务. $http服务 $http比 ...
- MySQL Horizontal Scaling
http://www.tuicool.com/articles/miuq63E http://www.guokr.com/blog/475765/ http://songwie.com/article ...
- CentOS7 环境下MySQL5.7 PHP7的安装
用的都是最新版的包 : php7 mysql5.7 nginx1.8 zabbix3.2.6 替换源为阿里云的源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/ ...
- Docker Compose 多容器应用
Docker Compose是一个用来定义并运行复杂应用程序的工具.用Compose,你可以在一个文件中定义多个容器应用程序,然后只需一条命令就可以完成使其运行所需的所有操作. 一个使用Docker容 ...
- Search in a Binary Search Tree
Given the root node of a binary search tree (BST) and a value. You need to find the node in the BST ...
- linux命令之上传文件和下载文件
lrzsz-0.12.20.tar.gz是一款linux下命令行界面上支持上传和下载的第三方工具,能够起到很方便的作用. # rz 选择文件进行上传 # sz 文件名 sz后面跟文件名可以进行文件从l ...