refactor html templates using base.html

Date: March 22nd 2016
Last updated: March 22nd 2016

A single html template is rendered for each method in Duplication can occur quickly if the same content is recycled between templates. The solution is to create a base level html file that can be added to.

The purpose of this example is to create a header once that is used on many html pages.

Create base.html
The content that is added will fall between and .

{% load staticfiles %}
      <link rel="stylesheet" type="text/css"
            href="{% static 'surferprofile/style.css' %}" />
          <div id="logo">SURFDIARY</div>
          <div class="headermenu">Logout</div>
          <div class="headermenu">Groups</div>
          <div class="headermenu">Stats</div>
          <div class="headermenu">Alerts</div>

      {% block body_block %}{% endblock %}


Modify diary.html
Note here the call to extend base.html with the content from diary.html. The content that is inserted falls between the body_block and endblock statements.

{% extends 'surferprofile/base.html' %}

{% block body_block %}
    <div id="diarycontainer">
          This is a diary entry for <strong>{{ surfer.firstname }}</strong>
        {% if surfdiary %}
          <table id='diarytable'>
              <tr id='diarytitlerow'>
                  <!---- <snipped> ---->

            {% for entry in surfdiary %}
                  <td>{{ entry.beach }}</td>
                  <!---- <snipped> ---->                  
          {% endfor %}
      {% else %}
          <p>No diary entries.</p>
      {% endif %}

{% endblock %}

results matching ""

    No results matching ""