Zelfstudie: Statische bestanden leveren en sjabloonovername gebruiken met Django in Visual Studio

2025-08-08

Dit artikel bevat stap 3 in de reeks zelfstudies Werken met het Django-webframework in Visual Studio.

In de vorige stap in deze reeks zelfstudies maakt u een minimale Django-app met één pagina met zelfstandige HTML. Moderne web-apps bestaan doorgaans uit veel pagina's en gebruiken gedeelde resources zoals CSS- en JavaScript-bestanden om consistente stijl en gedrag te bieden. In stap 3 werkt u met Visual Studio-itemsjablonen om inhoud toe te voegen aan uw Django-project en de mogelijkheden van de toepassing uit te breiden.

In stap 3 van de zelfstudie leert u het volgende:

Visual Studio-itemsjablonen gebruiken om snel nieuwe bestanden met standaardcode toe te voegen
Statische bestanden vanuit de Django-code serveren
Meer pagina's toevoegen aan de Django-app
Overname van sjablonen gebruiken om een koptekst en navigatie tussen pagina's te maken

Voorwaarden

Een Visual Studio-oplossing en Django-toepassingsprojecten die zijn gemaakt in stap 1: Het Django-project maken en bijgewerkt in stap 2: Een Django-app maken met weergaven en paginasjablonen van deze reeks zelfstudies.
Bekijk de sectie Vereisten in stap 1 van deze reeks zelfstudies voor meer informatie over Django-sjabloonversies, Visual Studio-projecten versus Django-projecten en Python-ontwikkeling op Mac.

Itemsjablonen verkennen in Visual Studio

Wanneer u een Django-toepassing ontwikkelt, voegt u doorgaans veel meer Python-, HTML-, CSS- en JavaScript-bestanden toe. Voor elk bestandstype (en andere bestanden zoals web.config die u mogelijk nodig hebt voor implementatie), biedt Visual Studio handige itemsjablonen om u op weg te helpen. U kunt deze sjablonen gebruiken om snel nieuwe bestanden van verschillende typen met standaardcode toe te voegen.

Als u de beschikbare sjablonen wilt weergeven, gaat u naar Solution Explorer- in Visual Studio en opent u de projectstructuur.
Klik met de rechtermuisknop op de map waarin u een nieuw bestand wilt maken en selecteer Toevoegen>Nieuw item. Het dialoogvenster Nieuw item toevoegen wordt geopend:
Als u een sjabloon wilt gebruiken, selecteert u de gewenste sjabloon, voert u een naam voor het bestand in en selecteert u Toevoegen.

Visual Studio voegt het bestand toe aan uw huidige project en markeert de wijzigingen voor broncodebeheer.

Begrijpen hoe Visual Studio itemsjablonen identificeert

Het Visual Studio-projectbestand (.pyproj) bevat een projecttype-id die het bestand markeert als een Python-project. Visual Studio gebruikt deze type-id om alleen de itemsjablonen te herkennen en weer te geven die geschikt zijn voor het projecttype. Visual Studio volgt deze benadering om een uitgebreide set itemsjablonen voor veel projecttypen op te geven zonder dat u er elke keer doorheen hoeft te sorteren.

Statische bestanden uit uw app leveren

In een web-app die is gebouwd met Python (met behulp van een framework), worden uw Python-bestanden altijd uitgevoerd op de server van de webhost en worden ze nooit verzonden naar de computer van een gebruiker. Andere bestanden, zoals CSS en JavaScript, worden alleen door de browser gebruikt, dus de hostserver levert ze gewoon as-is wanneer ze worden aangevraagd. Deze typen bestanden worden 'statische' bestanden genoemd en Django kan ze automatisch leveren zonder dat u code hoeft te schrijven.

Een Django-project is standaard ingesteld om statische bestanden uit de statische map van de app te leveren. Dit gedrag wordt mogelijk gemaakt door de volgende code in het bestand settings.py van het Django-project:

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

U kunt de bestanden in de statische map van de app ordenen met behulp van elke gewenste mapstructuur en relatieve paden in de statische map gebruiken om naar de bestanden te verwijzen.

Statisch CSS-bestand gebruiken in HTML-sjabloon

Volg deze stappen om een CSS-bestand toe te voegen aan de app en gebruik vervolgens het CSS-opmaakmodel in de sjabloon index.html:

Klik in Solution Explorer-met de rechtermuisknop op de map HelloDjangoApp in uw project, selecteer Add>New folderen noem de map statische.
Klik met de rechtermuisknop op de map statische en selecteer >Nieuw item toevoegen.
Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon opmaakmodel, geef het bestand de naam site.csen selecteer vervolgens Toevoegen.

