Självstudie: Hantera statiska filer och använda mallarvning med Django i Visual Studio

Artikel
01/27/2025

I den här artikeln beskrivs steg 3 i självstudieserien Arbeta med Django-webbramverket i Visual Studio.

Föregående steg i den här självstudieserien skapar en minimal Django-app med en enda sida med fristående HTML. Moderna webbappar består vanligtvis av många sidor och använder delade resurser som CSS- och JavaScript-filer för att ge konsekvent formatering och beteende. I steg 3 arbetar du med Visual Studio-objektmallar för att lägga till innehåll i ditt Django-projekt och utöka funktionerna i programmet.

I steg 3 i självstudien lär du dig att:

Använd Visual Studio-objektmallar för att snabbt lägga till nya filer med standardkod
Hantera statiska filer från Django-koden
Lägga till fler sidor i Django-appen
Använd mallarv för att skapa en rubrik och navigering mellan sidor

Förutsättningar

En Visual Studio-lösning och Django-programprojekt som skapats i steg 1: Skapa Django-projektet och uppdaterat i steg 2: Skapa en Django-app med vyer och sidmallar i den här självstudieserien.
Läs avsnittet Krav i steg 1 i den här självstudieserien för mer information om Django-mallversioner, Visual Studio-projekt jämfört med Django-projekt och Python-utveckling på Mac.

Utforska objektmallar i Visual Studio

När du utvecklar ett Django-program lägger du vanligtvis till många fler Python-, HTML-, CSS- och JavaScript-filer. För varje filtyp (och andra filer som web.config som du kan behöva för distribution) tillhandahåller Visual Studio praktiska objektmallar för att komma igång. Du kan använda dessa mallar för att snabbt lägga till nya filer av olika typer med standardkod.

Om du vill visa tillgängliga mallar går du till Solution Explorer i Visual Studio och öppnar projektstrukturen.
Högerklicka på mappen där du vill skapa en ny fil och välj Lägg till>nytt objekt. Dialogrutan Lägg till nytt objekt öppnas:
Om du vill använda en mall väljer du önskad mall, anger ett namn på filen och väljer Lägg till.

Visual Studio lägger till filen i det aktuella projektet och markerar ändringarna för källkontroll.

Förstå hur Visual Studio identifierar objektmallar

Visual Studio-projektfilen (.pyproj) innehåller en projekttypsidentifierare som markerar filen som ett Python-projekt. Visual Studio använder den här typen av identifierare för att identifiera och visa endast de objektmallar som är lämpliga för projekttypen. Visual Studio följer den här metoden för att tillhandahålla en omfattande uppsättning objektmallar för många projekttyper utan att be dig att sortera igenom dem varje gång.

Hantera statiska filer från din app

I en webbapp som skapats med Python (med hjälp av ett ramverk) körs dina Python-filer alltid på webbvärdens server och överförs aldrig till en användares dator. Andra filer som CSS och JavaScript används endast av webbläsaren, så värdservern levererar dem helt enkelt as-is när de begärs. Dessa typer av filer kallas "statiska" filer, och Django kan leverera dem automatiskt utan att du behöver skriva någon kod.

Ett Django-projekt konfigureras som standard för att hantera statiska filer från appens statiska mapp. Det här beteendet möjliggörs av följande kod i Django-projektets settings.py-fil:

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

Du kan ordna filerna i appens statiska mapp med hjälp av valfri mappstruktur och använda relativa sökvägar i mappen statisk för att referera till filerna.

Använda statisk CSS-fil i HTML-mall

Följ de här stegen för att lägga till en CSS-fil i appen och använd sedan CSS-formatmallen i mallen index.html:

I Solution Explorerhögerklickar du på mappen HelloDjangoApp i projektet, väljer Lägg till>Ny mappoch ger mappen namnet statisk.
Högerklicka på mappen statisk och välj Lägg till>nytt objekt.
I dialogrutan Lägg till nytt objekt väljer du mallen formatmall, namnger filen site.csoch väljer sedan Lägg till.

