Oktatóanyag: Statikus fájlok kiszolgálása és sablonöröklés használata a Django használatával a Visual Studióban

Ez a cikk a 3. lépést mutatja be a Django webes keretrendszer használata a Visual Studiocímű oktatóanyag-sorozatában.

Az oktatóanyag-sorozat előző lépése egy minimális Django-alkalmazást hoz létre egyetlen önálló HTML-oldallal. A modern webalkalmazások általában több oldalból állnak, és megosztott erőforrásokat, például CSS- és JavaScript-fájlokat használnak a következetes stílus és viselkedés biztosításához. A 3. lépésben Visual Studio-elemsablonokkal bővítheti a Django-projekt tartalmát, és bővítheti az alkalmazás képességeit.

Az oktatóanyag 3. lépésében megtanulhatja, hogyan:

A Visual Studio elemsablonjaival gyorsan hozzáadhat új fájlokat a boilerplate-kóddal
Statikus fájlok kiszolgálása a Django-kódból
További lapok hozzáadása a Django alkalmazáshoz
Használjon sablonöröklést fejlécek és navigáció létrehozásához az oldalak között.

Előfeltételek

Visual Studio-megoldás és Django-alkalmazásprojektek 1. lépésben: A Django-projekt létrehozása és frissítve 2. lépésben: Django-alkalmazás létrehozása az oktatóanyag-sorozat nézeteivel és lapsablonjaival.
Tekintse át az oktatóanyag-sorozat 1. lépésének Előfeltételek szakaszát a Django-sablonverziókkal, a Visual Studio-projektekkel és a Django-projektekkel és a Mac Python-fejlesztéssel kapcsolatos részletekért.

Elemsablonok felfedezése a Visual Studióban

Django-alkalmazás fejlesztése során általában sokkal több Python-, HTML-, CSS- és JavaScript-fájlt ad hozzá. Minden fájltípushoz (és más fájlokhoz, például web.config, amelyekre szükség lehet az üzembe helyezéshez) a Visual Studio kényelmes elemsablonokat az első lépésekhez. Ezekkel a sablonokkal gyorsan hozzáadhat új, különböző típusú fájlokat a boilerplate-kóddal.

Az elérhető sablonok megtekintéséhez nyissa meg Megoldáskezelő a Visual Studióban, és nyissa meg a projektstruktúrát.
Kattintson a jobb gombbal arra a mappára, amelyben új fájlt szeretne létrehozni, és válassza >Új elem hozzáadásalehetőséget. Megnyílik az Új elem hozzáadása párbeszédpanel:
Sablon használatához válassza ki a kívánt sablont, adja meg a fájl nevét, majd válassza a hozzáadása lehetőséget.

A Visual Studio hozzáadja a fájlt az aktuális projekthez, és megjelöli a forráskövetés módosításait.

Az elemsablonok Visual Studio által való azonosításának ismertetése

A Visual Studio-projektfájl (.pyproj) egy olyan projekttípus-azonosítót tartalmaz, amely Python-projektként jelöli meg a fájlt. A Visual Studio ezzel a típusazonosítóval csak a projekttípusnak megfelelő elemsablonokat ismeri fel és jeleníti meg. A Visual Studio ezt a megközelítést követve számos projekttípushoz biztosít számos elemsablont anélkül, hogy minden alkalommal sorba rendezné őket.

Statikus fájlok kiszolgálása az alkalmazásból

A Pythonnal készült webalkalmazásokban (bármilyen keretrendszer használatával) a Python-fájlok mindig a webgazda kiszolgálóján futnak, és soha nem kerülnek át a felhasználó számítógépére. Más fájlokat, például a CSS-t és a JavaScriptet csak a böngésző használja, így a gazdakiszolgáló egyszerűen as-is továbbítja őket, amikor a rendszer kéri őket. Az ilyen típusú fájlokat "statikus" fájloknak nevezik, és a Django automatikusan kézbesíti őket anélkül, hogy bármilyen kódot kellene írnia.

A Django-projekt alapértelmezés szerint úgy van beállítva, hogy statikus fájlokat szolgáljon ki az alkalmazás statikus mappájából. Ezt a viselkedést a Django-projekt settings.py fájljában található alábbi kód teszi lehetővé:

# 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']))

Az alkalmazás statikus mappájában lévő fájlokat tetszőleges mappastruktúrával rendszerezheti, és a fájlokra a statikus mappán belüli relatív elérési utakat használhatja.

Statikus CSS-fájl használata HTML-sablonban

Kövesse az alábbi lépéseket egy CSS-fájl alkalmazáshoz való hozzáadásához, majd használja a CSS stíluslapját a index.html sablonban:

A Megoldáskezelőbenkattintson a jobb gombbal a projekt HelloDjangoApp mappájára, válassza a >Új mappa hozzáadásalehetőséget, és nevezze el a mappát statikus.
Kattintson a jobb gombbal a statikus mappára, és válassza >Új elem hozzáadásalehetőséget.
Az Új elem hozzáadása párbeszédpanelen jelölje ki a Stíluslap sablont, nevezze el a fájlt site.cs, majd válassza hozzáadása lehetőséget.

