在Django HTML模板中包含html，css，js小部件

Question

我有一個包含html，css和javascript的Google地圖“小部件”，在使用此地圖的所有地方都將需要顯示它。 因此，我正在尋找一種將這些組件提取到文件之類的小部件中的方法，並在需要使用地圖的任何地方簡單地包含此文件。

我已經考慮過：

• 使這三個組件包含三個單獨的文件。 目前，這是我的后備解決方案，因為我希望它只是一個文件。

• 在標頭中包含css和javascript，然后使用javascript將所需的html添加到頁面上存在的元素中。 這似乎是一個hack解決方案，它將在客戶端完成，因此比在服務器端包含html還要慢。

• 以及針對該問題提出的解決方案： 如何不重復地包含即插即用小部件靜態[CSS / JS]？ 但是，就像問這個問題的人一樣，我希望有一個比單純創建新的基礎模板更好的解決方案。

我以前的嘗試包括使用必要的代碼創建一個html文件，並且在標頭和所需位置中{％包括“ maps-widget.html”％}。 在這兩次嘗試中，它都表明不包含在小部件中的google api。

我正在運行python 2.7和Django 1.5.4。

Answer 1

您可以將HTML，CSS，JS放入該項目的基本模板中，然后它將出現在您的所有頁面中。 這是Django文檔，顯示了如何：

http://www.djangobook.com/en/2.0/chapter04.html

CSS / JS的典型實現如下所示：

<!-- Your base.html file -->

{% block static %}

  Your CSS Files go here

{% endblock static %}

{% block content %}

  This can be a default value, but otherwise your template will override it

{% endblock content %}

{% js block %}

  Your JS files / links

{% endblock js %}

現在，只需擴展您的base.html模板，它將繼承所有CSS / JS文件

<!-- myTemplate.html -->

{% extends "base.html" %}

{% block content %}

  Your Google Map content, etc...

{% endblock content %}