Visual Studio lägger till site.css-filen i projektet och öppnar filen i redigeraren. Här är ett exempel på den uppdaterade Django-projektstrukturen:
Ersätt innehållet i site.css-filen med följande stilar:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Ersätt innehållet i filen HelloDjangoApp/templates/index.html med följande markering:
```
<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>
```
Den här koden ersätter html-elementet <strong> från steg 2 i självstudieserien med ett <span>-element som refererar till message-formatklassen. Om du använder en stilklass på det här sättet får du större flexibilitet när du utformar HTML-elementet.
Spara dina projektändringar genom att välja Fil>Spara Alla eller använd kortkommandot Ctrl+Skift+S. (Det här steget är inte nödvändigt eftersom Visual Studio sparar filerna automatiskt när du utvecklar projektet.)
Kör projektet och observera resultatet. När du är klar stoppar du appen.
(Valfritt) Du kan checka in ändringarna i källkontrollen och uppdatera fjärrlagringsplatsen. För mer information, se Lagra ändringar i källkontroll i steg 2 i den här handledningsserien.

Använd taggen {% ladda statisk %}

Instruktionen {% load static %} måste finnas i index.html-filen före platsrelativa referenser till statiska filer i HTML-element som <head> och <body>. I exemplet som visas i det här avsnittet refererar "statiska filer" till en anpassad Tagguppsättning för Django-mallar. Med tagguppsättningen kan du använda {% static %} syntax för att referera till statiska filer. Utan taggen {% load static %} visas ett undantag när appen körs.

Lägga till referenser utan taggen {% läsa in statisk %}

Du kan också konfigurera platsrelativa referenser till statiska filer i HTML-markering utan att använda taggen {% load static %}. I det här fallet anger du platsen för mappen statisk i mapphierarkin för Django-projekt:

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

Ordna statiska filer och mappar

Du kan lägga till andra CSS-, JavaScript- och HTML-filer i din statiska mapp enligt dina projektbehov. Ett vanligt sätt att organisera statiska filer är att skapa undermappar med namnet teckensnitt, skriptoch innehåll (för formatmallar och andra filer). I varje fall bör du komma ihåg att inkludera mapparna i den relativa filsökvägen i {% static %}-referens.

Lägg till sida i Django-programmet

Att lägga till en annan sida i Django-programmet omfattar följande uppgifter:

Lägg till en Python-funktion som definierar vyn
Lägga till en mall för sidans HTML-kod
Uppdatera URL-vägarna i Django-projektets urls.py-fil

Följ dessa steg för att lägga till sidan Om (/about) i HelloDjangoApp- projekt och länkar till den sidan från startsidan:

I Solution Explorerhögerklickar du på mappen templates/HelloDjangoApp i projektet och väljer Lägg till>nytt objekt.

Tips

Om du inte ser kommandot Nytt objekt på menyn Lägg till ska du stoppa Django-appen så att Visual Studio avslutar felsökningsläget efter behov.
I dialogrutan Lägg till nytt objekt väljer du mallen HTML-sida, namnger filen about.htmloch väljer sedan Lägg till.

Ersätt innehållet i about.html-filen med följande HTML-kod:

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

I ett efterföljande steg ersätter du den explicita länken till startsidan med ett navigeringsfält.

I filen HelloDjangoApp/views.py lägger du till en funktion med namnet about som använder mallen:

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

I Django-projektets BasicProject/urls.py-fil lägger du till sökvägen för sidan about som det sista objektet i matrisen 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')
 ]

I filen templates/HelloDjangoApp/index.html lägger du till följande markering som den första instruktionen i <body>-elementet:
```
<div><a href="about">About</a></div>
```
Den här markeringen lägger till en länk till /about-sidan för Django-appen. I ett senare steg ersätter du den här länken med ett navigeringsfält.
Spara dina projektändringar och kör projektet igen. Bläddra till sidan /about och kontrollera navigeringen mellan de olika appsidorna.
När du är klar stoppar du appen.

Dirigera till sidan "index"

Om du försöker bläddra till sidan /index för din app som körs, ser du ett fel sidan kunde inte hittas (404).

