How to add a simple navbar to all my pages?

Question

I'm trying to create a taking notes app in Django framework. I just want to add a simple navigation bar between homepage, adding notes and administration notes. My question is where do i locate my html file with the navbar? And how the code should look like? So far i have the following configuration where index.html represents the file for the navbar. I also tried to include the navbar notes_app folder near the other 3 html file, but that does not work.

Also,my code for my navbar looks like:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-link" href="/notes_app">Homepage</a>
              <a class="nav-link" href="/notes_app/adaugare">Adaugare</a>
              <a class="nav-link" href="/notes_app/administrare">Administrare</a>
              
            </div>
          </div>
        </div>
    </nav>
  </body>
</html>

I want to mention that the language is in Romanian so the meanings for HTML files are:

adaugare.html -> the page where i will add new notes

adminstrare.html -> the page where i will edit the content of notes

I also want to link this navigation bar to all my pages, so any help will be appreciated. I also want to mention i viewed the official page of Bootstrap, viewed Django tutorials and Bootstrap tutorials and also i checked some already built examples for a notes application, but did not work for me.
Thank you!

https://github.com/wsvincent/djangox consult this repo for basic better understanding — Faisal Nazik, Feb 23 '22 at 19:56
you can create a base template https://stackoverflow.com/questions/14720464/django-project-base-template — Wazy, Feb 23 '22 at 20:44

score 3 · Answer 1 · answered Feb 23 '22 at 20:46

The best idea is to create a base.html file with all html code you want to be shared between all sites. This includes your navbar. The file you have shared is perfect for it. Just put there just after nav section this:

<html>
    ...
    </nav>
    {% block content %}
    {% endblock content %}
  </body>
</html>

And from now on in every template in this project implement only specific code (you don't have to write again anything that is in base.html, or in your case index.html).

Your template files should look like this:

{% extends 'notes_app/index.html' %}    # depending on where you locate that file

{% block content %}
   # here put all code for that specific template
{% endblock content %}

It will basically include all code from single template inside block content section in base/index file.

More detailed info about template inheritance

Even better, put `{% block navbar %}` and `{% endblock navbar %}` around the navbar HTML in base.html, so your templates can augment it or replace/omit it where appropriate. What is between those tags will then become the inherited default for templates which extend it. — nigel222, Feb 24 '22 at 10:56

How to add a simple navbar to all my pages?

1 Answers1