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 ...
随机推荐
- kettle导数到user_用于left join_20160928
这篇博客主要是给mysql left join做铺垫,需要现在本地数据库创建一个users 数据表 然后去和 test_a03order表 left join 一.首先在local_db数据库先创建 ...
- P1150 Peter的烟
题目描述 Peter有n根烟,他每吸完一根烟就把烟蒂保存起来,k(k>1)个烟蒂可以换一个新的烟,那么Peter最终能吸到多少根烟呢? 输入输出格式 输入格式: 每组测试数据一行包括两个整数n( ...
- Floyd(稠密图，记录路径)
#include<iostream> #include<algorithm> #include<cstdio> #include<cstdlib> #i ...
- windows下VisualStudio和QtCreator搭建Qt开发环境
一.简介 集成开发平台IDE都有各自的长处,编写Qt程序可根据自己的喜好来选择相应的IDE.下述文章都是装载博友的文章,其中有很多细节还得自己调整. 二.详解 1.VisualStudio搭建Qt开发 ...
- about future
最近又又又重复看了 star trek 星际迷航 back to the future 1/2/3 开始想象未来是什么样子的 1. 未来的开发语言 1.1[rust] or [golang] or [ ...
- 设置Android让EditText不自动获取焦点
最近在做一个练手项目的时候,因为默认进入的页面有一个EditText控件,每次进入的时候会自动获取焦点弹出软键盘,体验非常不好,后来在网上找到了解决办法:在EditText的父级控件中找到以下属性,设 ...
- javascript的三个函数
作为刚刚学习javascript的小白,最近阅读了额<Javascript Dom编程艺术>,其中有三个函数感觉很是有用,特此收藏. insertAfter函数:针对insertBefor ...
- [codeforces219D]Choosing Capital for Treeland树形dp
题意:给出一棵树,带有向边,找出某个点到达所有点需要反转的最少的边. 解题关键:和求树的直径的思路差不多,将求(父树-子树)的最大值改为求特定值.依然是两次dfs,套路解法. 对树形dp的理解:树形d ...
- 转载-【深度学习】深入理解Batch Normalization批标准化
全文转载于郭耀华-[深度学习]深入理解Batch Normalization批标准化: 文章链接Batch Normalization: Accelerating Deep Network T ...
- tarjan求割点割边的思考
这个文章的思路是按照这里来的.这里讨论的都是无向图.应该有向图也差不多. 1.如何求割点 首先来看求割点.割点必须满足去掉其以后,图被分割.tarjan算法考虑了两个: 根节点如果有两颗及以上子树,它 ...