模板继承
- 在实际的页面显示中会有多个页面有相同的显示信息，如果每个页面都写相同的代码，会让你的代码冗余，为了解决这个问题我们就把相同的代码写在一个文件里，供其它文件使用，这个文件就是一个母版，其它文件对这个母版进行继承，就会显示这个母版的信息
继承初识
1、新建base.html文件，在需要替换的不同位置加上不同名称的block标签
{% block content %}
模板内容
{% endblock %}
2、在需要继承的文件开头写
{% entends 'base.html' %}
3、接下来改写不同地方的代码
{% block content %}
模板内容
........
........
等等
{% endblock %}
重写时想要保留模板block中的内容
{{ block.super}}
我们也可以把不同的写在一个通用模板中
使用{{ include 'xxx.html '}}写在需要继承的地方即可
项目实践
我们在项目中把相同的代码抽取出来放在母版中
base.html
- 我们把不同代码的地方定义一个block块
- 定义好那些地方需要更改，就定义一个block块
- 在继承文件中进行操作
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-custom/css/custom-boostrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-custom/css/blog.css' %}" />
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">响应式导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{% url 'article_list' %}" class="navbar-brand">我的小屋</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li role="presentation" class="{% url 'article_list' %}"><a href="">首页</a></li>
<li role="presentation"><a href="{% url 'contact' %}">联系</a></li>
<li role="presentation"><a href="{% url 'about' %}">关于我</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入文章标题或者作者名称">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</nav>
</div>
</header>
{% block content %}
<div class="col-md-4">
<!-- RSS订阅，最新文章（5），分类，标签云，最新评论 -->
<div class="well text-center">
<p class="lead">不想错过好文章，赶紧订阅吧</p>
<button type="button" class="btn btn-primary btn-lg">订阅我的博客</button>
</div>
<!--最新文章 -->
<div class="panel panel-primary" id="mypanel">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新文章</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">1. 最新文章8月27日</a></li>
<li class="list-group-item"><a href="">2. 最新文章8月26日</a></li>
<li class="list-group-item"><a href="">3. 最新文章8月25日</a></li>
<li class="list-group-item"><a href="">4. 最新文章8月24日</a></li>
<li class="list-group-item"><a href="">5. 最新文章8月23日</a></li>
</ul>
</div>
<!-- 分类目录 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>分类目录</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">水果</a></li>
<li class="list-group-item"><a href="">蔬菜</a></li>
<li class="list-group-item"><a href="">电脑3C</a></li>
<li class="list-group-item"><a href="">明星八卦</a></li>
<li class="list-group-item"><a href="">政治事件</a></li>
</ul>
</div>
<!-- 标签云 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>标签云</h4>
</div>
<!-- List group -->
<div class="panel-body">
<ul class="list-inline">
<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>
<li><a href="">巳蛇</a></li>
</ul>
</div>
</div>
<!-- 最新评论 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新评论</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">1. 最新文章8月27日</a></li>
<li class="list-group-item"><a href="">2. 最新文章8月26日</a></li>
<li class="list-group-item"><a href="">3. 最新文章8月25日</a></li>
<li class="list-group-item"><a href="">4. 最新文章8月24日</a></li>
<li class="list-group-item"><a href="">5. 最新文章8月23日</a></li>
</ul>
</div>
</div>
{% endblock %}
<footer>
<div class="container">
<hr>
<p class="text-center">Copyright © Powered by Bruce</p>
</div>
</footer>
</body>
<script src="{% static 'bootstrap-custom/js/jquery-3.5.1.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'bootstrap-custom/js/bootstrap.min.js' %}" type="text/javascript" charset="utf-8"></script>
</html>
首页继承 acticle_list
{% extends 'base.html' %}
{% block title %}
我的个人网站
{% endblock %}
{% block content %}
<div id="body" class="container">
<div class="row">
<div class="col-md-8">
<h1>最新发布</h1>
<!-- 标题，标签，分类，留言总数，发布时间 -->
{% for article in articles %}
<article>
<h2><a href="{% url 'article_details' article.id %}">{{ article.title }}</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span> <a href="">标签</a>
<span class="glyphicon glyphicon-tags"></span> <a href="">分类1</a>，<a href="">分类2</a>，<a
href="">分类3</a>
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a href="">200条评论</a>
<span class="glyphicon glyphicon-time"></span> <a href="">2020年8月27日上午10点03分</a>
</div>
</div>
<hr>
<img src="http://placekitten.com/900/300" class="img-responsive">
<br />
<p class="lead">{{ article.abstract }}</p>
<p class="text-right"><a href="{% url 'article_details' article.id %}">阅读全文...</a></p>
<hr>
</article>
{% endfor %}
<!-- 分页 -->
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> 上一页</a></li>
<li class="next"><a href="#">下一页 <span aria-hidden="true">→</span></a></li>
</ul>
</div>
{{ block.super }}
</div>
</div>
{% endblock %}
详情页 acticle_detail.html
{% extends 'base.html' %}
{% block title %}
详情页
{% endblock %}
{% block content %}
<div id="body" class="container">
<div class="row">
<div class="col-md-8">
<!-- 标题，标签，分类，留言总数，发布时间 -->
<article>
<h2><a href="#">{{ single_article.title }}</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span> <a href="">标签</a>
<span class="glyphicon glyphicon-tags"></span> <a href="">分类1</a>，<a href="">分类2</a>，<a href="">分类3</a>
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a href="">200条评论</a>
<span class="glyphicon glyphicon-time"></span> <a href="">2020年8月27日上午10点03分</a>
</div>
</div>
<hr >
<img src="http://placekitten.com/900/300" class="img-responsive">
<br />
{{ single_article.content }}
<ul class="pager">
<li class="previous"><a href="/"> 返回主页</a></li>
</ul>
<div class="well">
<h4>评论区</h4>
<form class="clearfix">
<div class="form-group col-md-6">
<label for="username">用户名字</label>
<input type="text" class="form-control" id="username" placeholder="名字">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
</div>
<div class="form-group col-md-12">
<textarea class="form-control" id="comment" placeholder="评论内容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
<hr >
</article>
</div>
{{ block.super }}
</div>
</div>
{% endblock %}
{% extends 'base.html' %}
{% block title %}
联系我
{% endblock %}
{% block content %}
<div class="container" id="body">
<h1>联系我</h1>
<div class="well">
有问题联系我呀
</div>
<form>
<div class="form-group">
<label for="username">用户名字</label>
<input type="text" class="form-control" id="username" placeholder="名字">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> 邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
</div>
<div class="form-group">
<label for="subject">主题</label>
<input type="text" class="form-control" id="subject" placeholder="主题">
</div>
<div class="form-group">
<label for="message">消息内容</label>
<textarea class="form-control" id="message" placeholder="评论内容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">提交你的消息</button>
</div>
</form>
</div>
{% endblock %}
关于我 about.html
{% extends 'base.html' %}
{% block title %}
关于我
{% endblock %}
{% block content %}
<div class="container" id="body">
<h1>关于我</h1>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-3 col-sm-3">
<img src="http://placekitten.com/300/350" class="img-thumbnail img-responsive">
</div>
<div class="col-md-9 col-sm-9">
<p>
任贤齐，1966年6月23日出生于台湾省彰化县，祖籍湖北省武汉市江夏区，中国台湾流行乐男歌手、演员、赛车手、导演 。
</p>
<p>
1990年发行音乐合辑《奔向彩虹》，以歌手身份正式出道。1991年首次出演电影《官兵捉强盗》，进入影视圈。1997年因演唱歌曲《心太软》获得广泛关注 [3] ，并凭借该歌曲荣获香港电台十大劲爆国语金曲铜奖、香港新城精选104电台国语金奖等奖项 [4] 。1998年发行专辑《爱像太平洋》，专辑中的歌曲《对面的女孩看过来》获得HITFM台北之音音乐网100单曲票选活动的第一名，该歌曲也成为了他在歌唱事业上的代表作品；同年出演古装剧《神雕侠侣》饰演杨过。
</p>
<p>
1999年主演的电影《星愿》上映；同年参加马来西亚越野摩托车比赛中夺得季军 [5] 。2000年发行专辑《为爱走天涯》 [6] 。2001年获得亚洲越野摩托车拉力赛冠军 [7] 。2005年主演的动作片《韩城攻略》在中国和韩国同期上映。2010年凭借电影《火龙对决》获得富川电影节最佳男主角。
</p>
<p>
2013年出演剧情片《下午茶》，该片入围第63届柏林电影节“电影大观”单元 [8] 。2014年执导的纪录片《妈祖迺台湾》在台湾上映，该片打破台湾纪录片上映戏院数量 [1] ；同年导演并主演爱情喜剧电影《落跑吧爱情》 [2] 。2016年出演警匪片《树大招风》 [9] ；同年再次回归小荧幕，出演饮食类电视剧《深夜食堂》 [10] 。2019年主演犯罪动作电影《沉默的证人》。
</p>
</div>
</div>
<div class="row text-center photo">
<img src="http://placekitten.com/200/200" >
<img src="http://placekitten.com/200/200" >
</div>
<p class="lead text-center">以下是我的视频课资源</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Python基础</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Django实战开发</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Flask实战开发</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
end!
