Django框架（八）—— 模板层：模板导入、模板继承、静态文件

时间 2019-11-15

标签 django 框架模板导入继承静态文件栏目 Python 繁體版

原文原文链接

目录css

模板导入、继承、静态文件

模板导入、继承、静态文件

1、模板导入

要复用一个组件，能够将该组件写在一个文件中，在使用的时候导入便可html

在模板中使用python

一、语法

{% include '模板名字' %}

二、使用

ad.html页面

<div class="adv">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

base.html页面，将ad模板导入使用

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

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <!-- 利用include导入模板 -->
            {% include 'adv.html' %}
        </div>
        <div class="col-md-9"></div>
    </div>
</div>
</body>
</html>

2、模板的继承

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可让您建立一个基本的“骨架”模版，它包含您站点中的所有元素，而且能够定义可以被子模版覆盖的 blocks 。bootstrap

一、使用模板的继承

（1）写一个母版

写一个母版，留有一个或多个可扩展的区域。母版中主要是使用空的block完成页面的骨架搭建ide

{% block 名字 %}
能够内容
{% endblock %}

<!-- 母版 base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"/>
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
<div id="sidebar">
    {% block sidebar %}
        <img href='11111111111.jpg'>
    {% endblock %}
</div>

<div id="content">
    {% block content %}{% endblock %}
</div>
</body>
</html>

（2）在子模板中使用

子模板主要是用内容填充母版中空的block函数

# extends 告诉模板引擎，这个模板继承了另外一个模板
{% extends "base.html" %}

{% block 名字 %}
    子模板的内容
{% endblock 名字 %}

<!-- 子模板 -->
{% extends "base.html" %}
 
{% block title %}My amazing blog{% endblock %}
 
{% block content %}
    {% for entry in blog_entries %}
        <h2>{{ entry.title }}</h2>
        <p>{{ entry.body }}</p>
    {% endfor %}
{% endblock %}

二、强调（注意点）

子模板若是没有重写母版中的block，那么就用父级的block的内容。如案例中的 sidebar block没用重写，那么使用母版中sidebar block中的内容
一旦子模板重写了模板中的盒子，即便母版中block有内容，也会覆盖母版中的内容显示子模板中的内容
在base模版中设置越多的 {% block %} 标签越好。请记住，子模版没必要定义所有父模版中的blocks，因此，你能够在大多数blocks中填充合理的默认内容，而后，只定义你须要的那一个。多一点钩子总比少一点好。
为了更好的可读性，你也能够给你的 {% endblock %} 标签一个名字。例如：

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

不能在一个模版中定义多个相同名字的 block 标签。

3、静态文件

一、在配置文件settings中配置过静态文件

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static')
]

二、导入使用静态文件

在静态文件 static 中，能够放置css文件、js文件、img文件、第三方库文件等，要使用这些静态文件，须要将它们导入到模板中。code

<link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">

该方法已经写死了路径，一旦配置文件中的 STATIC_URL 发生改变，就没法找到文件htm

三、动态获取

（1）方法一：使用 static 标签函数

{% load static %}
#static返回值,会拼上传参的路径
{% static "参数用来传参" %}

# 案例，利用static函数，在函数中拼接好路径，return到模板中
<link rel="stylesheet" href="{% static 'css/mycss.css' %}">

（2）方法二：使用 get_static_prefix 标签

{%load static%}
# get_static_prefix返回值是:静态文件的地址,至关于/static/
# 注意在css前面不要加‘ / ’
{% get_static_prefix %}css/mycss.css

<link rel="stylesheet" href="{% get_static_prefix %}css/mycss.css">