Django templates

Last updated on May 20, 2020 5 min read blog, django blog, templates

.html templates in Django & how to inherit layout

In Django it is a good practice to inherit layout. Therefor you first need to make a template directory in your app. There you can save a base.html. This site has the base layout of all sites which are extended wwith it. This is how a base.html file can look like:

  {% load static %}
  <!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
      <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
          <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
  
      {% if title %}
        <title> Django Blog - {{ title }} </title>
      {% else %}
        <title> Django Blog </title>
      {% endif %}
    </head>
    <body>
            <header class="site-header">
          <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
            <div class="container">
              <!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
              <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav mr-auto">
                  <!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
                <!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
                </div>
                <!-- Navbar Right Side -->
                <div class="navbar-nav">
                  <a class="nav-item nav-link" href="#">Login</a>
                  <a class="nav-item nav-link" href="#">Register</a>
                </div>
              </div>
            </div>
          </nav>
        </header>
        <main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          {% block content %}{% endblock %}
        </div>
        <div class="col-md-4">
          <div class="content-section">
            <h3>Our Sidebar</h3>
            <p class='text-muted'>You can put any information here you'd like.
              <ul class="list-group">
                <li class="list-group-item list-group-item-light">Latest Posts</li>
                <li class="list-group-item list-group-item-light">Announcements</li>
                <li class="list-group-item list-group-item-light">Calendars</li>
                <li class="list-group-item list-group-item-light">etc</li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </main>
  
  
        <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
    </body>
  </html>

The file refers to online available bootstrap and CSS stylesheets as well as to JacaScript files.

<!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
              <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
              
              <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

It has a navigation bar in the header of the page:

<header class="site-header">
          <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
            <div class="container">
              <!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
              <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav mr-auto">
                  <!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
                <!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
                </div>
                <!-- Navbar Right Side -->
                <div class="navbar-nav">
                  <a class="nav-item nav-link" href="#">Login</a>
                  <a class="nav-item nav-link" href="#">Register</a>
                </div>
              </div>
            </div>
          </nav>
        </header>

And the main page consists of a sidebar and the individual content of each site:

<main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          {% block content %}{% endblock %}
        </div>
        <div class="col-md-4">
          <div class="content-section">
            <h3>Our Sidebar</h3>
            <p class='text-muted'>You can put any information here you'd like.
              <ul class="list-group">
                <li class="list-group-item list-group-item-light">Latest Posts</li>
                <li class="list-group-item list-group-item-light">Announcements</li>
                <li class="list-group-item list-group-item-light">Calendars</li>
                <li class="list-group-item list-group-item-light">etc</li>
              </ul>
            </p>
          </div>
        </div>
      </div>
    </main>

Thereby the content of each site is refered with:

<div class="col-md-8">
          {% block content %}{% endblock %}
        </div>

The individual sites are also stored in the templates directory of your app and are extended with the base.html file. Sytax look like this:

{% extends "blog/base.html" %}
{% block content %}
    <h1>About page!</h1>
{% endblock content %}

The navabar header is referencing his links with:

<div class="navbar-nav mr-auto">
                  <!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
                <!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
                  <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
                </div>

Thereby href=“{% url ‘blog-home’ %} refers to the urls.py file of the app. Syntax of the urls.py file looks like this:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='blog-home'),
    path('about/', views.about, name='blog-about'),
]

This file itself refers to the views.py file in the app directory. This file contains this code:

 from django.shortcuts import render

posts = [
    {
        'author':'Alex',
        'title' : 'Blog Post 1',
        'content': 'First post content',
        'date_posted': 'May 20, 2020'
    },
    {
        'author':'Bettina',
        'title' : 'Blog Post 2',
        'content': 'second post content',
        'date_posted': 'May 21, 2020'
    }
]

def home(request):
    context = {
        'posts': posts
    }
    return render(request, 'blog/home.html', context)

def about(request):
    return render(request, 'blog/about.html', {'title': 'About'})

Each app has its own urls.py file. And the django project refers to this urls in the settings.py file in the project directory with this code:

....
from django.urls import path, include
from django.contrib import admin

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
]
....
blog django forloop html
Alex Hildebrandt
Alex Hildebrandt
PhD candidate for computational science
Next
Previous

Related