{"title":"Skriva din första Django-app, del 6","version":"5.2","locale":"sv","docname":"intro/tutorial06","url":"/sv/5.2/intro/tutorial06/","canonical":"https://djangodocs.dev/sv/5.2/intro/tutorial06/","summary":"Denna handledning börjar där Tutorial 5 slutade. Vi har byggt en testad applikation för webbenkäter och nu ska vi lägga till en stilmall och en bild.","html":"

Skriva din första Django-app, del 6Link to this heading#

\n

Denna handledning börjar där Tutorial 5 slutade. Vi har byggt en testad applikation för webbenkäter och nu ska vi lägga till en stilmall och en bild.

\n

Förutom den HTML som genereras av servern behöver webbapplikationer i allmänhet servera ytterligare filer - till exempel bilder, JavaScript eller CSS - som krävs för att rendera hela webbsidan. I Django hänvisar vi till dessa filer som ”statiska filer”.

\n

För små projekt är det inte så farligt, eftersom du kan förvara de statiska filerna någonstans där din webbserver kan hitta dem. Men i större projekt - särskilt de som består av flera appar - börjar det bli knepigt att hantera de flera uppsättningar statiska filer som tillhandahålls av varje applikation.

\n

Det är vad django.contrib.staticfiles är till för: det samlar statiska filer från var och en av dina applikationer (och alla andra platser du anger) till en enda plats som enkelt kan serveras i produktion.

\n\n
\n

Anpassa din apps utseende och känslaLink to this heading#

\n

Först skapar du en katalog som heter static i din polls-katalog. Django kommer att leta efter statiska filer där, på samma sätt som Django hittar mallar i polls/templates/.

\n

Djangos inställning STATICFILES_FINDERS innehåller en lista över sökare som vet hur man upptäcker statiska filer från olika källor. Ett av standardvärdena är AppDirectoriesFinder som letar efter en ”statisk” underkatalog i varje INSTALLED_APPS, som den i polls som vi just skapade. Admin-webbplatsen använder samma katalogstruktur för sina statiska filer.

\n

I katalogen static som du just har skapat, skapar du en annan katalog som heter polls och i den skapar du en fil som heter style.css. Med andra ord bör din stilmall finnas på polls/static/polls/style.css. På grund av hur AppDirectoriesFinder staticfile finder fungerar kan du hänvisa till den här statiska filen i Django som polls/style.css, på samma sätt som du refererar till sökvägen för mallar.

\n\n

Lägg till följande kod i den stilmallen (polls/static/polls/style.css):

\n
polls/static/polls/style.css
\n
Css
li a {\n    color: green;\n}\n
\n

Lägg sedan till följande längst upp i polls/templates/polls/index.html:

\n
polls/templates/polls/index.html
\n
Django template
{% load static %}\n\n<link rel="stylesheet" href="{% static 'polls/style.css' %}">\n
\n

Malltaggen {% static %} genererar den absoluta URL:en för statiska filer.

\n

Det är allt du behöver göra för utveckling.

\n

Starta servern (eller starta om den om den redan är igång):

\n

Linux / macOS

Shell
$ python manage.py runserver\n
\n

Windows

Windows
...\\> py manage.py runserver\n
\n

Ladda om http://localhost:8000/polls/ och du bör se att frågelänkarna är gröna (Django-stil!), vilket innebär att din stilmall laddades korrekt.

\n
\n
\n

Lägga till en bakgrundsbildLink to this heading#

\n

Nu ska vi skapa en underkatalog för bilder. Skapa en underkatalog med namnet images i katalogen polls/static/polls/. I den här katalogen lägger du till alla bildfiler som du vill använda som bakgrund. I den här handledningen använder vi en fil med namnet background.png, som kommer att ha den fullständiga sökvägen polls/static/polls/images/background.png.

\n

Lägg sedan till en referens till din bild i din stilmall (polls/static/polls/style.css):

\n
polls/static/polls/style.css
\n
Css
body {\n    background: white url("images/background.png") no-repeat;\n}\n
\n

Ladda om http://localhost:8000/polls/ och du bör se bakgrunden laddad längst upp till vänster på skärmen.

\n\n

Dessa är de grundläggande. För mer information om inställningar och andra bitar som ingår i ramverket, se the static files howto och the staticfiles reference. Deploying static files diskuterar hur man använder statiska filer på en riktig server.

\n

När du känner dig bekväm med de statiska filerna kan du läsa del 7 av denna handledning för att lära dig hur du anpassar Djangos automatiskt genererade administratörssida.

\n
","rootId":"writing-your-first-django-app-part-6","toc":[{"title":"Anpassa din apps utseende och känsla","anchor":"customize-your-app-s-look-and-feel","children":[]},{"title":"Lägga till en bakgrundsbild","anchor":"adding-a-background-image","children":[]}],"breadcrumbs":[{"docname":"intro/index","title":"Kom igång","url":"/sv/5.2/intro/"}],"prev":{"docname":"intro/tutorial05","title":"Skriva din första Django-app, del 5","url":"/sv/5.2/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"Skriva din första Django-app, del 7","url":"/sv/5.2/intro/tutorial07/"},"formats":{"html":"/sv/5.2/intro/tutorial06/","markdown":"/sv/5.2/intro/tutorial06.md","json":"/sv/5.2/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/5.2.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/sv/5.2/intro/tutorial06/","inVersions":["6.1","6.0","5.2"],"inLocales":["en","sv","zh-hans","ga","fr","ja","id","it","pt-br","ko","es","el","pl"]}