64. Django | Šablonai - MantsSk/CA_PTUA14 GitHub Wiki

Šablonai

Django (kaip ir Flask) naudoja Jinja 2 šablonų kūrimo kalbą. Visas django puslapių veikimo mechanizmas atsispindi šiame paveikslėlyje:

Šioje paskaitoje susidėliosime savo modelį į svetainę. Pradėkime nuo index funkcijos perdarymo views.py:

from django.shortcuts import render
from django.http import HttpResponse
from .models import Book, Author, BookInstance, Genre


def index(request):

    # Suskaičiuokime keletą pagrindinių objektų
    book_count = Book.objects.all().count()
    book_instance_count = BookInstance.objects.all().count()

    # Laisvos knygos (tos, kurios turi statusą 'av')
    available_book_instances_available = BookInstance.objects.filter(
        status='av').count()

    # Autorių skaičius
    author_count = Author.objects.all().count()

    context = {
        'book_count': book_count,
        'book_instance_count': book_instance_count,
        'available_book_instances_available': available_book_instances_available,
        'author_count': author_count
    }

    return render(request, 'index.html', context=context)

Trumpus paaiškinimus rasite komentaruose.

Dabar reikia pasirašyti šabloną base.html, kurį naudosime dar daug kartų, jis saugos kiekviename šablone atsikartojančius komponentus, tokius kaip navigacijos skydelis, footer'is ir pan.:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Library</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <ul class="sidebar-nav">
        <li><a href="{% url 'index' %}">Home</a></li>
        </ul>
      </div>
      <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
    </div>
  </div>
</body>
</html>

Kol kas palikime taip, eigoje kažkiek keisime. Atkreipkite dėmesį į 5 eilutę nuo apačios. Joje yra div blokas, kuriame talpinsis visa likusi mūsų aplikacijos logika. Pradėkime nuo index.html:

{% extends "base.html" %}

{% block content %}
  <h1>Library</h1>
  <p>Our stats:</p>
  <ul>
    <li><strong>Books:</strong> {{ book_count }}</li>
    <li><strong>Book copies:</strong> {{ book_instance_count }}</li>
    <li><strong>Book copies available:</strong> {{ available_book_instances_available }}</li>
    <li><strong>Authors:</strong> {{ author_count }}</li>
  </ul>
{% endblock %}

Taip veikia Jinja2 šablonų paveldėjimo mechanizmas.

  • {% extends "base.html" %} - nurodome, kad šį turinį talpinsime į base.html 'apvalkalą'.
  • {% block content %} ir {% endblock %} - rodo, kur bus mūsų 'įterpinio' pradžia ir pabaiga.

Taip pat settings.py reikia nurodyti, kur bus mūsų templates katalogas:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
        },
    },
]

Dar vienas dalykas, kurio reikia nepamiršti - statinių failų susiejimas su programa. Sukurkime /library/static/css/styles.css:

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

/mysite/urls.py perrašykime sekančiai:

from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('library/', include('library.urls')),
    path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Galbūt atkreipėte dėmesį, base.html buvo tokios eilutės:

{% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">

ir dar, settings.py, pati paskutinė eilutė yra STATIC_URL = '/static/'. Pabandykite logiškai susieti šiuos 4 epizodus :)

Taip Django nurodoma, kur ieškoti statinių failų. Galėsite ant Bootstrap ar kito CSS karkaso viršaus darašinėti savo stiliaus korekcijas. Static, apima ne tik CSS, tačiau ir JS skriptus, paveikslėlius. Pastaruosius aptarsime vėlesnėje eigoje.

Šiuo metu mūsų veikiančio puslapio URL adresas yra 127.0.0.1:8000/library. Jeigu neketiname prie to paties projekto rišti daugiau aplikacijų, galime padaryti nukreipimą iš /library į /. Tam dar kartą atsidarysime /mysite/urls.py ir perrašysime taip:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.views.generic import RedirectView

urlpatterns = [
    path('library/', include('library.urls')),
    path('admin/', admin.site.urls),
    path('', RedirectView.as_view(url='library/'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Jinja2 šablonų (html failų) komentavimas:

Deja Jinja2 neatpažįsta įprasto PyCharm komentavimo. Tad jei užkomentavote kodą html įprastu būdu - greičiausiai jis vis vien bus matomas ir gali mesti klaidas. Todėl panaudokite kitą komentavimo būdą.

Trumpam komentarui įdėti:

{# some text #}

Kelioms eilutėms ar kitam kodui užkomentuoti:

{% comment 'comment_name' %}
{% endcomment %}

Užduotis

Tęsti kurti Django užduotį – Autoservisas:

  • Padaryti, kad programa matytų templates ir static katalogus
  • Padaryti nukreipimą iš puslapio "/" į "/autoservice" (redirect)
  • Pridėti pasirenkamą statuso lauką į užsakymų modelį
  • Sukurti puslapį (ne admin), kuriame būtų matoma statistika: paslaugų kiekis, atliktų užsakymų kiekis, automobilių kiekis
  • Susikurti savo puslapio stilių (base.html failą). Jei reikia, pridėkite css ir kitus failus (patartina naudoti bootstrap). Galite panaudoti paskaitoje rodytus pavyzdžius. Panaudokite frontend kurse išmoktas žinias! :)

Atsakymas

⚠️ **GitHub.com Fallback** ⚠️