Wprowadzenie.
W 5 wpisie poświęconym Django omówiłem tworzenie podstawowego szablonu. W zdecydowanej większości przypadków, tworzone przez nas strony, będą składać się z więcej niż jednego szablonu, a kod, który będziemy tam umieszczać, w pewnej części będzie się powtarzał. Przykładem takiego kodu może być pasek menu, który zasadniczno może być zamieszczony w większości szablonów. W celu uniknięcia przepisywania tego samego kodu w każdym szablonie, mamy do dyspozycji, tak zwany mechanizm rozszerzania szablonów, o którym napiszę w tym wpisie.
Zakres artykułu.
- Tworzenie aplikacji Django – Rozszerzenia szablon
Tworzenie aplikacji Django - Rozszerzenia szablon
Do tej pory stworzyliśmy dwa szablony index.html oraz error404.html. Na podstawie tych dwóch plików jesteśmy już w stanie zauważyć, że część kodu się powtarza. Powtarzająca się część kodu to podstawowa struktura pliku html.
Stwórzmy teraz trzeci szablon o nazwie base.html w lokalizacji gdzie znajdują się pozostałe szablony.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> {% block titlepage %} {% endblock %} </title> </head> <body> {% block mybody %} {% endblock %} </body> </html>
Jak możemy zobaczyć we wnętrzu tagu title oraz body pojawiły nam się wstawki Django. Wstawki te to bloki, które zostaną zastąpione innym kodem z innego pliku, jeżeli się do nich odwołamy.
Przejdźmy teraz do naszego szablonu index.html i go zmodyfikujmy w następujący sposób.
{% extends "myFirstApp/base.html" %} {% block titlepage %} My index title {% endblock %} {% block mybody %} <h1> My index page </h1> {% if movies %} <ul> {% for my_movie in movies %} <li>{{ my_movie.title }}</li> {% endfor %} </ul> {% else %} <p>Brak filmów</p> {% endif %} {% endblock %}
W tym miejscu widzimy kolejny nowy element jakim jest wstawka {% extends “ścieżka/do/szablonu/z/kodem/bazowym” %}. Za pomocą tej zmiennej załączamy nasz bazowy szablon. Należy pamiętać, aby wywołanie to znajdowało się na samej górze, ponieważ w pierwszej kolejności musi zostać załadowany szablon podstawowy, a następnie wprowadzane są podmiany kodu w blokach.
Analogicznie zmodyfikujmy plik error404.html.
{% extends "myFirstApp/base.html" %} {% block titlepage %} My 404 Error Page {% endblock %} {% block mybody %} <h1>Strona nie została znaleziona :(</h1> <p>Upewnij się, że wpisałeś poprawnie adres URL</p> <a href="{% url 'index' %}">idź do strony domowej</a> {% endblock %}
Przeładujmy nasz serwer i sprawdźmy, czy zostały wprowadzone zmiany.
Efekt jaki powinnyśmy otrzymać powinien wyglądać następująco.
strona z prawidłowym adresem URL
strona z błędnym adresem URL