Samouczek: udostępnianie plików statycznych i używanie dziedziczenia szablonu w programie Django w programie Visual Studio

W tym artykule przedstawiono krok 3 z serii samouczków Praca z platformą internetową Django w programie Visual Studio.

Poprzedni krok w tej serii samouczków tworzy minimalną aplikację Django z jedną stroną samodzielnego kodu HTML. Nowoczesne aplikacje internetowe zwykle składają się z wielu stron i używają udostępnionych zasobów, takich jak pliki CSS i JavaScript, aby zapewnić spójne style i zachowanie. W kroku 3 pracujesz z szablonami elementów programu Visual Studio, aby dodać zawartość do projektu Django i rozszerzyć możliwości aplikacji.

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

Używanie szablonów elementów programu Visual Studio do szybkiego dodawania nowych plików za pomocą kodu standardowego
Obsługa plików statycznych z kodu Django
Dodawanie kolejnych stron do aplikacji Django
Używanie dziedziczenia szablonu do tworzenia nagłówka i nawigacji między stronami

Warunki wstępne

Rozwiązanie programu Visual Studio i projekty aplikacji Django utworzone w Krok 1: Tworzenie projektu Django i aktualizowanie w Krok 2: Tworzenie aplikacji Django z widokami i szablonami stron tej serii samouczków.
Zapoznaj się z sekcją Wymagania wstępne w kroku 1 tej serii samouczków, aby uzyskać szczegółowe informacje na temat wersji szablonów Django, projektów programu Visual Studio i projektów Django oraz programowania w języku Python na komputerach Mac.

Eksplorowanie szablonów elementów w programie Visual Studio

Podczas tworzenia aplikacji Django zwykle dodajesz wiele innych plików Python, HTML, CSS i JavaScript. Dla każdego typu pliku (i innych plików, takich jak web.config, które mogą być potrzebne do wdrożenia), program Visual Studio udostępnia wygodne szablony elementów , aby rozpocząć pracę. Za pomocą tych szablonów można szybko dodawać nowe pliki różnych typów wraz z szablonowym kodem.

Aby wyświetlić dostępne szablony, przejdź do Eksplorator rozwiązań w programie Visual Studio i otwórz strukturę projektu.
Kliknij prawym przyciskiem myszy folder, w którym chcesz utworzyć nowy plik, a następnie wybierz pozycję Dodaj>nowy element. Otwiera się okno dialogowe Dodawanie nowego elementu:
Aby użyć szablonu, wybierz żądany szablon, wprowadź nazwę pliku i wybierz Dodaj.

Program Visual Studio dodaje plik do bieżącego projektu i oznacza zmiany kontroli źródła.

Omówienie sposobu identyfikowania szablonów elementów w programie Visual Studio

Plik projektu programu Visual Studio (.pyproj) zawiera identyfikator typu projektu, który oznacza plik jako projekt w języku Python. Program Visual Studio używa tego identyfikatora typu do rozpoznawania i wyświetlania tylko tych szablonów elementów, które są odpowiednie dla typu projektu. Program Visual Studio stosuje to podejście do dostarczania rozbudowanego zestawu szablonów elementów dla wielu typów projektów bez konieczności ich sortowania za każdym razem.

Obsługa plików statycznych z aplikacji

W aplikacji internetowej utworzonej przy użyciu języka Python (przy użyciu dowolnej struktury) pliki języka Python są zawsze uruchamiane na serwerze hosta internetowego i nigdy nie są przesyłane na komputer użytkownika. Inne pliki, takie jak CSS i JavaScript, są używane tylko przez przeglądarkę, więc serwer hosta po prostu dostarcza je as-is po żądaniu. Te typy plików są określane jako pliki statyczne, a 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. To zachowanie jest możliwe za pomocą następującego kodu 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 można organizować w folderze statycznym aplikacji przy użyciu dowolnej struktury folderów i używać ścieżek względnych w folderze statycznych, aby odwoływać się do plików.

Używanie statycznego pliku CSS w szablonie HTML

Wykonaj następujące kroki, aby dodać plik CSS do aplikacji, a następnie użyj arkusza stylów CSS w szablonie index.html:

W Eksploratorze rozwiązań , kliknij prawym przyciskiem myszy na folderze HelloDjangoApp w projekcie, wybierz opcję Dodaj>Nowy folderi nazwij folder static.
Kliknij prawym przyciskiem myszy statyczny folder i wybierz pozycję Dodaj>Nowy Element.
W oknie dialogowym Dodawanie nowego elementu wybierz szablon arkusz stylów, nadaj plikowi nazwę site.cs, a następnie wybierz Dodaj.

