Question

我正在尝试创建独立的前端模块（HTML，CSS＆amp; JS）以集成到Django应用程序中。我所说的最好的例子是“地图”模块，我希望将其包含在各种不相关的页面中，可能位于每个页面的不同位置。

我有一个模板，提供了我需要的地图HTML代码，我希望CSS和JS代码也可以通过这个模板包含在内，以便于处理前端依赖。到目前为止，这可以使用{% include %}标记来实现。

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

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

围绕这个主题回顾过去的问题表明，常识是使用模板继承（即{% extends %}）而不是{% include %}，但由于我希望我的模块是独立的，所以我不喜欢我不知道如何在我的案例中使用继承。

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

谢谢！

Answer 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 %}

Django中的独立前端模块

1 个答案: