模板继承
2018-04-16 本文已影响0人
流蓝浅
实例：导航栏继承
1： 要定义一个base.html
标记好除了继承的地方以外要被填充的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>–>-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/static/pianke/css/logined_index.css">
{% block header%} # 这个地方是一个要填充的位置
{% endblock%}
</head>
<body>
<header>
<div class="title">
<div class="head-logo">
<a href=""></a>
</div>
<ul class="navbar">
<li><a href="#">首页</a></li>
<li><a href="#">阅读</a></li>
<li><a href="#">电台</a></li>
<li><a href="#">碎片</a></li>
<li><a href="#">客户端</a></li>
</ul>
<div class="navbar-ivon">
<div class="editer">
<div >
<img src="/static/pianke/img/edit-icon.png"/>
</div>
</div>
<div class="login-btn">
<div>
<div class="portrait">
{{username}}
</div>
<div class="msg">
<img src="/static/pianke/img/msg.png"/>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="content">
{% block content%} # 这个地方也是一个要填充的位置
{% endblock %}
</div>
</body>
</html>
2：定义详细的网页继承base.html
{% extends "./base.html" %} # 这句话必须写在第一句
{% block header %} # 这个地方进行填充
<link rel="stylesheet" href="/static/pianke/css/article_detail.css">
{% endblock%}
{% block content %} # 进行填充
<div class="containers">
<div class="pager">
<div class="page-header">
<h1>{{article.title}}</h1>
</div>
<hr>
<!--<div class="author">-->
<div class="article-others">
作者：{{article.author.username}} | {{article.visit_num}} k次阅读 |
评论:{{article.likes}} | 喜欢:{{article.likes}}
</div>
</div>
<div class="lead">
{{article.content}}
</div>
</div>
</div>
{% endblock %}
