2014-01-15 123 views
0

JS控件我有一個谷歌地圖「小部件」,包括HTML,CSS和JavaScript將需要無處不在這張地圖使用。因此,我正在尋找一種方法將這些組件提取到一個像Widget這樣的小部件中,並且只要將此文件包含在我想要使用該映射的任何位置即可。包括HTML,CSS,在Django HTML模板

我已經考慮:

  • 使得三個部分組成三個單獨的文件包括在內。這是我現在回退的解決方案,因爲我希望它只是一個文件。

  • 包括在報頭中的CSS和JavaScript,然後使用JavaScript來將所需的HTML添加到頁面上存在的元素。這看起來像一個黑客解決方案,它會做客戶端,因爲它會比如果HTML包含在服務器端更慢。

  • 以及針對此問題提出的解決方案: How to include plug-n-play widget statics [CSS/JS] without repetition?但是像問這個問題的人,我想要一個比簡單創建新基本模板更好的解決方案。

我以前的嘗試包括創建與所需的代碼和一個html文件{%包括「地圖-widget.html」%}在這兩個報頭,並在所需的位置。在兩次嘗試中都表示,小部件中包含的google api不存在。

我運行的Python 2.7和Django的1.5.4。

+0

如果有人有興趣或絆倒在這以後,我結束了3會包括一個對CSS,一個JS,一個用於HT毫升。我讓我的js包含一個html文件,以便它可以包含所有適當的谷歌庫。 – Rick

回答

0

你可以把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 %} 
+0

與問題是,雖然地圖是在幾個不同的地方使用它甚至還未接近一半的網站上使用。因此,讓每個頁面加載css和js似乎是一種不好的做法,因爲2或3頁將會使用它。 – Rick

+0

你可以有多個base.html模板。因此,只需製作一個單獨的基本模板,例如「base_map.html」,即爲具有地圖的頁面,這樣CSS/JS只能被這些模板繼承。 –