A Visual Studio hozzáadja a site.css fájlt a projekthez, és megnyitja a fájlt a szerkesztőben. Íme egy példa a django-projekt frissített szerkezetére:
Cserélje le a site.css fájl tartalmát a következő stílusokkal:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Cserélje le a HelloDjangoApp/templates/index.html fájl tartalmát a következő jelölőnyelvre:
```
<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>
```
Ez a kód az oktatóanyag-sorozat 2. lépésében szereplő <strong> HTML-elemet egy <span> elemre cseréli, amely a message stílusosztályra hivatkozik. A stílusosztályok ily módon történő használata nagyobb rugalmasságot biztosít a HTML-elem stílusának alakításához.
Mentse a projekt módosításait a Fájl>Mindet mentse lehetőség kiválasztásával, vagy használja a Ctrl+Shift+S billentyűparancsot. (Ez a lépés nem szükséges, mert a projekt fejlesztése során a Visual Studio automatikusan menti a fájlokat.)
Futtassa a projektet, és figyelje meg az eredményeket. Ha végzett, állítsa le az alkalmazást.
(Nem kötelező) Véglegesítheti a módosításokat a forráskövetésben, és frissítheti a távoli adattárat. További információért lásd a Változtatások feltöltése a forráskezelésbe az oktatóanyag-sorozat 2. lépésében.

{% statikus betöltés %} címke használata

A {% load static %} utasításnak szerepelnie kell a index.html fájlban, mielőtt a HTML-elemekben szereplő, statikus fájlokra mutató helyhez viszonyított hivatkozásokat alkalmaznánk, mint például <head> és <body>. Az ebben a szakaszban látható példában a "statikus fájlok" egy egyéni Django-sabloncímkekészletre utalnak. A címkekészlet lehetővé teszi, hogy a {% static %} szintaxissal statikus fájlokra hivatkozzon. {% load static %} címke nélkül az alkalmazás futtatásakor kivétel jelenik meg.

Hivatkozások hozzáadása {% statikus %} címke betöltése nélkül

Beállíthatja a site relative hivatkozásokat statikus fájlokra az HTML jelölésen belül a {% load static %} címke használata nélkül is. Ebben az esetben meg kell adnia a statikus mappa helyét a Django projektmappák hierarchiájában:

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

Statikus fájlok és mappák rendszerezése

Más CSS-, JavaScript- és HTML-fájlokat is hozzáadhat a statikus mappához a projekt igényeinek megfelelően. A statikus fájlok rendszerezésének tipikus módja betűtípusok, szkriptekés tartalom (stíluslapok és egyéb fájlok) nevű almappák létrehozása. Minden esetben vegye fel a mappákat a {% static %} hivatkozásokhoz tartozó relatív fájl elérési útvonalba.

Oldal hozzáadása Django-alkalmazáshoz

Ha egy másik lapot ad hozzá a Django-alkalmazáshoz, az a következő feladatokat foglalja magában:

A nézetet meghatározó Python-függvény hozzáadása
Sablon hozzáadása a lap HTML-jelöléséhez
Az URL-útvonalak frissítése a Django-projekt urls.py fájljában

Az alábbi lépéseket követve adjon hozzá egy Névjegy (/about) oldalt a HelloDjangoApp projekthez, és helyezzen el hivatkozásokat a kezdőlapon, amelyek erre az oldalra mutatnak:

A Megoldáskezelőbenkattintson a jobb gombbal a sablonok/HelloDjangoApp mappára a projektben, és válassza >Új elem hozzáadásalehetőséget.

Borravaló

Ha nem látja az Új elem parancsot a Hozzáadás menüben, állítsa le a Django-alkalmazást, hogy a Visual Studio szükség szerint kilépjen a hibakeresési módból.
Az Új elem hozzáadása párbeszédpanelen jelölje ki a HTML-lap sablont, nevezze el a fájlt about.html, majd válassza hozzáadása lehetőséget.

Cserélje le a about.html fájl tartalmát a következő HTML-jelölésre:

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

A következő lépésben a kezdőlapra mutató explicit hivatkozást egy navigációs sávra cseréli.

A HelloDjangoApp/views.py fájlban adjon hozzá egy about nevű függvényt, amely a sablont használja:

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

A Django-projekt BasicProject/urls.py fájljában adja hozzá a about lap elérési útját a urlPatterns tömb utolsó elemeként:

# 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')
 ]

A sablonok/HelloDjangoApp/index.html fájlban adja hozzá a következő jelölést az első utasításként az <body> elemben:
```
<div><a href="about">About</a></div>
```
Ez a korrektúra hozzáad egy hivatkozást a Django alkalmazás /about oldalához. Egy későbbi lépésben ezt a hivatkozást egy navigációs sávra cseréli.
Mentse a projekt módosításait, és futtassa újra a projektet. Keresse meg a /about lapot, és ellenőrizze a navigációt a különböző alkalmazáslapok között.
Ha végzett, állítsa le az alkalmazást.

