Python Web开发：制作项目共享模板
来自CloudWiki
什么是页面复用
就是讲网站各页面相同的部分单独抽取出来作为一个共享页面，其他页面制作时只需将共享页面包含进来就行，这种方式有以下两个明显的好处。
1）可以显著减少前端代码编写量
2）当需要对各个页面共享的部分修改时，只需要修改共享页面即可。
Django页面复用模板
1)继承标签，调用形式如下：
{% extends "base.html" % }
通过该标签直接继承base.html
2）动态内容声明标签
{% block content %}
{% endblock %}
这里的content是可以自定义命名的，使用时将非共享部分用该标签声明；继承时也采用该方式将动态内容填入标签内。
制作项目共享模板
- 非动态内容：页面头部、导航栏、页脚
- 动态内容：各个页面特有的、与其他页面不相同的部分
在项目根目录template/base.html
在<head>标签中将<title>恒达科技|科研基地</title>
替换为：
<title>恒达科技|{% block title %}{% endblock %} </title>
标识此处需替换一个动态内容title
需要在页面主体内容部分外面括上如下内容：
{% block content %}
{% endblock %}
base.html源代码：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>恒达科技|{% block title %}{% endblock %} </title>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<!-- 头部 -->
<div class="container top">
<div class="row">
<div class="col-md-6">
<a>
<img class="img-responsive" src="{% static 'img/logo.jpg' %}">
</a>
</div>
<div class="col-md-3 hidden-xs">
<a class="phone ant">
<span class="glyphicon glyphicon-phone"></span>电话：400 1111 0000
</a>
</div>
<div class="col-md-3 hidden-xs">
<a class="mail ant">
<span class="glyphicon glyphicon-envelope"></span>邮箱：hengda@126.com
</a>
</div>
</div>
</div>
<!-- 导航条 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example"
aria-expanded="false">
<span>导航栏</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example">
<ul class="nav navbar-nav" style="width:100%;">
<li class="nav-top">
<a href="{% url 'home' %}">首页</a>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
公司简介</a>
<ul class="dropdown-menu">
<li><a href="{% url 'aboutApp:survey' %}">企业概况</a></li>
<li><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
新闻动态</a>
<ul class="dropdown-menu">
<li><a href="{% url 'newsApp:company' %}">公司要闻</a></li>
<li><a href="{% url 'newsApp:industry' %}">行业新闻</a></li>
<li><a href="{% url 'newsApp:notice' %}">通知公告</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
产品中心</a>
<ul class="dropdown-menu">
<li><a href="{% url 'productsApp:robot' %}">
家用机器人</a></li>
<li><a href="{% url 'productsApp:monitoring' %}">
智能监控</a></li>
<li><a href="{% url 'productsApp:face' %}">
人脸识别解决方案</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
服务支持</a>
<ul class="dropdown-menu">
<li><a href="{% url 'serviceApp:download' %}">
资料下载</a></li>
<li><a href="{% url 'serviceApp:platform' %}">
人脸识别开放平台</a></li>
</ul>
</li>
<li class="nav-top" id='science'>
<a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
人才招聘</a>
<ul class="dropdown-menu">
<li><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></li>
<li><a href="{% url 'contactApp:recruit' %}">加入恒达</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 分割线 -->
<div class="line"></div>
{% block content %}
{% endblock %}
<!-- 页脚 -->
<div class="container web-footer">
<!-- 站点地图 -->
<div class="row" id="map-footer">
<div class="col-md-2">
<dl>
<dt>公司简介</dt>
<dd><a href="{% url 'aboutApp:survey' %}">企业概况</a></dd>
<dd><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>产品中心</dt>
<dd><a href="{% url 'productsApp:robot' %}">家用机器人</a></dd>
<dd><a href="{% url 'productsApp:monitoring' %}">智能监控</a></dd>
<dd><a href="{% url 'productsApp:face' %}">人脸识别解决方案</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>服务支持</dt>
<dd><a href="{% url 'serviceApp:download' %}">资料下载</a></dd>
<dd><a href="{% url 'serviceApp:platform' %}">人脸识别开放平台</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>人才招聘</dt>
<dd><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></dd>
<dd><a href="{% url 'contactApp:recruit' %}">加入恒达</a></dd>
</dl>
</div>
<div class="col-md-4" id="wx">
<p>扫描二维码，关注我们</p>
<img class="qrimg" src="{% static 'img/qr.png' %}" alt="wx">
<p>客服热线：<b style="font-size:20px">400 111 2222</b></p>
</div>
</div>
<!-- 版权 -->
<div class="row" id="patent-footer">
<p> © 2019 Python Web企业门户网站开发示例 版权所有 | 苏ICP备19006378号 </p>
</div>
</div>
<script>
$(function () {
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function () {
$(this).removeClass("open");
});
});
</script>
<script type="text/JavaScript">
$('#{{active_menu}}').addClass("active");
</script>
</body>
</html>
