1

I am creating an SOP site for my team and am trying to set up a global navbar so I don’t have to keep updating every .html as new processes are added. I am hosting this site on github for now (pending approval from the powers that be to host it internally). I had it working using base.html and home.html while following a tutorial, but kept getting lost as this is not the naming convention I am used to and the content was not displaying on github.I switched to index.html and navbar.html and now I’m getting a blank screen. It’s very possible I missed updating a path or view or something, I’m very new to Django. Let me know if you need any other info!

Here’s my index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="">
    <title>DART Homepage</title>
</head>
<body>

    {% block navbar %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

A snippet of navbar.html:

{% extends 'index.html' %}

{% block navbar %}
<nav class="navbar navbar-expand-lg bg-body-tertiary" id="nav">
{% endblock %}

Structure:

Capture
Capture261×616 32.5 KB

HowTo\views.py

from django.views.generic import TemplateView

class HomePageView(TemplateView):
    template_name = 'index.html'

class NavbarView(TemplateView):
    template_name = 'navbar.html'

HowTo\urls.py

from .views import HomePageView

app_name = 'HowTo'

urlpatterns = [
    path('', HomePageView.as_view(), name="Home")
]

DARTHomepage\urls.py

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

from HowTo import urls as HowTo_urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(HowTo_urls, namespace='HowTo'))
]
2

Where and how are you calling your NavbarView?

And, you may want to read the thread at How can I render multiple views in one template

3

I’m going to guess that you’re trying to include navbar.html within index.html where you have {% block navbar %}{% endblock %}? If I’m wrong you can ignore the rest of this :slight_smile:

In Django templates, if you want to do that you should:

  1. In index.html replace {% block navbar %}{% endblock %} with {% include "navbar.html" %}
  2. Remove {% extends 'index.html' %}, {% block navbar %} and {% endblock %} from navbar.html
  3. Remove the NavbarView() from HowTo_views.py - that view isn’t being used, as far as I can tell.

That should mean that when you view the URL / the HomePageView() will be called, rendering the index.html template. This will include the navbar.html template in the correct position.

However… this is fine for one page, but when you add others, that need different templates, then you’re going to either duplicate all of the boilerplate HTML (like <head> etc) in index.html in the other templates, or else move that boilerplate into “include” files and include them in the new templates.

It would be best to try to get your head around extending templates, which is what was happening with the base.html and home.html from the tutorial you were doing. It’s sort of the inverse of “including” files, which can make it hard to understand when it’s a new concept to you.

The idea is to have a base.html template which contains all of the common bits of your site’s HTML: <head> etc, but also often things like navbars, headers, footers, etc. The template doesn’t have to be called base.html, but that’s the convention.

Within that base template you have “blocks” which are like slots into which other templates – that extend from base.html – insert their own content.

So your base.html might have {% block main %}{% endblock %} tags where the main content of each page would go.

Then a view will render a template for its page. Such as home.html. This would look something like:

{% extends "base.html" %}

{% block main %}
<p>This is the main content of my page</p>
{% endblock %}

So that’s indicating which base template it’s extending. Because you could have different base templates – for example if you had different overall layouts or designs for different parts of your site.

And then it has the HTML that goes into the “main” slot in that base.html template.

You can have lots of blocks in a base template.

And non-base templates can also contain blocks if other templates extend from them.

And you can still {% include ... %} other partial templates.

But this way of extending a base template is a good way to structure things, and is used in nearly all Django projects, so it’s worth persevering with.

1 Like
4

Thank you so much for the detailed response. The navbar is displaying now! I’ve found a couple tutorials on how extending templates works as well. If you’ve ever considered creating your own course, I think you’d be a great teacher!

1 Like