Django之html-模板继承

时间 2019-11-19

原文原文链接

在编程的过程当中，咱们常常会重复性的写了不少的代码，好比一个页面的框架部分，这样我又多少个页面就得写上多少次，这样既很差维护，也不够高效，因此咱们引出了html的模板继承部分。css

一、写好一个html文件。html

二、下面有个新的html文件须要继承上面这个html。jquery

　　直接在这个新的html文件的最顶端，写上下面的内容　　编程

#这个manger.html就是母版的文件名称，告诉这个html去哪里继承。

{% extends 'manger.html' %}

三、问题来了，咱们既然是继承，总不能所有继承吧，咱们确定是须要写一些新的内容在新的html文件中展现，咱们只是继承母版中的一部分，好比head之类的。框架

　　好比咱们要在html的一个位置更换新的内容。spa

　　一、定义一个继承的块，叫index。htm

{% block index %}{% endblock %}

　　二、继承者在本身的文件中须要更换新的内容，须要这么写。blog

　　注意：只须要在继承的任意位置写上{% block index %}内容区{% endblock %}继承

{% block index %}
    <div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
        <span>首页&nbsp;></span>
        <span>资产管理</span>
    </div>
{% endblock %}

四、问题由来了，若是个人html内容特别多，我看着特别乱，这样我能够把这些内容都写到一个新的html文件里面，而后在个人html文件中直接引用就OK。ip

例如：我单独写了一个test.html文件。

我想在html中引用直接写入地下的东西就OK了。

{% include "test.html" %}

五、写本身的CSS和JS样式或操做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        body{
            height: 38px;
            width: 300px;
        }
    </style>
    {% block css %}{% endblock %}
<body>
    <div>
        
    </div>
    <script src="jquery-x.x.x"></script>
    {% block js %}{% endblock %}
</body>
</html>

　　这样，咱们就能够在本身的html文件中直接写本身的css样式或者js操做。

{% block css %}
    <style>

    </style>
{% endblock %}

{% block js %}
    <script>

    </script>
{% endblock %}