Kurz: Obsluha statických souborů a použití dědičnosti šablon s Django v sadě Visual Studio

Článek
01/26/2025

Tento článek představuje krok 3 v sérii kurzů Práce s webovým rozhraním Django v sadě Visual Studio.

Předchozí krok v této sérii kurzů vytvoří minimální aplikaci Django s jedinou stránkou samostatného HTML. Moderní webové aplikace se obvykle skládají z mnoha stránek a používají sdílené prostředky, jako jsou soubory CSS a JavaScript, k zajištění konzistentního stylu a chování. V kroku 3 pracujete se šablonami položek sady Visual Studio a přidáte obsah do projektu Django a rozbalíte možnosti aplikace.

V kroku 3 kurzu se naučíte:

Použijte položkové šablony Visual Studio k rychlému přidání nových souborů s předdefinovaným kódem
Obsluha statických souborů z kódu Django
Přidání dalších stránek do aplikace Django
Použití dědičnosti šablon k vytvoření záhlaví a navigace napříč stránkami

Požadavky

Řešení sady Visual Studio a projekty aplikací Django vytvořené v kroku 1: Vytvoření projektu Django a aktualizace v kroku 2: Vytvoření aplikace Django se zobrazeními a šablonami stránek této série kurzů.
V části Požadavky v kroku 1 této série kurzů najdete podrobnosti o verzích šablon Django, projektech sady Visual Studio a projektech Django a vývoji v Pythonu na Macu.

Prozkoumejte šablony položek v aplikaci Visual Studio

Při vývoji aplikace Django obvykle přidáváte mnoho dalších souborů Python, HTML, CSS a JavaScript. Pro každý typ souboru (a další soubory, jako jsou web.config, které možná potřebujete k nasazení), poskytuje Visual Studio praktické šablony položek , abyste mohli začít. Tyto šablony můžete použít k rychlému přidání nových souborů různých typů pomocí často používaného kódu.

Pokud chcete zobrazit dostupné šablony, přejděte do Průzkumníka řešení v sadě Visual Studio a otevřete strukturu projektu.
Pravým tlačítkem myši klikněte na složku, ve které chcete vytvořit nový soubor, a vyberte Přidat>Nová položka. Otevře se dialogové okno Přidat novou položku:
Pokud chcete použít šablonu, vyberte požadovanou šablonu, zadejte název souboru a vyberte Přidat.

Visual Studio přidá soubor do aktuálního projektu a označí změny pro správu zdrojového kódu.

Vysvětlení způsobu identifikace šablon položek v sadě Visual Studio

Soubor projektu sady Visual Studio (.pyproj) obsahuje identifikátor typu projektu, který soubor označí jako projekt Pythonu. Visual Studio používá tento identifikátor typu k rozpoznávání a zobrazení pouze šablon položek vhodných pro typ projektu. Visual Studio se řídí tímto přístupem a poskytuje bohatou sadu šablon položek pro mnoho typů projektů bez toho, abyste je museli řadit pokaždé.

Obsluha statických souborů z aplikace

Ve webové aplikaci sestavené pomocí Pythonu (pomocí libovolné architektury) se soubory Pythonu vždy spouštějí na serveru webového hostitele a nikdy se nepřenesou do počítače uživatele. Jiné soubory, jako jsou CSS a JavaScript, se používají jenom v prohlížeči, takže hostitelský server je jednoduše doručí as-is, když jsou požadovány. Tyto typy souborů se označují jako "statické" soubory a Django je dokáže automaticky doručit, aniž byste museli psát jakýkoli kód.

Projekt Django je standardně nastavený tak, aby sloužil statickým souborům ze statické složky aplikace. Toto chování je možné následujícím kódem v souboru 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']))

Soubory v statické složce aplikace můžete uspořádat pomocí libovolné struktury složek, kterou chcete, a použít relativní cesty v rámci statické složky k odkazování na soubory.

Použití statického souboru CSS v šabloně HTML

Pokud chcete do aplikace přidat soubor CSS, použijte šablonu stylů CSS v šabloně index.html:

V Průzkumníka řešeníklikněte pravým tlačítkem na složku HelloDjangoApp projektu, vyberte Přidat>Nová složkaa pojmenujte složku statické.
Klikněte pravým tlačítkem na statickou složku a vyberte Přidat>Nová položka.
V dialogovém okně Přidat novou položku vyberte šablonu šablona stylů, pojmenujte soubor site.csa poté vyberte Přidat.

Visual Studio přidá do projektu soubor site.css a otevře ho v editoru. Tady je příklad aktualizované struktury projektu Django:
Obsah souboru site.css nahraďte následujícími styly:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Nahraďte obsah souboru HelloDjangoApp/templates/index.html následujícím kódem:
```
<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>
```
Tento kód nahradí element <strong> HTML z kroku 2 v sérii kurzů elementem <span>, který odkazuje na třídu stylu message. Použitím třídy stylu tímto způsobem získáte větší flexibilitu při stylování elementu HTML.
Uložte změny projektu tak, že vyberete Soubor>Uložit vše nebo použijete klávesovou zkratku Ctrl+Shift+S. (Tento krok není nutný, protože při vývoji projektu sada Visual Studio ukládá soubory automaticky.)
Spusťte projekt a sledujte výsledky. Až budete hotovi, aplikaci zastavte.
(Volitelné) Změny můžete potvrdit do správy zdrojového kódu a aktualizovat vzdálené úložiště. Další informace najdete v tématu Potvrzení změn ve správě zdrojového kódu v kroku 2 této série kurzů.

Použít značku {% načíst statické %}

Příkaz {% load static %} musí být v souboru index.html přítomen před tím, než budou v elementech HTML, jako jsou <head> a <body>, použity relativní odkazy na statické soubory. V příkladu uvedeném v této části odkazuje "statické soubory" na vlastní sadu značek šablon Django. Sada značek umožňuje použít syntaxi {% static %} k odkazování na statické soubory. Bez značky {% load static %} se při spuštění aplikace zobrazí výjimka.

Přidejte odkazy bez značky {% load static %}

Můžete také nastavit relativní odkazy webu na statické soubory v kódu HTML bez použití značky {% load static %}. V tomto případě zadáte umístění statické složky v hierarchii složek 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>

Uspořádání statických souborů a složek

Do statické složky můžete přidat další soubory CSS, JavaScript a HTML podle potřeb projektu. Typickým způsobem, jak uspořádat statické soubory, je vytvořit podsložky s názvem písma, skriptya obsah (pro šablony stylů a jakékoli jiné soubory). V každém případě nezapomeňte zahrnout složky do relativní cesty k souboru v referencích {% static %}.

Přidání stránky do aplikace Django

Přidání další stránky do aplikace Django zahrnuje následující úlohy:

Přidání funkce Pythonu, která definuje zobrazení
Přidání šablony pro kód HTML stránky
Aktualizace tras URL v souboru urls.py projektu Django

Následujícím postupem přidáte stránku O aplikaci (/about) do projektu HelloDjangoApp a odkazy na danou stránku z domovské stránky:

V Průzkumníku řešeníklikněte pravým tlačítkem na složku templates/HelloDjangoApp ve vašem projektu a vyberte Přidat>Nová položka.

Spropitné

Pokud v nabídce Přidat nevidíte příkaz Nová položka, ujistěte se, že jste zastavili svou aplikaci Django, aby se Visual Studio mohlo podle potřeby přepnout z režimu ladění.
V dialogovém okně Přidat novou položku vyberte šablonu stránky HTML, pojmenujte soubor about.htmla pak vyberte Přidat.

Obsah souboru about.html nahraďte následujícím kódem 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>

V dalším kroku nahradíte explicitní odkaz na domovskou stránku navigačním panelem.

Do souboru HelloDjangoApp/views.py přidejte funkci s názvem about, která používá šablonu:

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

V souboru projektu Django BasicProject/urls.py přidejte cestu ke stránce about jako poslední položku v poli 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')
 ]

Do souboru templates/HelloDjangoApp/index.html přidejte následující kód jako první příkaz v elementu <body>:
```
<div><a href="about">About</a></div>
```
Tento kód přidá odkaz na stránku /about aplikace Django. V pozdějším kroku nahradíte tento odkaz navigačním panelem.
Uložte změny projektu a spusťte projekt znovu. Přejděte na /about stránku a zkontrolujte navigaci mezi různými stránkami aplikace.
Až budete hotovi, aplikaci zastavte.

Trasa na stránku indexu

Pokud se pokusíte přejít na stránku /index spuštěné aplikace, zobrazí se chyba Stránka nebyla nalezena (404).

Přestože soubor HelloDjangoApp/views.py má funkci s názvem index, vzory směrování adresy URL v souboru projektu Django BasicProject/urls.py neobsahují regulární výraz, který odpovídá řetězci index. Aktuální výraz pro indexovou stránku aplikace je ^$. Chcete-li shodovat řetězec index, je nutné přidat další položku adresy URL pro vzor ^index$.

Další část popisuje, jak je lepší použít značku {% url '<pattern_name>' %} v šabloně stránky k odkazování na název vzoru. V tomto případě Django vytvoří správnou adresu URL. Například můžete nahradit označení <div><a href="home">Home</a></div> ve šablonách/HelloDjangoApp/about.html souboru označením <div><a href="{% url 'index' %}">Home</a></div>. Použití řetězce 'index' teď funguje, protože první vzor adresy URL v souboru urls.py má název 'index'. Můžete také použít 'home' pro odkaz na druhý vzor.

Použijte dědičnost šablon pro záhlaví a navigaci

Místo explicitních navigačních odkazů na každé stránce mají mnohé webové aplikace hlavičku s brandem a navigační panel, který poskytuje nejdůležitější odkazy na stránky, vyskakovací nabídky atd. Pokud chcete zajistit konzistenci v aplikaci, záhlaví a navigační panel by měly být stejné na všech stránkách, ale v každé šabloně stránky nemusíte opakovat stejný kód. Společné části všech stránek můžete definovat v jednom souboru.

Systém šablon Django nabízí dva způsoby opětovného použití konkrétních prvků ve více šablonách:

Zahrnuje jsou další šablony stránek, které vložíte na konkrétní místo v cílové šabloně pomocí syntaxe {% include <template_path> %}. Proměnnou můžete použít také v případě, že chcete změnit cestu dynamicky v kódu. Include se obvykle používají v textu stránky k načtení sdílené šablony v určitém umístění na stránce.
Dědičnost používá syntaxi {% extends <template_path> %} na začátku šablony stránky k určení sdílené základní šablony, na které se odkazující šablona zakládá. Dědičnost se běžně používá k definování sdíleného rozložení, navigačního panelu a dalších struktur pro stránky aplikace. Tento přístup vyžaduje odkazování šablon pro přidání nebo úpravu pouze konkrétních oblastí základní šablony nazývané bloky.

U obou přístupů je hodnota <template_path> relativní ke složce šablon aplikace (../ nebo ./ jsou také povoleny).

Základní šablona označuje bloky pomocí značek {% block <block_name> %} a {% endblock %}. Pokud odkazující šablona používá značky se stejným názvem bloku, přepíše obsah bloku v odkazující šabloně odpovídající blok v základní šabloně.

Následující kroky ukazují dědičnost šablon:

V Průzkumníku řešeníklikněte pravým tlačítkem myši na složku templates/HelloDjangoApp a vytvořte nový soubor ze šablony HTML stránky s názvem layout.html.

Obsah souboru layout.html nahraďte následujícím kódem 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>

Tato šablona obsahuje blok s názvem content, který identifikuje veškerý obsah, který odkazující stránky potřebují nahradit.

Do souboru HelloDjangoApp/static/site.css přidejte na konec souboru následující styly:

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

Tyto definice stylu generují pro toto cvičení zajímavý výsledek. Tato ukázka neukazuje responzivní návrh.

Nahraďte obsah souboru templates/HelloDjangoApp/index.html následujícím kódem:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Šablona index teď odkazuje na základní šablonu a přepíše blok content. Můžete vidět, že pomocí dědičnosti je tato šablona zjednodušená.
Nahraďte obsah souboru templates/HelloDjangoApp/about.html následujícím kódem, takže šablona about odkazuje také na základní šablonu a přepíše blok content:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Spusťte aplikaci znovu a sledujte výsledky. Pomocí odkazů na navigačním panelu můžete přepínat mezi stránkami aplikace.
Až budete hotovi, zastavte aplikaci a uložte změny projektu.
Vzhledem k tomu, že jste v aplikaci udělali podstatné změny, je vhodné uložit změny do úložiště Git. Další informace najdete v tématu Potvrzení změn ve správě zdrojového kódu v kroku 2 této série kurzů.

Další krok

Krok 4: Použijte úplnou šablonu webového projektu Django

Sdílet prostřednictvím