Visual Studio voegt het site.css-bestand toe aan het project en opent het bestand in de editor. Hier volgt een voorbeeld van de bijgewerkte Django-projectstructuur:
Vervang de inhoud van het bestand site.css door de volgende stijlen:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Vervang de inhoud van het bestand HelloDjangoApp/templates/index.html door de volgende markeringen:
```
<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>
```
Deze code vervangt het <strong> HTML-element uit stap 2 in de reeks zelfstudies door een <span> element dat verwijst naar de message stijlklasse. Door een stijlklasse op deze manier te gebruiken, hebt u meer flexibiliteit bij het stylen van het HTML-element.
Sla de projectwijzigingen op door Bestand>Alle opslaan te selecteren of gebruik de sneltoets Ctrl+Shift+S. (Deze stap is niet nodig omdat tijdens het ontwikkelen van uw project uw bestanden automatisch worden opgeslagen in Visual Studio.)
Voer het project uit en bekijk de resultaten. Wanneer u klaar bent, stopt u de app.
(Optioneel) U kunt uw wijzigingen doorvoeren in broncodebeheer en uw externe opslagplaats bijwerken. Zie Wijzigingen doorvoeren in broncodebeheer in stap 2 van deze reeks zelfstudies voor meer informatie.

Gebruik de tag {% load static %}

De {% load static %} verklaring moet aanwezig zijn in het index.html bestand voordat site-relatieve verwijzingen naar statische bestanden binnen HTML-elementen zoals <head> en <body>mogelijk zijn. In het voorbeeld dat in deze sectie wordt weergegeven, verwijst 'statische bestanden' naar een aangepaste Django-sjabloontagset. Met de tagset kunt u de {% static %} syntaxis gebruiken om te verwijzen naar statische bestanden. Zonder de {% load static %}-tag ziet u een uitzondering wanneer de app wordt uitgevoerd.

Voeg verwijzingen toe zonder de tag {% statische laden %} te gebruiken.

U kunt ook siteverwijzingen instellen ten opzichte van statische bestanden in de HTML-markering zonder de tag {% load static %} te gebruiken. In dit geval geeft u de locatie op van de statische map in de Django-projectmap-hiërarchie:

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

Statische bestanden en mappen organiseren

U kunt andere CSS-, JavaScript- en HTML-bestanden toevoegen in uw statische map op basis van uw projectbehoeften. Een typische manier om statische bestanden te organiseren, is door submappen met de naam lettertypente maken, scriptsen inhoud (voor opmaakmodellen en andere bestanden). Vergeet in ieder geval niet om de mappen op te nemen in het relatieve bestandspad in de {% static %}-verwijzingen.

Pagina toevoegen aan Django-toepassing

Het toevoegen van een andere pagina aan de Django-toepassing omvat de volgende taken:

Een Python-functie toevoegen waarmee de weergave wordt gedefinieerd
Een sjabloon toevoegen voor de HTML-opmaak van de pagina
Werk de URL-routes bij in het urls.py-bestand van het Django-project

Volg deze stappen om een infopagina (/about) toe te voegen aan het project HelloDjangoApp en koppelingen naar die pagina vanaf de startpagina:

Klik in Solution Explorermet de rechtermuisknop op de map templates/HelloDjangoApp in uw project en selecteer Add>New Item.

Fooi

Als u de opdracht Nieuw item niet ziet in het menu Toevoegen, moet u de Django-app stoppen, zodat Visual Studio de foutopsporingsmodus indien nodig afsluit.
Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon HTML-pagina, geef het bestand de naam about.htmlen selecteer vervolgens Toevoegen.

Vervang de inhoud van het about.html bestand door de volgende HTML-opmaak:

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

In een volgende stap vervangt u de expliciete koppeling naar de startpagina door een navigatiebalk.

Voeg in het bestand HelloDjangoApp/views.py een functie toe met de naam about die gebruikmaakt van de sjabloon:

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

Voeg in het bestand BasicProject/urls.py van het Django-project het pad voor de about pagina toe als het laatste item in de urlPatterns-matrix:

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

Voeg in het bestand templates/HelloDjangoApp/index.html de volgende markering toe als de eerste instructie in het <body>-element:
```
<div><a href="about">About</a></div>
```
Met deze markering wordt een koppeling toegevoegd aan de /about-pagina voor de Django-app. In een latere stap vervangt u deze koppeling door een navigatiebalk.
Sla uw projectwijzigingen op en voer het project opnieuw uit. Blader naar de /about pagina en controleer de navigatie tussen de verschillende app-pagina's.
Wanneer u klaar bent, stopt u de app.

Route naar de "index" pagina

Als u naar de /index pagina voor de actieve app wilt bladeren, ziet u een pagina niet gevonden (404) fout.

Hoewel het bestand HelloDjangoApp/views.py een functie heeft met de naam index, bevatten de URL-routeringspatronen in het bestand BasicProject/urls.py van het Django-project geen reguliere expressie die overeenkomt met de tekenreeks index. De huidige expressie voor de pagina 'index' van de app is ^$. Als u wilt overeenkomen met de tekenreeks index, moet u een andere URL-vermelding toevoegen voor het patroon ^index$.

