帶有CSS / JS的Django'include'模板

Question

我有一個通用模板，用於通過include標記將html（即menubar.html的menubar）包含到其他應用程序模板中。 它具有一些定義的CSS和JS功能，分別存儲在相應的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>

我擔心這不是一個好習慣，因為模板將加載不位於HEAD的css和不位於BODY末尾的js 。 這些被描述為標准的HTML慣例。

明確的替代方法是在包含子模板的每個模板中鏈接css或js ，但這似乎很乏味。

我知道也有可能擴展模板，但是我相信css / js的使用也會發生同樣的問題。

什么才好

Answer 1

您可以在此處使用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 %}

這是一個非常方便的包裝！

Answer 2

您可以使用模板繼承在django中動態加載js和CSS。 這是參考。

從有關javascript加載的這篇文章中，您對繼承標記的使用可能如下所示：

#base.html
{% block js %}
   <script src="{% static '<app>/js/resource.js' %}"></script>
   ... //other scripts
{% endblock %}

然后在另一個模板中：

# child.html
{% extends base.html %}

{% block js %}
   {{ block.super }} //Includes base.html js block content
   <script src="{% static '<otherapp>/js/resource2.js' %}">
   ... //other scripts
{% endblock%}

帶有CSS / JS的Django'include'模板

問題描述

2 個解決方案

解決方案1
4 已采納 2017-08-07 15:41:52

解決方案2
1 2017-08-07 15:09:51

帶有CSS / JS的Django&#39;include&#39;模板

問題描述

2 個解決方案

解決方案1 4 已采納 2017-08-07 15:41:52

解決方案2 1 2017-08-07 15:09:51

帶有CSS / JS的Django'include'模板

解決方案1
4 已采納 2017-08-07 15:41:52

解決方案2
1 2017-08-07 15:09:51