Basis-Template Erste Schritte

Das Base-Template bietet eine vollständige Seitenstruktur mit Navigationsleiste, Seitenleisten, Inhaltsbereich und Fußzeile. Sie übernimmt das Laden von JavaScript, die Anpassung des Designs, SEO-Meta-Tags und die Konfiguration des Favicons.

Verwendung

Erweitere die Basisvorlage, um die Seitenstruktur von Insight UI zu nutzen:

{% extends "insight_ui/base.html" %}

<body>

Der Body enthält alle sichtbaren Seitenelemente, welche in Blöcken angeordnet sind:

  • background_image - Fester Hintergrund hinter allen Inhalten
  • navbar - Navigationsleiste am Beginn der Seite
  • drawers - Überlagernde Seitenleisten (außerhalb des Hauptlayouts)
  • sidebar_left / sidebar_right - Statische Sidebars
  • heading - Seitenkopfzeile mit Titel
  • content - Hauptinhaltsbereich
  • footer - Seitenfuß
  • extra_scripts - Zusätzliches JavaScript

{% block background_image %}

Ein feststehendes Hintergrundbild, welches beim Scrollen an Ort und Stelle bleibt, hinzufügen:

{% block background_image %} <img src="{% static 'img/background.png' %}" alt="" class="-z-10 object-cover fixed top-0 left-0 w-full h-dvh opacity-20"> {% endblock background_image %}

{% block navbar %}

Die Navigationsleiste wird oben auf jeder Seite angezeigt:

{% load insight_tags %} {% block navbar %} {% navbar config=nav_config %} {% endblock navbar %}

Konfigurationsoptionen können unter Navbar-Komponente gefunden werden.

navbar_fixed

Controls whether the navbar sticks to the top of the viewport. Set in settings.py:

INSIGHT_UI = { "navbar_fixed": True, # Standard }

Wenn diese Option aktiviert ist, passen statische Seitenleisten ihre Position automatisch so an, dass sie unterhalb der Navigationsleiste beginnen. Ausklappmenüs (Drawer) sind davon nicht betroffen, da sie den gesamten Bildschirm überlagern.

{% block sidebar_left %} / {% block sidebar_right %}

Seitenleisten für die Navigation oder ergänzende Inhalte. Die Seite wird automatisch anhand des Blockkontexts erkannt:

{% load layout_tags %} {% block sidebar_left %} {% sidebar %} {% include "components/sidebar_nav.html" with sidebar_data=nav_data %} {% endsidebar %} {% endblock sidebar_left %}

Parameter

  • width - Breite der Sidebar.
    • "narrow" - 224px
    • "normal" - 288px (Standard)
    • "wide" - 384px
  • static - Verhalten der Sidebar
    • True - Feste Seitenleiste neben dem Inhalt (Standard)
    • False - Drawer, welcher über dem Inhalt eingeschoben wird
  • mobile_behavior - Verhalten auf kleinen Bildschirmen (gilt nur für statische Seitenleisten)
    • "hidden" - Auf Mobilgeräten ausgeblendet (Standard)
    • "drawer" - Es erscheint eine Umschaltfläche, die Seitenleiste öffnet sich als Drawer

Drawer Beispiel

Eine überlagernde Seitenleiste, welche von der Seite hereingeschoben wird, anzeigen:

{% block sidebar_left %} {% sidebar static=False %} {% include "components/sidebar_nav.html" with sidebar_data=nav_data %} {% endsidebar %} {% endblock sidebar_left %}

{% block heading %}

Eine Seitenüberschrift mit Titel und optionaler Beschreibung anzeigen:

{% load insight_tags %} {% block heading %} {% page_header title="My Page" description="A brief description." %} {% endblock heading %}

{% block content %}

Der Hauptinhaltsbereich der Webseite. Dieser Block wird so erweitert, dass er den verfügbaren Platz ausfüllt, wobei die Fußzeile am unteren Rand verbleibt.

{% block content %} <div class="prose"> <h1>Welcome</h1> <p>Your content here.</p> </div> {% endblock content %}

use_default_loading_indicator

Der Inhaltsblock enthält einen standardmäßigen HTMX-Ladeindikator, der während der Abfragen angezeigt wird. Dieser kann deaktiviert werden, für den Fall, dass eine Komponente einen eigenen Ladeindikatoren besitzt (z. B. Paginierung, Tabellen):

def my_view(request): context = get_base_context() context["use_default_loading_indicator"] = False return render(request, "my_template.html", context)

{% block extra_scripts %}

Load additional JavaScript at the end of the page:

{% block extra_scripts %} <script src="{% static 'js/my-script.js' %}"></script> {% endblock extra_scripts %}