Scrivere la tua prima applicazione in Django, parte 6

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.

Dove trovare aiuto:

Se hai difficoltà a completare questo tutorial, per favore vai alla sezione Getting Help delle FAQ.

Personalizza l’aspetto e il design della tua applicazione

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.

Namespacing dei file statici

Come per i template, potremmo semplicemente inserire i nostri file statici direttamente in polls/static (anziché creare un’altra sottodirectory polls), ma sarebbe certamente una cattiva idea. Django sceglierà il primo file statico che troverà con un nome che corrisponde, e se tu avessi un file statico con lo stesso nome in una app diversa, Django non saprebbe come distinguere fra i due. Dobbiamo essere in grado di puntare Django sul file corretto, ed il modo migliore per farlo è quello di inserirlo in un namespace. Cioè, inserendo questi file statici dentro un’altra directory che abbia come nome il nome della app stessa.

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

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

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

polls/templates/polls/index.html
{% 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):

$ python manage.py runserver
...\> 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 sfondo

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

Avvertimento

Il template tag {% static %}  non è disponibile per usarlo con file statici che non sono generati da Django, come i tuoi fogli di stile. Tu dovresti sempre usare i percorsi relativi per collegare i tuoi file statici tra loro, perchè poi puoi cambiare il STATIC_URL (usata da static template tag per generare le sue URLs)  senza dover modificare una serie di percorsi anche nei tuoi file statici

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.

Back to Top