django design templates code example

Example 1: how to connect templates in django

# Template directory setting
TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), 'templates'),
)

Example 2: django template examples

{% load static %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% block page_meta %}
  {% endblock %}

  {# Vendor styles #}
  {% block vendor_css %}
    <link rel="stylesheet" type="text/css" media="all" href="{% static 'css/vendor.css' %}" />
  {% endblock %}

  {# Global styles #}
  {% block site_css %}
    <link rel="stylesheet" type="text/css" media="all" href="{% static 'css/application.css' %}" />
  {% endblock %}

  {# Page-specific styles #}
  {% autoescape off %}
    {% block page_css %}{% endblock %}
  {% endautoescape %}

  {% block extra_head %}
    {# Extra header stuff (scripts, styles, metadata, etc) #}
  {% endblock %}

  <title>{% block page_title %}{% endblock %}</title>
</head>
<body class="{% block body_class %}{% endblock %}">
{% block body %}
    {# Page content will go here #}
{% endblock %}

{# Modal HTML #}
{% block modals %}
{% endblock %}

{# Vendor javascript #}
{% block vendor_js %}
  <script src="{% static 'js/vendor.js' %}"></script>
{% endblock %}

{# Global javascript #}
{% block site_js %}
  <script src="{% static 'js/application.js' %}"></script>
{% endblock %}

{# Shared data for javascript #}
<script type="text/javascript">
  window._sharedData = {
    {% autoescape off %}
      {% block shared_data %}
        'DEBUG': {% if debug %}true{% else %}false{% endif %},
      {% endblock %}
    {% endautoescape %}
  }
</script>

{# Page javascript #}
{% autoescape off %}
  {% block page_js %}
  {% endblock %}
{% endautoescape %}
</body>
</html>