Django'Include'template with css/js

我有一個通用模板，用於通過include標籤將html（即菜單欄menubar.html）包含到其他應用程序模板中。它具有一些定義的css和js功能，分別存儲在menubar.css | menubar.js文件。Django'Include'template with css/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>

我很擔心，這是不好的做法，因爲模板將與被加載css不位於HEAD和js不位於BODY的末尾。這些被描述爲standard HTML practises。

清晰的選擇是鏈接CSS或JS在每一個模板，我包括子模板，但是這似乎有些單調乏味。

我知道還有擴展模板的可能性，但是我相信css/js的用法會出現同樣的問題。

什麼是最好的？

來源

2017-08-07 Mr G

你可以在這裏利用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 %}

這是一個非常方便的軟件包！

來源

2017-08-07 15:41:52 tdsymonds

好的建議！這與[模板繼承]（https://docs.djangoproject.com/en/1.11/ref/templates/language/#template-inheritance）有何不同？我剛剛讀過，你可以使用'{％block％}'標籤並調用'{{block.super}}'來獲取原始內容。難道不會在本地執行相同的操作（沒有額外的軟件包）？ –

對不起，我看到了區別 - django不提供[包含內的處理塊]的原生支持（https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include）。我發現django-sekizai專門處理這個問題。好一個！ –

通過使用模板繼承，您可以在django中動態加載您的js和css。 This is the reference。

從this後關於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%}

來源

2017-08-07 15:09:51

如果我使用{％include％}標記而不是繼承，這可能會如何看待@gene-sescon？也就是說，我在頁面中包含一個html資源，但它也需要像頁面本身一樣擴展JS功能。 –

Django'Include'template with css/js

回答

相關問題