Manage front end dependencies in Django.
Project description
django-fe-manager
Manage front end dependencies in Django
Usage
Create a FE_MANAGER variable in your project settings defining the modules that can be used in your project. An example:
FE_MANAGER = {
'bootstrap': {
'version': '4.0.0',
'js': ['/static/js/bootstrap.bundle.min.js'],
'css': ['/static/css/bootstrap.css', '/static/css/custom.css'],
'dependencies': {'jquery'}
},
'jquery': {
'version': '3.2.1',
'js': ['/static/private/js/vendors/jquery-3.2.1.min.js']
},
'moment': {
'version': '2.24.0',
'js': ['https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js']
},
'chartjs': {
'version': '2.9.3',
'js': ['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'],
'dependencies': {'moment'}
}
}
In your base view load the module, declare your dependencies, declare a dummy block at the beggining and add the css and js output tags:
{% load fe_manager %}
{% fe_manager_add_module 'bootstrap' %}
{% fe_manager_add_module 'jquery' %}
{% block fe_manager %}{% endblock fe_manager %}
<!DOCTYPE html>
<html>
<head>
<!-- Title and other HTML code... -->
<!-- Output CSS -->
{% fe_manager_output_css %}
</head>
<body>
<!-- Content and other stuff... -->
{% block content %}{% endblock content%}
<!-- Output JS -->
{% fe_manager_output_js %}
</body>
</html>
Every child view can now add its dependencies in the following way...
{% extends 'base.html' %}
{% load fe_manager %}
{% block fe_manager %}
{% fe_manager_add_module 'chartjs' %}
{% endblock fe_manager %}
{% block content %}
Content here!
{% endblock content %}
The plugin will take care of dependency ordering and outputting both JS and CSS to your base template!
0.0.3
- Add some documentation
0.0.2
- Fix packaging (utils package not being included previously).
0.0.1
- Initial release on PyPi.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
