Scrivere la tua prima applicazione in Django, parte 6Link to this heading

Questo tutorial inizia da dove Tutorial 5 è finito. Abbiamo costruito un’applicazione Web-poll testata, e ora andremo ad aggiungere un foglio di stile e un’immagine.

Insieme all’HTML generato dal server, le applicazioni web di solito hanno bisogno di servire altri file – come immagini, JavaScript, o CSS – necessari per generare la pagina web in completo. In Django, ci riferiamo a questi file chiamandoli «file statici».

Per piccoli progetti, questo non è un grosso problema, perchè puoi tenere i file statici ovunque il tuo web server possa trovarli. Comunque, in progetti più grandi – soprattutto in quelli co posti da molte app – gestire più gruppi di file statici generati da ogni applicazione inizia a diventare complesso.

Questo è il motivo per cui serve django.contrib.staticfiles: colleziona file statici da ogni applicazione (e da ogni altro posto che specifichi) in una singola destinazione che può essere facilmente servita in produzione.

Personalizza l’aspetto e il design della tua applicazioneLink to this heading

Innanzitutto, crea una directory chiamata static nella tua directory polls. Django cercherà i file statici lì, in modo simile a come Django trova i modelli all’interno di polls/templates/.

L’impostazione STATICFILES_FINDERS di Django contiene una lista di «cercatori» che sanno come trovare i file statici da diverse fonti. Uno dei predefiniti è AppDirectoriesFinder, che cerca in una sottodirectory chiamata «static» per ciascuna delle app inserite in INSTALLED_APPS, come quella in polls che abbiamo appena creato. Il sito admin usa la stessa struttura di directory per i suoi file statici.

Dentro la directory static che hai appena creato, crea un’altra directory chiamata polls, e dentro quest’ultima crea un file chiamato style.css. In altre parole, il tuo foglio di stile dovrebbe essere in polls/static/polls/style.css. Per come funziona AppDirectoriesFinder, potrai riferirti a questo file statico in Django semplicemente come polls/style.css, in modo analogo a come ti riferisci ai percorsi per i template.

Inserisci il seguente codice in quel foglio di stile (polls/static/polls/style.css):

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

Poi, aggiungi il seguente codice all’inizio di polls/templates/polls/index.html:

polls/templates/polls/index.html
Django template
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

Il template tag {% static %} genera l’URL assoluto dei file statici.

Questo è tutto quello che devi fare per lo sviluppare.

Avvia il server (o riavvialo se è già in esecuzione):

Linux / macOS

Shell
$ python manage.py runserver

Windows

Windows
...\> py manage.py runserver

Ricarica http://localhost:8000/polls/ e dovresti vedere che i link delle domande sono verdi ( stile Django! ) il che significa che il tuo foglio di stile è stato caricato correttamente.

Aggiunta di un’immagine di sfondoLink to this heading

Successivamente, creeremo una sottocartella per le immagini. Crea una sottocartella dentro la cartella polls/static/polls/. Dentro questa cartella, metti un’immagine chiamata background.gif. In altre parole, metti la tua immagine dentro polls/static/polls/images/background.gif.

Quindi, aggiungi al tuo foglio di stile (polls/static/polls/style.css):

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

Ricarica http://localhost:8000/polls/ e dovresti vedere lo sfondo caricato in alto a sinistra dello schermo.

Queste sono le basi. Per maggiori dettagli sulla configurazione e altri particolari del framework vedi l’howto dei file statici e la guida di riferimento di staticfiles. Distribuire i file statici spiega invece come usare i file statici su un server reale.

Quando ti senti a tuo agio con i file statici, leggi la parte 7 di questo tutorial per imparare a personalizzare il sito admin che viene generato automaticamente da Django.