In de volgende sectie wordt beschreven hoe u de {% url '<pattern_name>' %} tag in de paginasjabloon beter kunt gebruiken om te verwijzen naar de naam van een patroon. In dit geval maakt Django de juiste URL voor u. U kunt bijvoorbeeld de <div><a href="home">Home</a></div> markeringen in de -sjablonen/HelloDjangoApp/-about.html vervangen door de markeringen <div><a href="{% url 'index' %}">Home</a></div>. Het gebruik van de 'index' tekenreeks werkt nu omdat het eerste URL-patroon in het bestand urls.py de naam 'index'heeft. U kunt ook 'home' gebruiken om naar het tweede patroon te verwijzen.

Sjabloonovername gebruiken voor koptekst en navigatie

In plaats van expliciete navigatiekoppelingen op elke pagina hebben veel web-apps een huisstijlkoptekst en navigatiebalk die de belangrijkste paginakoppelingen, pop-upmenu's enzovoort biedt. Om consistentie in de app te garanderen, moeten de koptekst en navigatiebalk op alle pagina's hetzelfde zijn, maar u hoeft niet dezelfde code in elke paginasjabloon te herhalen. U kunt de algemene onderdelen van al uw pagina's in één bestand definiëren.

Het tempatiesysteem van Django biedt twee manieren om specifieke elementen in meerdere sjablonen opnieuw te gebruiken:

Bevat zijn andere paginasjablonen die u op een specifieke plaats in de verwijzende sjabloon invoegt met de syntaxis {% include <template_path> %}. U kunt ook een variabele gebruiken als u het pad dynamisch in code wilt wijzigen. Invoegsels worden meestal gebruikt in de hoofdtekst van een pagina om de gedeelde sjabloon op een specifieke locatie op de pagina te integreren.
Overerving maakt gebruik van de {% extends <template_path> %} syntaxis aan het begin van het paginasjabloon om de gedeelde basissjabloon te specificeren waarop de verwijzende sjabloon wordt gebaseerd. Overerving wordt vaak gebruikt voor het definiëren van een gedeelde indeling, menubalk en andere structuren voor de pagina's van een applicatie. Voor deze aanpak moeten verwijzende sjablonen alleen specifieke gebieden van de basissjabloon, de zogeheten blokken, toevoegen of wijzigen.

Voor beide benaderingen is de <template_path>-waarde relatief aan de map sjablonen van de app (../ en ./ zijn ook toegestaan).

Een basissjabloon delineeert blokken met behulp van de tags {% block <block_name> %} en {% endblock %}. Als een verwijzende sjabloon tags met dezelfde bloknaam gebruikt, overschrijft de blokinhoud in de verwijzende sjabloon het overeenkomende blok in de basissjabloon.

In de volgende stappen wordt de overname van sjablonen gedemonstreert:

Klik in Solution Explorermet de rechtermuisknop op de map templates/HelloDjangoApp en maak een nieuw bestand op basis van de HTML-pagina sjabloon met de naam layout.html.

Vervang de inhoud van het layout.html bestand door de volgende HTML-opmaak:

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

Deze sjabloon bevat een blok met de naam content, waarmee alle inhoud wordt geïdentificeerd die de verwijzende pagina's moeten vervangen.

Voeg in het bestand HelloDjangoApp/static/site.css de volgende stijlen toe aan het einde van het bestand:

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

Deze stijldefinities genereren een interessant resultaat voor deze oefening. In deze walkthrough wordt geen responsief ontwerp gedemonstreerd.

Vervang de inhoud van de templates/HelloDjangoApp/index.html bestand door de volgende code:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
De index-sjabloon verwijst nu naar de basissjabloon en overschrijft het content blok. U kunt zien dat deze sjabloon is vereenvoudigd door overname te gebruiken.
Vervang de inhoud van de templates/HelloDjangoApp/about.html bestand door de volgende code, dus de about sjabloon verwijst ook naar de basissjabloon en overschrijft het content blok:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Voer de app opnieuw uit en bekijk de resultaten. Gebruik de navigatiebalkkoppelingen om te schakelen tussen app-pagina's.
Wanneer u klaar bent, stopt u de app en slaat u de wijzigingen in uw project op.
Omdat u aanzienlijke wijzigingen in de app hebt aangebracht, is het een goed moment om uw wijzigingen op te slaan in een Git-opslagplaats. Zie Wijzigingen doorvoeren in broncodebeheer in stap 2 van deze reeks zelfstudies voor meer informatie.

Volgende stap

stap 4: gebruik de volledige Django Web Project-sjabloon

Feedback

Is deze pagina nuttig?