django-template-media 0.3.0

打印媒体

《{% print_media %}》标签用于打印页面上迄今为止累积的所有媒体。将其放置在基本模板中是一个明智的选择。

不带参数调用此标签将打印出所有累积的媒体。

您可以通过提供第二个参数来仅打印出css或js。

{% print_media "css" %}

{% print_media "js" %}

在模板中构建媒体

如果您想要构建一个临时的媒体实例，用于全站媒体或复杂页面，可以使用《{% media %}》块。生成的《Media()》实例将被添加到当前页面的媒体中。就像在表单上的《Media》类一样，同一个文件可以被多次命名——只有第一个实例会被使用。您可以安全地命名当前页面的所有依赖项，无需担心依赖项被多次包含。

{% extends "site.html" %}

{% load media_tags %}
{% block media %}
    {% media %}

        {% add_js "js/jquery.js" %}
        {% add_js "js/jquery.lib.js" %}
        {% add_js "js/bootstrap.js" %}
        {% add_js "js/bootstrap.lib.js" %}

        {% add_css "screen" "css/bootstrap.css" %}
        {% add_css "screen" "css/widget.css" %}

        {% if user.is_anonymous %}
            {% add_media login_form.media %}
        {% endif %}

    {% endmedia %}

    {# This is called **after** adding all the media #}
    {{ block.super }}
{% endblock %}

《{% media %}》块中的三个可能的标签如下

{% add_js path %}

将JavaScript文件《path》添加到媒体中。一个标签中可以指定多个文件，或者将它们作为一系列标签依次放置。

{% add_css media_type path %}

将CSS文件《path》添加到媒体中，使用《media_type》。一个标签中可以指定多个文件，或者将它们作为一系列标签依次放置。

{% add_media media %}

将命名的表单媒体添加到当前媒体中。可以一次性添加多个媒体实例，只需命名它们即可，或者将它们作为一系列标签依次放置。

从表单添加媒体

如果您只想添加单个JavaScript文件或CSS文件，或者单个表单媒体实例，无需将所有内容包裹在《{% media %}》块中。

{% extends 'site.html' %}

{% load media_tags %}

{% block body %}
    <form action='.' method='post'>
        {% csrf_token %}
        {{ form }}
        <input type="submit">
    </form>
{% endblock %}

{% block media %}
    {% add_media form.media %}
    {{ block.super }}
{% endblock %}

《{% add_media %}》标签接受多个媒体实例，因此如果您有多个表单，可以一次性添加所有表单的媒体。

{% add_media form_1.media form_2.media %}

与模板层次结构一起工作

在子模板中，对《{{ block.super }}》的调用必须在所有修改媒体的调用之后进行。因为媒体是在祖先的《{% block media %}》中打印出来的，所以子模板必须在调用《{{ block.super }}》之前添加它需要的所有媒体。

《{% add_js %}》、《{% add_css %}》和《{% add_media %}》标签在《{% media %}》块外始终预先添加到当前页面的媒体中。这是因为模板是从子到父渲染的，父级媒体应该先于子级媒体。因此，如果您在页面上有多个《{% add_media %}》或《{% media %}》标签，媒体将按其在页面上的出现顺序的相反顺序打印出来。因此，建议每个模板只有一个《{% add_media %}》或《{% media %}》块，以防止混淆。

在《{% media %}》块中，对《{% add_media %}》、《{% add_js %}》和《{% add_css %}》的调用将媒体附加到当前临时的媒体实例。