Även om filen HelloDjangoApp/views.py har en funktion med namnet indexinnehåller URL-routningsmönstren i Django-projektets BasicProject/urls.py-fil inte ett reguljärt uttryck som matchar strängen index. Det aktuella uttrycket för appens "indexsida" är ^$. Om du vill matcha strängen indexmåste du lägga till en annan URL-post för mönstret ^index$.

I nästa avsnitt beskrivs hur det är bättre att använda taggen {% url '<pattern_name>' %} i sidmallen för att referera till namn för ett mönster. I det här fallet skapar Django rätt URL åt dig. Du kan till exempel ersätta <div><a href="home">Home</a></div>-markering i filen templates/HelloDjangoApp/about.html med markeringsfilen <div><a href="{% url 'index' %}">Home</a></div>. Användningen av strängen 'index' fungerar nu eftersom det första URL-mönstret i urls.py-filen heter 'index'. Du kan också använda 'home' för att referera till det andra mönstret.

Använd mallarvning för sidhuvud och navigering

I stället för explicita navigeringslänkar på varje sida har många webbappar en varumärkesrubrik och ett navigeringsfält som innehåller de viktigaste sidlänkarna, popup-menyerna och så vidare. För att säkerställa konsekvens i appen bör sidhuvudet och navigeringsfältet vara samma på alla sidor, men du behöver inte upprepa samma kod i varje sidmall. Du kan definiera de gemensamma delarna av alla dina sidor i en enda fil.

Djangos mallsystem innehåller två sätt att återanvända specifika element i flera mallar:

Innehåller är andra sidmallar som du infogar på en specifik plats i den refererande mallen med syntaxen {% include <template_path> %}. Du kan också använda en variabel om du vill ändra sökvägen dynamiskt i kod. Inkluderingar används vanligtvis i huvudtexten på en sida för att dra in den delade mallen på en specifik plats på sidan.
Inheritance använder syntaxen {% extends <template_path> %} i början av en sidmall för att ange en delad basmall som den refererande mallen bygger på. Arv används ofta för att definiera en delad layout, navigeringsfält och andra strukturer för en apps sidor. Den här metoden kräver refererande mallar för att bara lägga till eller ändra specifika områden i basmallen som kallas block.

För båda metoderna är värdet för <template_path> relativt appens mallar mapp (../ eller ./ tillåts också).

En basmall avgränsar block med hjälp av taggarna {% block <block_name> %} och {% endblock %}. Om en refererande mall använder taggar med samma blocknamn åsidosätter blockinnehållet i den refererande mallen det matchande blocket i basmallen.

Följande steg visar arv av mallar:

I Solution Explorerhögerklickar du på mappen templates/HelloDjangoApp och skapar en ny fil från mallen HTML-sida med namnet layout.html.

Ersätt innehållet i layout.html-filen med följande HTML-kod:

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

Den här mallen innehåller ett block med namnet content, som identifierar allt innehåll som de refererande sidorna behöver ersätta.

I filen HelloDjangoApp/static/site.css lägger du till följande stilar i slutet av filen.

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

Dessa formatdefinitioner genererar ett intressant resultat för den här övningen. Den här genomgången demonstrerar inte responsiv design.

Ersätt innehållet i filen templates/HelloDjangoApp/index.html med följande kod:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Den index mallen refererar nu till basmallen och åsidosätter content blocket. Du kan se att den här mallen förenklas med hjälp av arv.
Ersätt innehållet i -mallarna/HelloDjangoApp/about.html-filen med följande kod, så att about-mallen även refererar till basmallen och åsidosätter content blocket:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Kör appen igen och observera resultatet. Använd länkarna i navigeringsfältet för att växla mellan appsidor.
När du är klar stoppar du appen och sparar dina projektändringar.
Eftersom du har gjort betydande ändringar i appen är det ett bra tillfälle att spara ändringarna på en Git-lagringsplats. Mer information finns under Spara ändringar i versionskontroll i steg 2 av den här handledningsserien.

Nästa steg

Steg 4: Använd den fullständiga Django Web Project-mallen

Dela via