Flask 学习系列（四）---Jinjia2 模板继承
2024-09-01 08:40:19
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>
最新文章
- vs2008注册组件
- RequireJS基础（三）
- windows下zookeeper伪集群搭建
- <实训|第十二天>用LVM对linux分区进行动态扩容
- Android -- 简单的图片浏览器
- jQuery常用方法验证
- Android中如何让手机屏幕不待机
- Python学习笔记——面向对象基础
- 浙大PTA - - 堆中的路径
- JAVA简单的SWING及AWT
- C++第二天
- liunx 平台下软件包管理
- sizzle选择器的使用
- Ambari安装之部署本地库（镜像服务器）（二）
- javaIO详解、包含文件以及流操作
- jstack Dump
- pg_restore数据库恢复指令
- 详解mybatis配置文件
- istio sidecar自动注入过程分析
- Heap Sort - recursion