Templates Django
W poprzednim wpisie obiecałem, że następny mój tekst wyjaśni, w jaki sposób do prezentacji treści wykorzystać pliki html. Postanowiłem więc uczynić to dziś.
Poprzednio wszystkie treści widoczne dla gościa strony były zapisane w pliku „views.py” co jest cholernie nie wygodne. Teraz nauczymy się przekazywać zmienne do pliku html, gdzie możemy bez problemu załadować css, js do wzbogacenia naszej strony.
Html w Django
Stwórzmy w pierwszym kroku plik „home.html” w katalogu „templates” w głównej części naszej aplikacji (w moim przypadku: company/templates/home.html) i napiszmy w nim tekst:
strona główna
Gdy już to uczynimy, odwołajmy się do pliku html w „views.py”:
return render(request, 'home.html')
Na tym etapie już powinniśmy zobaczyć wywołując odpowiedni adres url naszą stronę zapisaną w pliku html
Layout strony w django
Aby móc skorzystać z statycznych elementów typu „header” oraz „footer” strony, by nie powtarzać ich za każdym razem, możemy oczywiście to uczynić.
Stworzymy teraz layout, nazwałem go u siebie „layout.html”. Zawartość pliku jest następująca:
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="UTF-8"> <title>Tutorial django</title> </head> <body> {% block content %} {% endblock %} </body> </html>
Pojawiły się u nas niezrozumiałe elementy „block content”. Wewnątrz deklaracji tego bloku załadowana zostanie treść która jest wewnątrz pliku zadeklarowanego w „views.py”.
Otwórzmy teraz plik „home.html” i zmieńmy jego zawartość na następującą:
{% extends 'layout.html' %} {% block content %} Strona główna {% endblock %}
Pierwsza linia oznacza, że plik „home.html” chce skorzystać z „layout.html”.
Trzecia linia oznacza rozpoczęcie bloku głównej treści, ostatnia zaś zakończenie tego bloku.
Plik „home.html” mamy już odpowiednio podzielony na „sekcje”, ale co z „layout.html” ?
W pliku „layout.html” do bloku „content” załadowana będzie zawartość jaką wpisaliśmy wewnątrz „content” w pliku „home.html”. W ten sposób dwa pliki html zostaną razem połączone w celu prezentacji ich zawartości w przeglądarce. Sugeruję to przećwiczyć ponieważ może się to wydawać w teorii dość zawiłe, ale zapewniam że tak nie jest.
Dzięki „extends” jesteśmy w stanie wykorzystać dowolny layout w pliku html.
Nie jesteśmy zmuszeni aby korzystać z dokładnie wyznaczonych struktur katalogów w których umieszczamy pliki html.
Możemy zmienić miejsce ich przechowywania. Aby tego dokonać, należy edytować listę „TEMPLATES > DIRS” wewnątrz pliku „settings.py”
Statyczne pliki css w django
Załadujmy statyczne pliki css aby umilić prezentację treści.
Stwórzmy nowy katalog „static” na tym samym poziomie gdzie stworzyliśmy „templates”. Wewnątrz katalogu „static” stwórzmy kolejny o nazwie „css” a w nim plik „base.css”.
Załadowanie plików css w naszym „layout.html” odbywa się w sposób następujący:
{% load static %} <link rel="stylesheet" href="{% static 'css/base.css' %}">
Mój plik layout.html po załadowaniu dodatkowo kilku bibliotek z zewnętrznych adresów wygląda tak:
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Tutorial django</title> <!-- bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet"> {% load static %} <link rel="stylesheet" href="{% static 'css/base.css' %}"> </head> <body> {% block content %} {% endblock %} <!-- javascript for bootstrap --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
Sposób jaki opisałem do ładowania pliku „base.css” można przełożyć na pliki javascript, również pliki graficzne itp.
Instalacja Bootstrap4 w Django
Boostrap jest już u nas zainstalowany, bo przecież podaliśmy adresy bibliotek. Należy się jednak opisanie alternatywnej metody. Wykorzystamy aplikację django-bootstrap.
Instalacja odbywa się w naszym terminalu, wydajmy w nim więc polecenie:
pip install django-bootstrap4
Do listy „INSTALLED_APPS” w pliku „settings.py” dopisujemy: „bootstrap4”.
W naszym layoucie możemy teraz dokonać kilku zmian. Dopisujemy na początku linię:
{% load bootstrap4 %}
Następnie, ładowanie styli bootstrapa odbywa się za pomocą poniższej linii:
{% bootstrap_css %}
Ładowanie bibliotek javascript:
{% bootstrap_javascript jquery='full' %}
Mój cały layout wygląda następująco:
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Tutorial django</title> <!-- bootstrap --> {% load bootstrap4 %} {% bootstrap_css %} <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet"> {% load static %} <link rel="stylesheet" href="{% static 'css/base.css' %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="{% static 'img/logo.png' %}" /> TUTORIAL </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> {% block content %} {% endblock %} <!-- javascript for bootstrap --> {% bootstrap_javascript jquery='full' %} </body> </html>
Na koniec wpisu polecam dokumentację dotyczącą samego projektu django-bootstrap: https://django-bootstrap4.readthedocs.io/en/latest/index.html
Teraz już możesz tworzyć strony internetowe oparte o Django, ale zdaję sobie sprawę że to promil możliwości frameworka, więc nie przestajemy i jedziemy dalej z tematem.