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

Question

I have a Google maps "widget" that includes html, css, and javascript that will need to be present everywhere that this map is used. As such I'm looking for a way to extract these components into one widget like file and simply include this file wherever I want to use the map.

I have already considered:

• making the three components three separate files to be included. This is currently my fall back solution as I would like to have it be just one file.

• including the css and javascript in the header and then using the javascript to add the desired html to an element that exists on the page. This seems like a hack solution and it would be done client side as such it would be slower than if the html were included server side.

• and the solution proposed for this question: How to include plug-n-play widget statics [CSS/JS] without repetition? But like the person asking that question I would like a better solution than simply creating a new base template.

My previous attempts have included creating an html file with the necessary code and {% include "maps-widget.html" %} in both the header and in the desired location. In both attempts it stated that google api that is included in the widget was not present.

I am running python 2.7 and Django 1.5.4.

Answer 1

You can put the HTML, CSS, JS in the Base template for the project, and then it will be present in all of you pages. Here is the Django Docs showing how:

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

A typical implementation for CSS / JS would look like this:

<!-- 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 %}

And now just extend your base.html template and it will inherit all of the the CSS / JS files

<!-- myTemplate.html -->

{% extends "base.html" %}

{% block content %}

  Your Google Map content, etc...

{% endblock content %}