Program Visual Studio dodaje plik site.css do projektu i otwiera plik w edytorze. Oto przykład zaktualizowanej struktury projektu Django:
Zastąp zawartość pliku site.css następującymi stylami:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Zastąp zawartość pliku HelloDjangoApp/templates/index.html następującym znacznikiem:
```
<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>
```
Ten kod zastępuje element <strong> HTML z kroku 2 w serii samouczków elementem <span> odwołującym się do klasy stylu message. Użycie klasy stylu w ten sposób zapewnia większą elastyczność w stylizowaniu elementów HTML.
Zapisz zmiany projektu, wybierając pozycję Plik>Zapisz wszystko lub używając skrótu klawiaturowego Ctrl+Shift+S. (Ten krok nie jest konieczny, ponieważ podczas opracowywania projektu program Visual Studio automatycznie zapisuje pliki).
Uruchom projekt i obserwuj wyniki. Po zakończeniu zatrzymaj aplikację.
(Opcjonalnie) Możesz zatwierdzić zmiany kontroli źródła i zaktualizować repozytorium zdalne. Aby uzyskać więcej informacji, zobacz Zatwierdzanie zmian w systemie kontroli wersji w kroku 2 tej serii poradników.

Użyj tagu {% ładowanie statyczne %}

Instrukcja {% load static %} musi znajdować się w pliku index.html, zanim względne odwołania względem witryny do plików statycznych w elementach HTML, takich jak <head> i <body>. W przykładzie przedstawionym w tej sekcji "pliki statyczne" odwołują się do niestandardowego zestawu tagów szablonu Django. Zestaw tagów umożliwia używanie składni {% static %} do odwoływania się do plików statycznych. Bez tagu {% load static %} zobaczysz wyjątek podczas uruchamiania aplikacji.

Dodaj odwołania bez tagu {% ładowanie statyczne %}

Można również skonfigurować odwołania względne witryny do plików statycznych w znaczniku HTML bez użycia tagu {% load static %}. W takim przypadku należy określić lokalizację folderu statycznego w hierarchii folderów projektu Django:

<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>

Organizowanie plików statycznych i folderów

Możesz dodać inne pliki CSS, JavaScript i HTML w folderze statycznym zgodnie z potrzebami projektu. Typowym sposobem organizowania plików statycznych jest utworzenie podfolderów o nazwie czcionek, skryptów i zawartości (w przypadku arkuszy stylów i innych plików). W każdym przypadku pamiętaj, aby uwzględnić foldery w ścieżce pliku względnego w odwołaniach {% static %}.

Dodawanie strony do aplikacji Django

Dodanie kolejnej strony do aplikacji Django obejmuje następujące zadania:

Dodawanie funkcji języka Python definiującej widok
Dodawanie szablonu dla znaczników HTML strony
Aktualizowanie tras adresów URL w pliku urls.py projektu Django

Wykonaj następujące kroki, aby dodać stronę Informacje (/about) do projektu HelloDjangoApp i linki do tej strony ze strony głównej:

W Eksploratorze Rozwiązań kliknij prawym przyciskiem myszy folder templates/HelloDjangoApp w swoim projekcie, a następnie wybierz Dodaj>Nowy element.

Napiwek

Jeśli nie widzisz polecenia Nowy element w menu Dodaj, upewnij się, że zatrzymasz aplikację Django, aby program Visual Studio, w razie potrzeby, opuścił tryb debugowania.
W oknie dialogowym Dodawanie nowego elementu wybierz szablon strony HTML, nadaj plikowi nazwę about.html, a następnie wybierz pozycję Dodaj.

Zastąp zawartość pliku about.html następującym znacznikiem HTML:

<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>

W kolejnym kroku zastąpisz jawne łącze do strony głównej paskiem nawigacyjnym.

W pliku HelloDjangoApp/views.py dodaj funkcję o nazwie about używającą szablonu:

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

W pliku BasicProject/urls.py projektu Django dodaj ścieżkę strony about jako ostatni element w tablicy urlPatterns:

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

W pliku templates/HelloDjangoApp/index.html dodaj następujący znacznik jako pierwszą instrukcję w elemencie <body>:
```
<div><a href="about">About</a></div>
```
Ten znacznik dodaje odnośnik do strony /about dla aplikacji Django. W późniejszym kroku zastąp ten link paskiem nawigacyjnym.
Zapisz zmiany projektu i ponownie uruchom projekt. Przejdź do strony /about i sprawdź nawigację między różnymi stronami aplikacji.
Po zakończeniu zatrzymaj aplikację.

Kierowanie do strony "index"

Jeśli spróbujesz przejść do strony /index dla uruchomionej aplikacji, zostanie wyświetlony błąd Nie znaleziono strony (404).

