Как добавить простую панель навигации на все мои страницы?

Я пытаюсь создать приложение для заметок на фреймворке Django. Я просто хочу добавить простую навигационную панель между домашней страницей, добавлением заметок и администрированием заметок. Мой вопрос в следующем. Где мне разместить мой html файл с навигационной панелью? И как должен выглядеть код? Пока что у меня следующая конфигурация, где index.html представляет собой файл для навигационной панели. Я также пытался включить папку navbar notes_app рядом с другими 3 html файлами, но это не работает. enter image description here

Кроме того, мой код для навигационной панели выглядит следующим образом:

<!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>

Хочу отметить, что язык румынский, поэтому значения для файлов HTML следующие:

adaugare.html -> страница, на которой я буду добавлять новые заметки

adminstrare.html -> страница, на которой я буду редактировать содержание заметок

Я также хочу связать эту навигационную панель со всеми моими страницами, поэтому любая помощь будет оценена по достоинству. Я также хочу упомянуть, что я просмотрел официальную страницу Bootstrap, просмотрел учебники по Django и Bootstrap, а также проверил несколько уже созданных примеров для приложения заметок, но у меня ничего не получилось.
. Спасибо!

Лучшая идея - создать файл base.html со всем html-кодом, который вы хотите использовать совместно со всеми сайтами. Сюда входит и ваша панель навигации. Файл, которым вы поделились, идеально подходит для этого. Просто поместите туда сразу после секции nav следующее:

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

И впредь в каждом шаблоне этого проекта внедряйте только конкретный код (вам не нужно снова писать то, что находится в base.html, или в вашем случае index.html).

Ваши файлы шаблонов должны выглядеть следующим образом:

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

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

По сути, он будет включать весь код из одного шаблона внутри секции block content в базовом/индексном файле.

Более подробная информация о наследовании шаблонов

Вернуться на верх