看到这篇文章的朋友相信都在使用django这个框架，它是python中非常流行的一个大型web框架。既然它可以开发大型项目，那么其中牵扯到很多的前端代码复用。
特别是一个html网页中的头部公共部分和底部，基本上大多数的网站设计都是复用它的，那么django中我们也可以进行代码复用
最近也准备重温之前学过的django框架，第一步肯定就是做前端页面了，问题来了，就是大量的代码是重复的，所以我们第一件事就是解决这个问题。重新复习了一下知识，发现django中自带模板语言。
block、extends的使用
当我们设计一个网页模板时候，如果所有的网页都公用一个头部和尾部的时候我们就可以使用。先用block设计好母版，然后在子版中继承母版。好了下面以代码为例。
首先随便创建一个html空白页，然后定义好block的名称，我们将母版命名为comm_bootstrap.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="{% static 'jquery/jquery-3.1.1.min.js' %}"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/myajax.js' %}"></script>
<title>
{% block titleblock %}{% endblock titleblock %}
</title>
{% block headblock %}{% endblock headblock %}
</head>
<body>
{% block bodyblock %}{% endblock bodyblock %}
</body>
</html>在上述代码中，我们定义了title、head、和body三个，在后面的子版中我就可以继承母版。对了，django中为了确保正常运行，最上面要加载静态文件哦，加上{% load static %}
{% extends "comm_bootstrap.html" %}
{% load static %}
{% block headblock %}
<link rel="stylesheet" href='{% static "css/front_resetpwd.css" %}'>
{% endblock headblock %}
{% block bodyblock %}
<h1>重置密码</h1>
<div class="container">
<form action="" method="POST">
<div class="form-group">
<input type="password" class="form-control" placeholder="新密码" name="password">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder='确认密码' name="password_repeat">
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">提交</button>
</div>
</form>
</div>
{% endblock bodyblock %}在上面子版的代码中，我们使用extends来继承母版，然后只需在母版的对应block中我们填充对应的内容，就能达到代码复用的效果。
include导入
看见include我就很熟悉，为什么呢？因为它正是C语言中每个代码中第一个要写的，哈哈。我在几年前也是学过简单的C语言的，不过因为各种原因放弃学它了。
回归正题，include是导入公共模块的。其实它和extends也是比较像的，区别就在于include是导入，而不是继承。我的理解就是，导入公共的代码块，因为有的代码我们不需要全部复用，有可能只需要调用几次，那么就可以单独放到一个html中，然后用的时候直接调用
调用方法： 在当前的html中的某个你需要引入公共模板的地方使用{% include ‘公共模板的相对路径’ %}引入
<div id="content">
{% include 'api/front.html' %}
</div>
评论抢沙发