Útvonal az "index" lapra

Ha megkeresi a futó alkalmazás /index lapját, egy lap nem található (404), hiba jelenik meg.

Bár a HelloDjangoApp/views.py fájl indexnevű függvényt tartalmaz, a Django-projekt BasicProject/urls.py fájljának URL-útválasztási mintái nem tartalmaznak olyan reguláris kifejezést, amely megfelel a indexsztringnek. Az alkalmazás "index" oldalának jelenlegi kifejezése ^$. A(z) indexsztring illesztéséhez új URL-bejegyzést kell hozzáadnia a(z) ^index$minta alapján.

A következő szakasz azt ismerteti, hogyan érdemes a {% url '<pattern_name>' %} címkét használni a lapsablonban a minta nevére hivatkozni. Ebben az esetben a Django létrehozza a megfelelő URL-címet. Lecserélheti például a <div><a href="home">Home</a></div> jelölést a sablonokban/HelloDjangoApp/about.html fájlban a jelöléssel <div><a href="{% url 'index' %}">Home</a></div>. A 'index' karakterlánc használata most már működik, mert a urls.py fájlban az első URL-minta neve 'index'. A 'home' segítségével a második mintára is hivatkozhat.

Sablonöröklés használata fejléc és navigáció számára

Az egyes oldalakon kifejezett navigációs hivatkozások helyett számos webalkalmazás rendelkezik egy arculati fejléccel és navigációs sávval, amely a legfontosabb laphivatkozásokat, előugró menüket és így tovább. Az alkalmazás konzisztenciájának biztosításához az élőfejnek és a navigációs sávnak minden oldalon azonosnak kell lennie, de nem kell minden lapsablonban ugyanazt a kódot megismételnie. Az összes lap közös részeit egyetlen fájlban határozhatja meg.

A Django templating rendszere kétféleképpen használható fel egyes elemek több sablonban való újrafelhasználására:

Tartalmaz más lapsablonok, amelyeket a hivatkozó sablon egy adott helyére szúr be a szintaxis {% include <template_path> %}. Akkor is használhat változót, ha dinamikusan szeretné módosítani az elérési utat a kódban. Az "include"-okat általában egy oldal törzsében használják, hogy egy közös sablont egy adott helyen vegyenek be az oldalra.
Öröklés a lapsablon elején található {% extends <template_path> %} szintaxist használja egy megosztott alapsablon megadására, amelyre a hivatkozó sablon épül. Az öröklést gyakran használják az alkalmazás lapjainak megosztott elrendezésének, navigációs sávjának és egyéb struktúráinak meghatározására. Ehhez a megközelítéshez hivatkozó sablonokra van szükség az alapsablon csak bizonyos területeinek hozzáadásához vagy módosításához, amelyeket blokkok.

Mindkét módszer esetében a <template_path> érték az alkalmazás sablonok mappához viszonyítva van megadva (../ vagy ./ is megengedett).

Az alapsablon a blokkokat a {% block <block_name> %} és {% endblock %} címkékkel tagozza. Ha egy hivatkozó sablon ugyanazzal a blokknévvel rendelkező címkéket használ, akkor a hivatkozó sablon blokktartalma felülírja az alapsablonban lévő egyező blokkot.

A következő lépések a sablonöröklést mutatják be:

A Megoldáskezelőkattintson a jobb gombbal a sablonok/HelloDjangoApp mappára, és hozzon létre egy új fájlt a HTML-lap sablonból layout.htmlnéven.

Cserélje le a layout.html fájl tartalmát a következő HTML-jelölőnyelvre:

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

Ez a sablon egy contentnevű blokkot tartalmaz, amely azonosítja a hivatkozó lapok lecserélendő összes tartalmát.

A HelloDjangoApp/static/site.css fájlban adja hozzá a következő stílusokat a fájl végéhez:

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

Ezek a stílusdefiníciók érdekes eredményt adnak ehhez a gyakorlathoz. Ez az útmutató nem mutatja be a rugalmas kialakítást.

Cserélje le a sablonok/HelloDjangoApp/index.html fájl tartalmát a következő kódra:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
A index sablon most már az alapsablonra hivatkozik, és felülbírálja a content blokkot. Láthatja, hogy az örökléssel ez a sablon egyszerűbb.
Cserélje le a sablonok/HelloDjangoApp/about.html fájl tartalmát a következő kódra, így a about sablon az alapsablonra is hivatkozik, és felülbírálja a content blokkot:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Futtassa újra az alkalmazást, és figyelje meg az eredményeket. Az alkalmazásoldalak közötti váltáshoz használja a navigációs sáv hivatkozásait.
Ha elkészült, állítsa le az alkalmazást, és mentse a projekt módosításait.
Mivel jelentős módosításokat hajtott végre az alkalmazásban, érdemes mentenie a módosításokat egy Git-adattárba. További információért lásd a Változtatások feltöltése a forráskezelésbe az oktatóanyag-sorozat 2. lépésében.

Következő lépés

4. lépés: A teljes Django Web Project-sablon használata

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-08-08