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 ...
随机推荐
- Jquery通过ajax请求NodeJS返回json数据
最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...
- python使用uuid生成唯一id或str
介绍: UUID是128位的全局唯一标识符,通常由32字节的字符串表示. 使用: import uuid print uuid.uuid1() 14bfe806-f1c7-11e6-83b5-0680 ...
- nagios客户端安装与配置windows篇
一.被监控的windows xp客户端的配置 1.安装NSClient++并安装下载地址: http://sourceforge.net/projects/nscplusNSClient++-0.3. ...
- 面向对象（封装）get set的由来
封装:是指隐藏对象的属性和实现细节,进对外提供公共访问方式 好处:将变化隔离.便于使用,提高重用性,提高安全性 封装原则:将不需要对外提供的额内容隐藏起来,把属性都隐藏,提供公共方法对其访问 pack ...
- Advanced R之词汇表
转载请注明出处:http://www.cnblogs.com/lizichao/p/4800513.html 词汇表 想要玩得转R,重要的一点是有一个好的工作词汇表.以下是我认为的一个好的词汇表.你不 ...
- 【opencv学习笔记一】opencv下载安装与VS2017开发环境配置
本文章摘录自浅墨博客,原文链接http://blog.csdn.net/poem_qianmo/article/details/19809337 目录 1.opencv下载与安装 2.计算机环境变量配 ...
- Open Live Writer 代码插入插件测试
#-*-coding:utf-8-*- import urllib import json import sys import ssl ssl._create_default_https_contex ...
- linux下 卸载vmtools
注意事项: 1) 安装linux时,一定要安装gcc和kernel-source: 2)光驱使用完毕可使用 umount /mnt/cdrom 卸载掉 3)VMtools 默认安装在 /usr/bin ...
- 异步和多线程,委托异步调用,Thread,ThreadPool,Task,Parallel,CancellationTokenSource
1 进程-线程-多线程,同步和异步2 异步使用和回调3 异步参数4 异步等待5 异步返回值 5 多线程的特点:不卡主线程.速度快.无序性7 thread:线程等待,回调,前台线程/后台线程, 8 th ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...