Django 中的独立前端模块答案

【问题标题】：Stand-alone front-end modules in DjangoDjango 中的独立前端模块
【发布时间】：2012-06-28 21:23:39
【问题描述】：

我正在尝试创建独立的前端模块（HTML、CSS 和 JS）以集成到 Django 应用程序中。我的意思最好的例子是“地图”模块，我想将它包含在各种不相关的页面中，可能在每个页面的不同位置。

我有一个提供地图所需的 HTML 代码的模板，我希望 CSS 和 JS 代码也包含在此模板中，以简化前端依赖项的处理。到目前为止，这可以使用{% include %} 标签来实现。

但是在 HTML 页面中间包含样式表和脚本在前端性能方面是一种非常糟糕的做法。（CSS应该包含在<head>中，JS应该包含在<body>的末尾）

如果{% include %} 标签被呈现为包含它们的模板的一部分并且可以覆盖{% block %} 标签，我的问题可能已经解决。在 Django 中情况并非如此。 {% include %} 标签首先呈现为 HTML，然后才包含在内，因此它们不能覆盖 {% block %} 标签。

查看有关该主题的过去问题表明，普遍的智慧是使用模板继承（即{% extends %}）而不是{% include %}，但由于我希望我的模块是独立的，我不知道如何在我的情况下，我可以使用继承。

我可以做些什么来维护模板内的前端依赖项，同时保持前端性能最佳实践？

谢谢！

【问题讨论】：

标签： django frontend

【解决方案1】：

首先要创建地图模板标签，请使用inclusion tags。

关于静态文件的问题，我会创建一个相关的模板标签，将静态文件引用转储到您当前的模板中。然后将该模板标签包含在一个块中。

如果您的基本模板在 base.html 中，而页面模板在 page.html 中：

base.html

<html>
    <head>
        {% block css %}
            <link rel="stylesheet...
        {% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
        {% block scripts %}{% endblock %}
    </body>
</html>

page.html

{% extends 'base.html' %}

{% block css %}
    {{ block.super }}
    {% map_css %}
{% endblock %}

{% block scripts %}
    {{ block.super }}
    {% map_scripts %}
{% endblock %}

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

【讨论】：

谢谢！与 3 个不同的包含标签相比，包含标签有什么优势？
我不太明白你的问题。上例中的标签{% map_html %} 将是一个包含标签。