Krok 3. Udostępnianie plików statycznych, dodawanie stron i używanie dziedziczenia szablonu z aplikacją Django

Artykuł
08/25/2023

Poprzedni krok: Tworzenie aplikacji Django z widokami i szablonami stron

W poprzednich krokach samouczka przedstawiono sposób tworzenia minimalnej aplikacji Django przy użyciu pojedynczej strony HTML. Nowoczesne aplikacje internetowe zawierają jednak wiele stron. Nowoczesne strony internetowe używają udostępnionych zasobów, takich jak pliki CSS i JavaScript, aby zapewnić spójne style i zachowanie.

W tym kroku dowiesz się, jak wykonywać następujące czynności:

Używanie szablonów elementów programu Visual Studio do szybkiego dodawania nowych plików różnych typów z wygodnym kodem standardowy (krok 3–1)
Konfigurowanie projektu Django w celu obsługi plików statycznych (krok 3–2)
Dodawanie dodatkowych stron do aplikacji (krok 3–3)
Użyj dziedziczenia szablonu, aby utworzyć nagłówek i pasek nawigacyjny używany na stronach (krok 3–4)

Krok 3–1. Zapoznanie się z szablonami elementów

Podczas tworzenia aplikacji Django zwykle dodaje się wiele plików Python, HTML, CSS i JavaScript. Dla każdego typu pliku (pliki, takie jak web.config , które mogą być potrzebne do wdrożenia), program Visual Studio udostępnia wygodne szablony elementów, aby rozpocząć pracę.

Aby wyświetlić dostępne szablony, przejdź do Eksplorator rozwiązań, kliknij prawym przyciskiem myszy folder, w którym chcesz utworzyć element, a następnie wybierz polecenie Dodaj>nowy element.

Add new item dialog in Visual Studio.

Aby użyć szablonu, wybierz żądany szablon, określ nazwę pliku, a następnie wybierz pozycję Dodaj. Dodanie elementu w ten sposób automatycznie dodaje plik do projektu programu Visual Studio i oznacza zmiany kontroli źródła.

Pytanie: Jak program Visual Studio wie, które szablony elementów mają być oferowane?

Odpowiedź: Plik projektu programu Visual Studio (pyproj) zawiera identyfikator typu projektu, który oznacza go jako projekt w języku Python. Program Visual Studio używa identyfikatora typu do wyświetlania tylko szablonów elementów odpowiednich dla typu projektu. Dzięki temu program Visual Studio może dostarczać bogaty zestaw szablonów elementów dla wielu typów projektów bez konieczności ich sortowania za każdym razem.

Krok 3–2. Obsługa plików statycznych z aplikacji

W aplikacji internetowej utworzonej przy użyciu języka Python (przy użyciu dowolnej platformy) pliki języka Python są zawsze uruchamiane na serwerze hosta internetowego. Pliki języka Python nigdy nie są również przesyłane na komputer użytkownika. Inne pliki, takie jak CSS i JavaScript, są jednak używane wyłącznie przez przeglądarkę. Dlatego serwer hosta po prostu dostarcza je zgodnie z żądaniem. Takie pliki są określane jako "statyczne" pliki, a usługa Django może dostarczać je automatycznie bez konieczności pisania kodu.

Projekt Django jest domyślnie skonfigurowany do obsługi plików statycznych z folderu statycznego aplikacji, dzięki wierszom w pliku settings.py projektu Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Pliki w formacie statycznym można organizować przy użyciu dowolnej struktury folderów, a następnie użyć ścieżek względnych w tym folderze w celu odwoływania się do plików. Aby zademonstrować ten proces, wykonaj poniższe kroki, aby dodać plik CSS do aplikacji, a następnie użyj tego arkusza stylów w szablonie index.html :

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder HelloDjangoApp w projekcie programu Visual Studio, wybierz polecenie Dodaj>nowy folder i nadaj folderowi staticnazwę .
Kliknij prawym przyciskiem myszy folder statyczny i wybierz polecenie Dodaj>nowy element. W wyświetlonym oknie dialogowym wybierz szablon Arkusza stylów , nadaj plikowi site.cssnazwę , a następnie wybierz pozycję Dodaj.

Plik site.css zostanie wyświetlony w projekcie i zostanie otwarty w edytorze. Struktura folderów powinna wyglądać podobnie do poniższej ilustracji:
Zastąp zawartość pliku site.css następującym kodem i zapisz plik:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Zastąp zawartość pliku templates/HelloDjangoApp/index.html aplikacji następującym kodem. Kod zastępuje <strong> element użyty w kroku 2 elementem <span> , który odwołuje się do message klasy stylu. Użycie klasy stylu zapewnia większą elastyczność w stylizowanie elementu. (Jeśli plik index.html nie został przeniesiony do podfolderu w szablonach podczas korzystania z programu VS 2017 15.7 lub starszego, zapoznaj się z nazwami szablonów w kroku 2–4).
```
<html>
    <head>
        <title>{{ title }}</title>
        {% load static %} 
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>
```
Uruchom projekt, aby obserwować wyniki. Gdy skończysz, zatrzymaj serwer i zatwierdź zmiany kontroli źródła, jeśli chcesz (jak wyjaśniono w kroku 2).

