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
