Включить html, css, js widget в шаблон Django html

Question

У меня есть «виджет» карт Google, который включает html, css и javascript, которые должны присутствовать везде, где используется эта карта. Таким образом, я ищу способ извлечь эти компоненты в один виджет, такой как файл, и просто включать этот файл, где бы я ни захотел использовать карту.

я уже рассматривал:

• делая из трех компонентов трех отдельных файлов, которые будут включены. В настоящее время это решение для моего решения, поскольку я хотел бы, чтобы это был только один файл.

• включая 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.

Answer 1

Вы можете поместить HTML, CSS, JS в базовый шаблон для проекта, а затем он будет присутствовать на всех ваших страницах. Вот Джанго Docs, показывающий, как:

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