Mimo że plik HelloDjangoApp/views.py ma funkcję o nazwie index, wzorce routingu adresów URL w pliku BasicProject/urls.py projektu Django nie zawierają wyrażenia regularnego zgodnego z ciągiem index. Bieżące wyrażenie dla strony "index" aplikacji jest ^$. Aby dopasować ciąg index, należy dodać kolejny wpis adresu URL dla wzorca ^index$.

W następnej sekcji opisano, jak lepiej użyć tagu {% url '<pattern_name>' %} w szablonie strony, aby odwołać się do nazwy wzorca. W takim przypadku Django tworzy odpowiedni adres URL. Na przykład można zastąpić znaczniki <div><a href="home">Home</a></div> w szablonach /HelloDjangoApp/ plikuabout.html znacznikiem <div><a href="{% url 'index' %}">Home</a></div>. Użycie ciągu 'index' działa teraz, ponieważ pierwszy wzorzec adresu URL w pliku urls.py nosi nazwę 'index'. Możesz również użyć 'home', aby odwołać się do drugiego wzorca.

Używanie dziedziczenia szablonu dla nagłówka i nawigacji

Zamiast jawnych linków nawigacji na każdej stronie wiele aplikacji internetowych ma nagłówek marki i pasek nawigacyjny, który udostępnia najważniejsze linki stron, menu podręczne itd. Aby zapewnić spójność w aplikacji, nagłówek i pasek nawigacyjny powinny być takie same na wszystkich stronach, ale nie trzeba powtarzać tego samego kodu w każdym szablonie strony. Wspólne części wszystkich stron można zdefiniować w jednym pliku.

System tworzenia szablonów Django zapewnia dwa sposoby ponownego użycia określonych elementów w wielu szablonach:

"Zawiera" - to inne szablony stron, które wstawiasz w określonym miejscu w szablonie odwołującym się, ze składnią {% include <template_path> %}. Możesz również użyć zmiennej, jeśli chcesz dynamicznie zmienić ścieżkę w kodzie. Wstawki są zazwyczaj używane w treści strony w celu wczytania wspólnego szablonu w określonym miejscu na stronie.
dziedziczenie używa składni {% extends <template_path> %} na początku szablonu strony, aby określić udostępniony szablon podstawowy, na podstawie którego opiera się odwołujący się szablon. Dziedziczenie jest często używane do definiowania wspólnego układu, paska nawigacji i innych struktur dla stron aplikacji. Takie podejście wymaga odniesienia się do szablonów w celu dodania lub zmodyfikowania tylko określonych obszarów w szablonie podstawowym, zwanych blokami .

W przypadku obu podejść wartość <template_path> odnosi się do folderu szablonów aplikacji (dozwolone są również../ lub ./).

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, zawartość bloku w szablonie odwołującym zastępuje pasujący blok w szablonie podstawowym.

W poniższych krokach przedstawiono dziedziczenie szablonu:

W eksploratorze rozwiązań kliknij prawym przyciskiem myszy szablony /Folder HelloDjangoApp, a następnie utwórz nowy plik na podstawie szablonu strony HTML o nazwie layout.html.

Zastąp zawartość pliku layout.html następującym znacznikiem HTML:

<!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; 2024</p>
      </footer>
   </div>
</body>
</html>

Ten szablon zawiera blok o nazwie content, który identyfikuje całą zawartość, którą muszą zastąpić strony odwołujące się.

W pliku HelloDjangoApp/static/site.css dodaj następujące style na końcu pliku:

.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;
}

Te definicje stylów generują interesujący wynik dla tego ćwiczenia. Ten przewodnik nie pokazuje dynamicznego projektu.

Zastąp zawartość pliku templates/HelloDjangoApp/index.html następującym kodem:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Szablon index odwołuje się teraz do szablonu podstawowego i zastępuje blok content. Można zauważyć, że dzięki użyciu dziedziczenia ten szablon został uproszczony.
Zastąp zawartość pliku templates/HelloDjangoApp/about.html następującym kodem, dlatego szablon about odnosi się również do szablonu podstawowego i zastępuje blok content:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Ponownie uruchom aplikację i obserwuj wyniki. Użyj linków paska nawigacyjnego, aby przełączać się między stronami aplikacji.
Po zakończeniu zatrzymaj aplikację i zapisz zmiany projektu.
Ponieważ wprowadzono istotne zmiany w aplikacji, dobrym momentem jest zapisanie zmian w repozytorium Git. Aby uzyskać więcej informacji, zobacz Zatwierdzanie zmian w systemie kontroli wersji w kroku 2 tej serii poradników.

Następny krok

Krok 4. Używanie pełnego szablonu projektu internetowego Django

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-08-08