Pytanie: Jaki jest cel tagu statycznego %} ładowania {%?

Odpowiedź: Wiersz {% load static %} jest wymagany przed odwoływania się do plików statycznych w elementach takich jak <head> i <body>. W przykładzie przedstawionym w tej sekcji "pliki statyczne" odnoszą się do niestandardowego zestawu tagów szablonu Django, który umożliwia używanie {% static %} składni do odwoływania się do plików statycznych. Bez {% load static %}elementu zobaczysz wyjątek podczas uruchamiania aplikacji.

Pytanie: Czy istnieją konwencje organizowania plików statycznych?

Odpowiedź: Możesz dodać inne pliki CSS, JavaScript i HTML w folderze statycznym w odpowiedni sposób. Typowym sposobem organizowania plików statycznych jest utworzenie podfolderów o nazwach czcionek, skryptów i zawartości (dla arkuszy stylów i innych plików). W każdym przypadku należy pamiętać o dołączeniu tych folderów do względnej ścieżki pliku w {% static %} odwołaniach.

Pytanie: Czy mogę wykonać to samo zadanie bez użycia tagu statycznego %} ładowania {%?

Odpowiedź: Tak, możesz.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Krok 3–3. Dodawanie strony do aplikacji

Dodanie kolejnej strony do aplikacji spowoduje:

Dodaj funkcję języka Python, która definiuje widok.
Dodaj szablon znaczników strony.
Dodaj niezbędny routing do pliku urls.py projektu Django.

Poniższe kroki dodają stronę "Informacje" do projektu "HelloDjangoApp" i linki do strony ze strony głównej:

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder templates/HelloDjangoApp. Wybierz pozycję Dodaj>nowy element i wybierz szablon elementu strony HTML. Nadaj plikowi about.html nazwę i wybierz pozycję Dodaj.

Napiwek

Jeśli polecenie Nowy element nie jest wyświetlane w menu Dodaj , upewnij się, że serwer został zatrzymany, aby program Visual Studio zakończył tryb debugowania.

Zastąp zawartość pliku about.html poniższym znacznikiem (zastąp jawny link do strony głównej prostym paskiem nawigacyjnym w kroku 3–4):

<html>
    <head>
        <title>{{ title }}</title>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Otwórz plik views.py aplikacji i dodaj funkcję o nazwie about , która używa szablonu:

def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

Otwórz plik urls.py projektu Django i dodaj następujący wiersz do tablicyurlPatterns:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
Otwórz plik templates/HelloDjangoApp/index.html i dodaj następujący wiersz poniżej <body> elementu, aby połączyć się ze stroną Informacje (ponownie zastąpisz ten link paskiem nawigacyjnym w kroku 3–4):
```
<div><a href="about">About</a></div>
```
Zapisz wszystkie pliki za pomocą polecenia menu Zapisz wszystko lub>naciśnij klawisze Ctrl+Shift+S. (Technicznie ten krok nie jest potrzebny, ponieważ uruchomienie projektu w programie Visual Studio automatycznie zapisuje pliki. Niemniej jednak, to dobre polecenie, aby wiedzieć o.)
Uruchom projekt, aby obserwować wyniki i sprawdzać nawigację między stronami. Po zakończeniu zamknij serwer.

Pytanie: Próbowałem użyć "indeksu" linku do strony głównej, ale nie zadziałało. Dlaczego?

Odpowiedź: Mimo że funkcja view w pliku views.py nosi nazwę index, wzorce routingu adresów URL w pliku urls.py projektu Django nie zawierają wyrażenia regularnego zgodnego z ciągiem "index". Aby dopasować ciąg, należy dodać kolejny wpis dla wzorca ^index$.

Jak pokazano w następnej sekcji, lepiej użyć tagu {% url '<pattern_name>' %} w szablonie strony, aby odwoływać się do nazwy wzorca. W takim przypadku Django tworzy odpowiedni adres URL. Na przykład zastąp ciąg <div><a href="home">Home</a></div> about.html ciągiem <div><a href="{% url 'index' %}">Home</a></div>. Użycie "indeksu" działa tutaj, ponieważ pierwszy wzorzec adresu URL w urls.py jest w rzeczywistości o nazwie "index" (na podstawie argumentu name='index' ). Możesz również użyć "home", aby odwołać się do drugiego wzorca.

Krok 3–4. Tworzenie nagłówka i paska nawigacyjnego przy użyciu dziedziczenia szablonu

Zamiast jawnych linków nawigacji na każdej stronie nowoczesne aplikacje internetowe używają nagłówka znakowania i paska nawigacyjnego. Pasek nawigacyjny zawiera najważniejsze linki stron, menu podręczne itd. Aby upewnić się, że nagłówek i pasek nawigacyjny są takie same na wszystkich stronach, nie powtarzaj tego samego kodu w każdym szablonie strony. Zamiast tego chcesz zdefiniować wspólne części wszystkich stron w jednym miejscu.

System szablonów Django zapewnia dwa sposoby ponownego instalowania określonych elementów w wielu szablonach: dołączania i dziedziczenia.

Zawiera to inne szablony stron wstawione w określonym miejscu w szablonie odwołującego się przy użyciu składni {% include <template_path> %}. Jeśli chcesz dynamicznie zmienić ścieżkę w kodzie, możesz również użyć zmiennej. Dołączanie jest używane w treści strony w celu ściągnięcia udostępnionego szablonu w określonej lokalizacji na stronie.
Dziedziczenie używa {% extends <template_path> %} szablonu strony na początku szablonu strony, aby określić udostępniony szablon podstawowy, na który następnie opiera się szablon odwołujący się. Dziedziczenie jest często używane do definiowania układu udostępnionego, paska nawigacyjnego i innych struktur dla stron aplikacji, tak aby odwołujące się szablony mogły dodawać lub modyfikować tylko określone obszary szablonu podstawowego o nazwie bloki.

W obu przypadkach <template_path> parametr jest względny względem folderu szablonów aplikacji (../ lub ./ jest również dozwolony).

Szablon podstawowy delineuje bloki przy użyciu tagów {% block <block_name> %} i .{% endblock %} Jeśli szablon odwołującego się używa tagów o tej samej nazwie bloku, jego zawartość blokowa zastępuje ten szablon podstawowy.

W poniższych krokach przedstawiono dziedziczenie:

W folderze templates/HelloDjangoApp aplikacji utwórz nowy plik HTML. Kliknij prawym przyciskiem myszy folder templates/HelloDjangoApp, wybierz pozycję Dodaj>nowy element, a następnie wybierz szablon elementu strony HTML. Nadaj plikowi layout.html nazwę i wybierz pozycję Dodaj.

Zastąp zawartość pliku layout.html poniższym znacznikiem. Widać, że ten szablon zawiera blok o nazwie "content", który jest wszystkimi stronami odwołującymi się, które muszą zastąpić:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

Dodaj następujące style do pliku static/site.css aplikacji (ten przewodnik nie próbuje zademonstrować dynamicznego projektowania tutaj; te style po prostu generują interesujący wynik):

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Zmodyfikuj plik templates/HelloDjangoApp/index.html, aby odwoływać się do szablonu podstawowego i udostępnić go na stronie. Dodaj następujący wiersz jako wiersz 1 na stronie HTML (powyżej tagu HTML):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Widać, że przy użyciu dziedziczenia ten szablon staje się prosty do zaimplementowania w tagu treści w celu zastąpienia bloku zawartości:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Zmodyfikuj plik templates/HelloDjangoApp/about.html w taki sam sposób, aby udostępnić szablon układu. Dodaj ten sam wiersz z kroku 1 na stronie HTML (powyżej tagu HTML):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Następnie za pomocą dziedziczenia zaimplementuj szablon w tagu treści, aby zastąpić blok zawartości:
```
{% block content %}
{{ content }}
{% endblock %}
```
Uruchom serwer, aby obserwować wyniki. Po zakończeniu zamknij serwer.
Ze względu na to, że wprowadzono istotne zmiany w aplikacji, warto ponownie zatwierdzić zmiany kontroli źródła.

Następne kroki

Korzystanie z pełnego szablonu projektu internetowego Django

Głębiej

Pisanie pierwszej aplikacji Django, część 3 (widoki) (docs.djangoproject.com)
Aby uzyskać więcej możliwości szablonów Django, takich jak przepływ sterowania, zobacz Język szablonu Django (docs.djangoproject.com)
Aby uzyskać szczegółowe informacje na temat korzystania z tagu {% url %} , zobacz adres URL w ramach wbudowanych tagów szablonów i filtrów dla dokumentacji szablonów Django (docs.djangoproject.com)
Samouczek dotyczący kodu źródłowego w witrynie GitHub: Microsoft/python-sample-vs-learning-django

Udostępnij za pośrednictwem