Django - 模板层 - 模板的导入和继承、静态文件的使用

最新推荐文章于 2024-03-19 12:57:12 发布

原创最新推荐文章于 2024-03-19 12:57:12 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

Django 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何在网页开发中使用模板导入和继承技术，通过组件化和框架结构提升代码复用性和开发效率。详解了组件页面的创建与母版内使用，以及通过自定义盒子实现页面内容的灵活填充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、模板的导入

1、组件页面：作为一个组件，被导入{% include '模板名字'%}进母板页面。

2、母版内使用导入的组件： {% include '组件.html' %}

二、模板的继承{% block 自定义盒子名 %}{% endblock %}

1、母版内定义盒子（作为框架结构）

2、继承页面 {% extends '母版页面名.html' %}

2- 通过static 标签函数：{% load static %}加载路径 + {% static "文件真实路径进行拼接"%}

3- get_static_prefix标签：{% load static %} 加载路径 + {% get_static_prefix %}文件夹/文件拼接路径

一、模板的导入

目的：将页面的结构组件化，可根据一个母板增加页面的灵活性。提高代码的复用性和开发效率。

1、组件页面：作为一个组件，被导入{% include '模板名字'%}进母板页面。

<!-- 组件页面的编写 component.html-->

<div>
    <div class="panel panel-info">
        <div class="panel-heading">这是一个组件</div>
        <div class="panel-body">
            组件内容：1111111
        </div>
    </div>

    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">组件部分2</h3>
        </div>
        <div class="panel-body">
            组件部分
        </div>
    </div>

</div>

2、母版内使用导入的组件： {% include '组件.html' %}

<!-- 将组件导入母板页面：{% include '组件名.html'%} -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>Title</title>
    <style>
    </style>
</head>
<body>

<div class="head"></div>
<div class="container-fluid content">
    <div class="row">
        <div class="col-md-3">

            <!-- 导入组件内容在母版结构中 -->
           {% include 'component.html' %}

        </div>
        <div class="col-md-9">
        </div>
    </div>
</div>

</body>
</html>

二、模板的继承{% block 自定义盒子名 %}{% endblock %}

目的：在母版内留下自定义盒子，可以在继承的子组件中进行填充覆盖，增加的页面的灵活性。

1、母版内定义盒子（作为框架结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>Title</title>
    <style>
        .head {
            height: 60px;
            background: #1b6d85;
        }
        .content{
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="head"></div>
<div class="container-fluid content">
    <div class="row">

        <div class="col-md-9">
            <div class="right_top" style="height: 70px;background: pink">
                {% block content_top %}
                
                {% endblock %}
            </div>

            <div class="right_top" style="height: 70px;background: #3e8f3e">

            </div>


           {% block content %}
                我是母版的内容
            {% endblock %}


        </div>
    </div>
</div>

</body>
</html>

2、继承页面 {% extends '母版页面名.html' %}

{% extends 'base.html' %}


{% block content %}
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>
    
    {{ block.super }}
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>
    <p>这是自定义填充的区域</p>

    {{ block.super }}
{% endblock content%}



{% block content_top %}
    我是模版一内容頭部
{% endblock content_top%}

总结：

{% extends %} 标签必须是模板中的第一个标签。
母版结构中尽可能多的设置{% block %} 标签（盒子）。
子模板不必全部重写母版中的block
为了更好的可读性，你也可以给你的 {% endblock %} 标签一个名字
```
{% block content %}
...
{% endblock content %}　　
```
不能在一个模版中定义多个相同名字的 block 标签

三、静态文件的使用

1、静态文件的创建

2、模板文件内使用静态文件夹内文件

总结：

使用标签函数，当修改settings内static路径时，会自动进行修改
使用标签函数，必须使用{% load static %}加载路径



1- 通过相对路径（不灵活，写死路径）
<link rel="stylesheet" href="/static/css/mycss.css">
2- 通过static 标签函数：{% load static %}加载路径 + {% static "文件真实路径进行拼接"%}

{% load static %}
<img src="{% static "img/hi.jpg" %}" alt="Hi!" />


{% load static %}
<script src="{% static "mytest.js" %}"></script>


{% load static %}
{% static "img/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>
3- get_static_prefix标签：{% load static %} 加载路径 + {% get_static_prefix %}文件夹/文件拼接路径
{% load static %}
<img src="{% get_static_prefix %}img/hi.jpg" alt="Hi!" />


{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />