Krok 3: Obsluha statických souborů, přidání stránek a použití dědičnosti šablon s aplikací Django

Článek
08/25/2023

Předchozí krok: Vytvoření aplikace Django se zobrazeními a šablonami stránek

V předchozích krocích kurzu jste se naučili vytvořit minimální aplikaci Django s jednou stránkou HTML. Moderní webové aplikace ale obsahují mnoho stránek. Moderní webové stránky používají sdílené prostředky, jako jsou soubory CSS a JavaScript, k zajištění konzistentního stylu a chování.

V tomto kroku se naučíte:

Pomocí šablon položek sady Visual Studio můžete rychle přidat nové soubory různých typů pomocí vhodného často používaného kódu (krok 3–1).
Nastavení projektu Django pro obsluhu statických souborů (krok 3–2)
Přidání dalších stránek do aplikace (krok 3–3)
Použití dědičnosti šablon k vytvoření záhlaví a navigačního panelu, který se používá na stránkách (krok 3–4)

Krok 3–1: Seznámení se šablonami položek

Při vývoji aplikace Django obvykle přidáváte mnoho souborů Python, HTML, CSS a JavaScript. Pro každý typ souboru (soubory, jako je web.config , které možná budete potřebovat k nasazení), sada Visual Studio nabízí vhodné šablony položek, které vám pomůžou začít.

Pokud chcete zobrazit dostupné šablony, přejděte na Průzkumník řešení, klikněte pravým tlačítkem myši na složku, ve které chcete položku vytvořit, a pak vyberte Přidat>novou položku.

Add new item dialog in Visual Studio.

Pokud chcete použít šablonu, vyberte požadovanou šablonu, zadejte název souboru a pak vyberte Přidat. Přidání položky tímto způsobem automaticky přidá soubor do projektu sady Visual Studio a označí změny pro správu zdrojového kódu.

Otázka: Jak Visual Studio ví, které šablony položek mají být nabízeny?

Odpověď: Soubor projektu sady Visual Studio (.pyproj) obsahuje identifikátor typu projektu, který ho označí jako projekt Pythonu. Visual Studio používá identifikátor typu k zobrazení pouze šablon položek vhodných pro typ projektu. Visual Studio tak může poskytnout bohatou sadu šablon položek pro mnoho typů projektů, aniž byste je museli řadit pokaždé.

Krok 3–2: 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. Soubory Pythonu se také nikdy nepřenesou do počítače uživatele. Jiné soubory, například CSS a JavaScript, jsou však používány výhradně prohlížečem. Hostitelský server je tedy jednoduše doručí tak, jak je bude vždy, když je požaduje. Takové soubory 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, a to díky řádkům 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 můžete uspořádat ve statickém formátu pomocí libovolné struktury složek, kterou chcete, a pak pomocí relativních cest v této složce odkazovat na soubory. Pokud chcete tento proces předvést, přidejte do aplikace soubor CSS podle následujících kroků a pak použijte tuto šablonu stylů v šabloně index.html :

V Průzkumník řešení klikněte pravým tlačítkem na složku HelloDjangoApp v projektu sady Visual Studio, vyberte Přidat>novou složku a pojmenujte ji .static
Klikněte pravým tlačítkem myši na statickou složku a vyberte Přidat>novou položku. V zobrazeném dialogovém okně vyberte šablonu Šablony stylů , pojmenujte soubor site.cssa vyberte Přidat.

Soubor site.css se zobrazí v projektu a otevře se v editoru. Struktura složek by se měla podobat následujícímu obrázku:
Obsah souboru site.css nahraďte následujícím kódem a soubor uložte:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Obsah souboru templates/HelloDjangoApp/index.html aplikace nahraďte následujícím kódem. Kód nahradí <strong> prvek použitý v kroku 2 odkazem <span> na message třídu stylů. Použití třídy stylu poskytuje větší flexibilitu při stylu prvku. (Pokud jste soubor index.html nepřesunuli do podsložky v šablonách při použití sady VS 2017 15.7 a starší, přečtěte si o názvech šablon v 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>
```
Spuštěním projektu sledujte výsledky. Až budete hotovi, zastavte server a potvrďte změny do správy zdrojového kódu( jak je vysvětleno v kroku 2).

Otázka: Jaký je účel značky {% load static %}?

Odpověď: {% load static %} Řádek je vyžadován před odkazem na statické soubory v elementech jako <head> a <body>. V příkladu uvedeném v této části odkazuje "statické soubory" na vlastní sadu značek šablon Django, která umožňuje použít {% static %} syntaxi pro odkazování na statické soubory. Bez {% load static %}, při spuštění aplikace se zobrazí výjimka.

Otázka: Existují nějaké konvence pro uspořádání statických souborů?

Odpověď: Do statické složky můžete přidat další soubory CSS, JavaScript a HTML tak, jak chcete. Typickým způsobem, jak uspořádat statické soubory, je vytvořit podsložky pojmenované písma, skripty a obsah (pro šablony stylů a všechny ostatní soubory). V každém případě nezapomeňte zahrnout tyto složky do relativní cesty k souboru v {% static %} odkazech.

Otázka: Můžu stejnou úlohu dokončit bez použití značky {% load static %}?

Odpověď: Ano, můžete.

<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: Přidání stránky do aplikace

Přidání další stránky do aplikace bude:

Přidejte funkci Pythonu, která definuje zobrazení.
Přidejte šablonu pro značku stránky.
Přidejte potřebné směrování do souboru urls.py projektu Django.

Následující postup přidá stránku About do projektu "HelloDjangoApp" a odkazy na stránku z domovské stránky:

V Průzkumník řešení klikněte pravým tlačítkem na složku templates/HelloDjangoApp. Vyberte Přidat>novou položku a vyberte šablonu položky stránky HTML. Pojmenujte soubor about.html a vyberte Přidat.

Tip

Pokud se příkaz Nová položka nezobrazí v nabídce Přidat , ujistěte se, že jste server zastavili, aby Visual Studio ukončilo režim ladění.

Nahraďte obsah about.html následujícím kódem (v kroku 3–4 nahradíte explicitní odkaz na domovskou stránku jednoduchým navigačním panelem):

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

Otevřete soubor views.py aplikace a přidejte funkci s názvemabout, která používá šablonu:

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

Otevřete soubor urls.py projektu Django a do pole přidejte následující řádekurlPatterns:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
Otevřete soubor templates/HelloDjangoApp/index.html a přidejte následující řádek pod <body> prvek, který vytvoří odkaz na stránku O aplikaci (tento odkaz znovu nahradíte navigačním panelem v kroku 3-4):
```
<div><a href="about">About</a></div>
```
Uložte všechny soubory pomocí příkazu nabídky Uložit>vše nebo stiskněte kombinaci kláves Ctrl+Shift+S. (Technicky vzato tento krok není potřeba, protože projekt v sadě Visual Studio ukládá soubory automaticky. Nicméně, je to dobrý příkaz vědět o.)
Spusťte projekt, abyste mohli sledovat výsledky a kontrolovat navigaci mezi stránkami. Až budete hotovi, zavřete server.

Otázka: Zkusil(a) jsem pro odkaz na domovskou stránku použít "index", ale nefungovalo to. Proč?

Odpověď: Přestože je funkce zobrazení v souboru views.py pojmenovaná index, vzory směrování adresy URL v souboru urls.py projektu Django neobsahují regulární výraz, který odpovídá řetězci "index". Chcete-li se shodovat s řetězcem, musíte přidat další položku pro vzor ^index$.

Jak je znázorněno v další části, je lepší použít {% url '<pattern_name>' %} značku v šabloně stránky k odkazování na název vzoru. V takovém případě Django vytvoří správnou adresu URL. Například nahraďte <div><a href="home">Home</a></div> v souboru about.html za <div><a href="{% url 'index' %}">Home</a></div>. Použití indexu zde funguje, protože první vzor adresy URL v urls.py je ve skutečnosti pojmenovaný index (na základě argumentu name='index' ). K odkazu na druhý vzor můžete použít také "home".

Krok 3–4: Vytvoření záhlaví a navigačního panelu pomocí dědičnosti šablon

Místo explicitních navigačních odkazů na každou stránku používají moderní webové aplikace záhlaví značky a navigační panel. Navigační panel poskytuje nejdůležitější odkazy na stránky, místní nabídky atd. Pokud chcete zajistit, aby záhlaví a navigační panel byly stejné na všech stránkách, neopakujte stejný kód v každé šabloně stránky. Místo toho chcete definovat společné části všech stránek na jednom místě.

Systém šablon Django poskytuje dva způsoby opětovného použití konkrétních prvků napříč několika šablonami: zahrnuje a dědičnost.

Obsahuje další šablony stránek, které vložíte na určité místo v odkazující šabloně pomocí syntaxe {% include <template_path> %}. Pokud chcete změnit cestu dynamicky v kódu, můžete také použít proměnnou. Zahrnutí se 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á {% extends <template_path> %} na začátku šablony stránky k určení sdílené základní šablony, na které pak odkazující šablona vychází. 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, takže odkazující šablony můžou přidávat nebo upravovat jenom určité oblasti základní šablony označované jako bloky.

V oboupřípadechch <template_path>.././

Základní šablona označuje bloky používající {% block <block_name> %} a {% endblock %} značky. Pokud odkazující šablona používá značky se stejným názvem bloku, jeho blokový obsah přepíše obsah základní šablony.

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

Ve složce šablony aplikace / HelloDjangoApp vytvořte nový soubor HTML. Klikněte pravým tlačítkem myši na šablony nebo složku HelloDjangoApp, vyberte Přidat>novou položku a pak vyberte šablonu položky stránky HTML. Pojmenujte soubor layout.html a vyberte Přidat.

Obsah souboru layout.html nahraďte následujícím kódem. Vidíte, že tato šablona obsahuje blok s názvem "content", který je všechny odkazující stránky potřeba nahradit:

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

Do souboru static/site.css aplikace přidejte následující styly (tento názorný postup se zde nepokoušá demonstrovat responzivní návrh; tyto styly jednoduše generují zajímavý výsledek):

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

Upravte soubor templates/HelloDjangoApp/index.html tak, aby odkazovat na základní šablonu a aby byl použitelný na stránce. Na stránce HTML (nad značkou HTML) přidejte následující řádek jako řádek 1:
```
{% extends "HelloDjangoApp/layout.html" %}
```
Můžete vidět, že pomocí dědičnosti se tato šablona snadno implementuje v rámci základní značky a přepíše blok obsahu:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Upravte soubor templates/HelloDjangoApp/about.html stejným způsobem, aby byla šablona rozložení k dispozici. Přidejte stejný řádek z kroku 1 na stránce HTML (nad značku HTML):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Potom pomocí dědičnosti implementujte šablonu v rámci základní značky, aby se přepsaly blok obsahu:
```
{% block content %}
{{ content }}
{% endblock %}
```
Spuštěním serveru sledujte výsledky. Až budete hotovi, zavřete server.
Vzhledem k tomu, že jste v aplikaci udělali podstatné změny, je opět vhodná doba k potvrzení změn do správy zdrojového kódu.

Další kroky

Použití úplné šablony webového projektu Django

Přejít hlouběji

Psaní první aplikace Django, část 3 (zobrazení) (docs.djangoproject.com)
Další možnosti šablon Django, jako je například tok řízení, najdete v tématu Jazyk šablony Django (docs.djangoproject.com).
Úplné podrobnosti o použití značky {% url %} najdete v adrese URL v rámci předdefinovaných značek šablon a filtrů pro referenční informace o šablonách Django (docs.djangoproject.com).
Zdrojový kód kurzu na GitHubu: Microsoft/python-sample-vs-learning-django

Sdílet prostřednictvím