.. _setup_templates: .. index:: single: Templates single: Django Template Sprache single: APP_DIRS single: Verlinkungen single: URL-Tag single: Twig single: statische Dateien single: base.html Templates ausbauen ************************************* Wir wollen jetzt das bisherige Template ausbauen und ein wenig mehr über die Django-Template-Sprache lernen. Dazu werden wir noch ein Base-Template für das Projekt entwickeln und eine Detailseite für die Kategorie-Informationen erstellen. Wir brauchen dafür natürlich wieder eine URL, eine View und ein Template. Template-Angaben in den Settings ========================================= Wenn wir ein neues Projekt beginnen, setzen wir in der ``settings.py`` Datei des Projekt zwei wichtige Angaben. Templates, die das gesamte Projekt betreffen, zb. das Base-Template, müssen für alle Apps verfügbar sein. Diese Projekt-Templates liegen in einem Ordern, der in den Settings definiert wird. Für diese Angabe steht der Key ``DIRS`` in den Template-Settings zur Verfügung. Wir wollen unsere Projekt-Templates also unter ``event_manager/templates`` speichern. Jede andere Ort wäre aber auch denkbar. App-spezifische Templates, wie die Übersicht der Kategorien, speichern wir auch in der jeweiligen App, zb. ``event_manager/events/templates/events/categories.html``. Damit Django in den Apps nach Templates sucht, muss ``APP_DIRS`` in den ``settings.py`` auf ``True`` gesetzt werden. .. code-block:: python TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / "event_manager" / "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", ], }, }, ] Mehr dazu unter ``_ .. admonition:: Die Template-Hierachie Das ``Base-Template`` (base.html) enthält alle Elemente und Strukturen, die jede Page des Projekts haben soll. Zum Beispiel einen Headbereich mit Navigation, eine Seitenleiste, einen Footer mit Links und so weiter. Ein Basis-Template ist das grundlegende Template, welches dann auf jeder einzelnen Seite einer Website mit spezifischeren Anweisungen erweitert wird. Die Sub-Templates definieren ebenfalls diese Blöcke, diesmal allerdings mit Inhalt gefüllt, und rendern sie in das Base-Template. Das geschieht dadurch, dass das Sub-Template das Basis-Layout erweitert ``(extends)``. Durch geschickte Schachtelung, können tiefe Template-Hierachien geschaffen werden. ein Base-Template für das Projekt ========================================= Unsere projektspezifischen Templates liegen also unter ``event_manager/templates``. Dort legen wir eine neue Datei namens ``base.html`` an. In diese Datei kopieren wir folgenden Inhalt: .. literalinclude:: ../../../src/events/base_html_1.html :language: html+django Es handelt sich um eine einfache HTML-Struktur mit zwei sogenannten ``Tags``. Diese Tags definieren in diesem Fall Blöcke ``(block)``, in die später Content gerendert wird. Es gibt aber noch viele andere Tags und wir können natürlich auch selber eigene Tags definieren. Der LANGUAGE_CODE ist der Code, den wir in der settings.py für die aktuelle Sprache eingetragen hatten. Er wäre an dieser Stelle aktuell noch nicht notwendig, aber wir nutzen ihn trotzdem schon mal. Für diesen Zweck hatten wir ``{% load i18n %}`` ins Template geladen. In den Block ``head`` soll eine Überschrift gerendert werden, in den Block ``content`` wird der Inhalt kommen, also zum Beispiel die Liste der Kategorien. Die Namen **head** und **content** sind übrigens von uns frei gewählt, wir könnten sie auch **kopf** und **inhalt** nennen. Diese ``base.html`` wird nicht direkt aufgerufen, sondern wir werden sie quasi vererben. .. admonition:: Tags und Variablen die Django-Template-Sprache definiert zwei Typen von Anweisungen: ``Tags und Variablen``. Tags bieten Funktionalität während Variablen Platzhalter sind, in die Werte gerendert werden. Beides hatten wir in ``event_manager/events/templates/events/categories.html`` schon gesehen. Tags haben dir Form ``{% TAG %}`` während Variblen durch die doppelten geschweiften Klammern definiert werden ``{{ VARIABLE }}``. Mehr dazu später. Das Base-Template erweitern ========================================= Um das Base-Template zu nutzen, ändern wir ``event_manager/events/templates/events/categories.html`` wie folgt ab: .. code-block:: html+django {% extends 'base.html' %} {% block head%} Übersicht der Kategorien {% endblock %} {% block content %}