Template tags¶
Use the included djfrontend template tags to suit your needs.
djfrontend¶
Loads all the Django Frontend template tags.
{% load djfrontend %}
Each template tag now has a default value. You only need to include an argument if you wish to change the default.
djfrontend_h5bp_html¶
Returns HTML tag according to chosen language. The default, ‘en’ is used if another language is not set.
{% djfrontend_h5bp_html %}
renders:
<html class="no-js" lang="en">
djfrontend_h5bp_css¶
Returns HTML5 Boilerplate CSS file according to version number. The default version is the included ‘5.3.0’.
{% djfrontend_h5bp_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/h5bp/5.3.0/h5bp.css">
djfrontend_normalize¶
Returns Normalize CSS file according to version number. The default version is the included ‘4.2.0’.
{% djfrontend_normalize %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/normalize/4.2.0/normalize.css">
djfrontend_fontawesome¶
Returns Font Awesome CSS file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file. The default version is the included ‘4.6.3’.
{% djfrontend_fontawesome %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/fontawesome/4.6.3/font-awesome.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/fontawesome/4.6.3/font-awesome.min.css">
djfrontend_modernizr¶
Returns Modernizr JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local callback. The default version is the included ‘2.8.3’.
{% djfrontend_modernizr %}
renders:
<script src="/static/djfrontend/js/modernizr/2.8.3/modernizr.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>window.Modernizr || document.write(\'<script src="static/djfrontend/js/modernizr/2.8.3/modernizr.min.js"><\/script>\')</script>
djfrontend_jquery¶
Returns jQuery JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from Google CDN with local fallback. The default version is the included ‘1.12.4’.
{% djfrontend_jquery %}
renders:
<script src="/static/djfrontend/js/jquery/1.12.4/jquery.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/djfrontend/js/jquery/1.12.4/jquery.min.js"><\/script>')</script>
djfrontend_jqueryui¶
Returns jQuery UI plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from Google CDN with local fallback. The default version is the included ‘1.11.4’.
{% djfrontend_jqueryui %}
renders:
<script src="/static/djfrontend/js/jquery/jqueryui/1.11.4/jquery-ui.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write(\'<script src="/static/djfrontend/js/jquery/jqueryui/1.11.4/jquery-ui.min.js"><\/script>\')</script>
djfrontend_jquery_datatables¶
Returns the jQuery DataTables plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.10.12’.
{% djfrontend_jquery_datatables %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.dataTables/1.10.12/jquery.dataTables.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/jquery.dataTables.min.js"></script>
<script>window.jQuery.fn.DataTable || document.write('<script src="/static/djfrontend/js/jquery/jquery.dataTables/1.10.12/jquery.dataTables.min.js"><\/script>')</script>
djfrontend_jquery_datatables_css¶
Returns the jQuery DataTables CSS file according to version number. The default version is the included ‘1.10.12’.
{% djfrontend_jquery_datatables_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/jquery/jquery.dataTables/1.10.12/jquery.dataTables.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/jquery/jquery.dataTables/1.10.12/jquery.dataTables.min.css">
djfrontend_jquery_formset¶
Returns the jQuery Dynamic Formset plugin JavaScript file according to version number. TTEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.2.2’.
{% djfrontend_jquery_formset %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.formset/1.2.2/jquery.formset.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.formset/1.2.2/jquery.formset.min.js"></script>
<script>window.jQuery.fn.formset || document.write('<script src="/static/djfrontend/js/jquery/jquery.formset/1.2.2/jquery.formset.min.js"><\/script>')</script>
djfrontend_jquery_scrollto¶
Returns the jQuery ScrollTo plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘2.1.2’.
{% djfrontend_jquery_scrollto %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.scrollTo/2.1.2/jquery.scrollTo.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script>window.jQuery.fn.scrollTo || document.write('<script src="/static/djfrontend/js/jquery/jquery.scrollTo/2.1.2/jquery.scrollTo.min.js"><\/script>')</script>
djfrontend_jquery_smoothscroll¶
Returns the jQuery Smooth Scroll plugin JavaScript file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘1.7.2’.
{% djfrontend_jquery_smoothscroll %}
renders:
<script src="/static/djfrontend/js/jquery/jquery.smooth-scroll/1.7.2/jquery.smooth-scroll.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"></script>
<script>window.jQuery.fn.smoothScroll || document.write('<script src="/static/djfrontend/js/jquery/jquery.smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"><\/script>')</script>
djfrontend_twbs_css¶
Returns Twitter Bootstrap CSS file according to version number. TEMPLATE_DEBUG returns full file, otherwise returns minified file. The default version is the included ‘3.3.7’.
{% djfrontend_twbs_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap.min.css">
djfrontend_twbs_theme_css¶
Returns Twitter Bootstrap Theme CSS file according to version number. The default version is the included ‘3.3.7’.
{% djfrontend_twbs_theme_css %}
renders:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap-theme.css">
Or without TEMPLATE_DEBUG:
<link rel="stylesheet" href="/static/djfrontend/css/twbs/3.3.7/bootstrap-theme.min.css">
djfrontend_twbs_js¶
Returns Twitter Bootstrap JavaScript file(s) according to version number and file name(s). The default ‘all’ returns a concatenated file; full file for TEMPLATE_DEBUG, otherwise returns minified file from cdnjs with local fallback. The default version is the included ‘3.3.7’.
- affix
- alert
- button
- carousel
- collapse
- dropdown
- modal
- popover (adds tooltip if not included)
- scrollspy
- tab
- tooltip
- transition
Individual files are not minified.
{% djfrontend_twbs_js %}
renders:
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap.js"></script>
Or without TEMPLATE_DEBUG:
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>window.jQuery.fn.scrollspy || document.write('<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap.min.js"><\/script>')</script>
{% bootstrap_js files='alert affix' %}
renders:
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap-affix.js"></script>
<script src="/static/djfrontend/js/twbs/3.3.7/bootstrap-alert.js"></script>
Shout out to Ryan Brady and his Django Bootstrapped for inspiration and initial code.
djfrontend_ga¶
Returns Google Analytics Universal Analytics snippet if TEMPLATE_DEBUG is not set. Use DJFRONTEND_GA_SETDOMAINNAME to set domain for multiple, or cross-domain tracking. Set DJFRONTEND_GA_SETALLOWLINKER to use _setAllowLinker method on target site for cross-domain tracking.
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-XXXXX-X", "auto");ga("send", "pageview");</script>
Or with DJFRONTEND_GA_SETDOMAINNAME set:
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-XXXXX-X", "example.com");ga("send", "pageview");</script>
Or with DJFRONTEND_GA_SETDOMAINNAME and DJFRONTEND_GA_SETALLOWLINKER set:
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("require", "linker");ga("linker:autoLink", ["example.com"]);ga("create", "UA-XXXXX-X", "auto", {"allowLinker": true});ga("send", "pageview");</script>