2 czerwca 2019

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.


Podobne wpisy