javascript - 带有 css/js 的 Django 'Include' 模板

标签 javascript html css django django-templates

我有一个通用模板,用于通过include将html(即menubar.html中的菜单栏)包含到其他应用程序模板中标签。它具有一些定义的 cssjs 功能,存储在各自的 menubar.css|menubar.js 文件中。

menubar.html 文件中包含这些文件的链接似乎更方便,如下所示:

//At the Start
<link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}" />

//.... other menubar HTML

//At the End
<script src="{% static '<app_name>/js/menubar.js' %}"></script>

我担心这不是一个好的做法,因为模板将加载不位于 HEADjs 中的 css不位于BODY 的末尾。 这些被描述为 standard HTML practises

明确的替代方案是在我包含子模板的每个模板中链接 cssjs,但这似乎很乏味。

我知道也可以扩展模板,但我相信使用 css/js 也会出现同样的问题。

什么是最好的?

最佳答案

您可以在此处使用 django-sekizai 软件包:

https://django-sekizai.readthedocs.io/en/latest/

您将拥有一个类似于以下内容的基本模板:

{% load sekizai_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <!-- other css and head content goes here -->
        {% render_block "css" %}
    </head>
    <body>
        ...

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        {% render_block "js" %}        
    </body>
</html>

然后在 menubar.html 中,您可以在模板中的任何位置添加以下内容,它们的 css 将添加到页面头部,而 javascript 将添加到正文底部:

{% addtoblock "css" %}
    <link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}"/>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script src="{% static '<app_name>/js/menubar.js' %}"></script>
{% endaddtoblock %}

这是一个非常方便的包!

关于javascript - 带有 css/js 的 Django 'Include' 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45550036/

相关文章:

javascript - 查找对象数组的平均值

html - 如何在单选/复选框输入下不让标签文本换行?

html - 溢出 x 消失但不应该

python - 如何用python检测字符串是否包含html代码?

javascript - jeditable - 在运行时禁用它

javascript - 在 "document.createElement"周围包裹一个 div

javascript - Web2py:使用表单提交 Javascript 变量

javascript - 如何强制输入值根据第三个输入的变化而变化?

html - 响应式前端web层

html - Bootstrap 3 : Alignment of Close Icon