Django Base Template and Navigation Bar

By using base template, we can ensure a standard look in the project and get rid of typing duplicate HTML code. We first need to create a folder named templates in the project's root folder. Then create a new file named base.html.

 

We need to change settings.py and tell that Django about our base template. Modify DIRS key as below.

Change it to:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [(os.path.join(BASE_DIR, 'templates')),],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

 

Visit https://getbootstrap.com/docs/4.3/getting-started/introduction/. Copy and paste the Starter Template into base.html

Add load static at the top. Remove <title> and add block title instead. Remove <h1> and add add block content instead.

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   {% block title %}
   {% endblock title %}

  </head>
  <body>
    {% block content %}
    {% endblock content%}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

 

 

Let's add a navigation bar into base.html from bootstrap (https://getbootstrap.com/docs/4.3/components/navbar/). Choose one navbar you like. Copy and Paste the navbar code just before the </head> tag. Then customize it according to your requirements. The below is my modifed nav bar. Because I don't have the urls at the moment I just used # signs not to get any errors. If you notice I used If Else statement here. Because I want all my visitors to see Home and CrmApp links no matter they are authenticated or not. If user is authenticated he will also see My Task and Logout links. If user is not authenticated he will see register and Login links.

 

    <!--Navbar Starts Here-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="#">CrmApp <span class="sr-only">(current)</span></a>
        </li>
        </ul>
        {% if user.is_authenticated %}


        <ul class="navbar-nav">
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{user.username}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">My Tasks</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Logout</a>
            </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0"  action="#" method='GET'>
            <input class="form-control mr-sm-2" type="search" name='q' aria-label="Search" placeholder='Search' value={{request.GET.q}}  >
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        {% else %}
        
        <a class="btn btn-outline-secondary" href="#">Login</a>
        <a class="btn btn-primary ml-2 mr-2" href="#">Register</a>  

        {% endif %}
    </div>
    </nav>
    <!--Navbar Ends-->

 

 

Now we can just extend any template to our base template by simply adding {% extends 'base.html' %} at the top of a template. I will extend my crmapp.html template to our base and see how it looks.

crmapp.html

{% extends 'base.html' %}
{% block title %}
    <title>CrmApp</title>
{% endblock title %}

{% block content %}
    <div class="container">
        {{welcome_msg}}
    </div>
{% endblock content %}

 

 It looks better with a Navbar. This is how it looks if user is authenticated

 

 

 

and this is how Navbar looks if user is not authenticated

 

 

 

FAVICON:

We can add favicon by adding the below line of code in our base.html. Favicon file is located static/images folder. Favicon size is 16x16. Just add it before the {% block title %} 

<link rel="icon" href="/{% static 'images/favicon.ico' %}" type="image/gif" sizes="16x16">

 

© selimatmaca.com. All Rights Reserved.