12. File Statici
Con Static Files (in italiano file statici) ci riferiamo a componenti come immagini, JavaScript e CSS. Come possiamo leggere nella Documentazione Ufficiale sull'argomento, Django ci fornisce l'applicazione django.contrib.staticfiles già installata nel file settings.py per poter gestire questa tipologia di file in fase di sviluppo. Quanto DEBUG=True, i file vengono serviti automaticamente col comando runserver.
Tuttavia questo è estremamente sconsigliato per quanto riguarda la fase di produzione vera e propria, dovremo usare quindi un altro server come ad esempio nginx per farci servire questa tipologia di files. Alcuni provider, come ad esempio Digital Ocean, forniscono una configurazione già pronta ad accogliere la vostra applicazione. Considerando che si può impostare anche un CDN, ci sono diverse scuole di pensiero al riguardo, personalmente penso che dipenda da caso a caso.
Modifichiamo settings.py per impostare il percorso dei file statici
Per fare in modo che l'applicazione staticfiles possa trovare i file statici, definiamo una variabile STATICFILES_DIRS in settings.py:
# L'url dove potremo andare a vedere i nostri file static da browser
STATIC_URL = 'static/'
# Django si aspetterà di trovare files in una cartella chiamata "static" presente in BASE_DIR.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]Dovremo quindi utilizzare il tag {% load static %}: Questo ci consentirà di utilizzare i nostri file come immagini ecc all'interno dei nostri template.
Considerando che abbiamo salvato un file css all'indirizzo: "mydjangoblog/mydjangoblog/static/css/blog.css", quindi dentro a una sottocartella chiamata css presente nella cartella definita con STATICFILES_DIRS, allora possiamo usare il file in base.html in questo modo:
{% load static %}
<!--DOCTYPE html -->
<html>
<title>{% block head_title %}My Django Blog{% endblock head_title%}</title>
<link rel="stylesheet" href="{% static 'css/blog.css' %}" />
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</body>
</html>Inoltre, possiamo anche aggiungere i nostri file da dentro a ciascuna singola applicazione, ad esempio:
nome_app/static/nome_app/img
nome_app/static/nome_app/css
nome_app/static/nome_app/img/js
Tenendo in considerazione che il file ad essere servito da Django sarà il primo file a combaciare il nome richiesto, è bene scegliere con cura dove si vogliono salvare i propri file.
Creiamo un file CSS e aggiungiamo un colore e un font per i nostri H1:
h1, h1 a {
color: green;
font-family: Verdana, sans-serif;
}Aggiungiamo un'immagine all'interno dei post
In questo primo esempio ho salvato un'immagine chiamata django_movie.jpg all'indirizzo /mydjangoblog/static/img/django_movie.jpg: richiamiamola da post_singolo.html in questo modo:
{% extends "base.html" %}
{% load static %}
{% block head_title %}{{ object.titolo }} | {{ block.super }}{% endblock head_title %}
{% block content %}
<h1>{{ object.titolo }}</h1>
<img src="{% static 'img/django_movie.jpg' %}" />
<p>{{ object.contenuto }}</p>
<h4>{{ object.data }}</h4>
{% endblock content %}Se visitiamo l'indirizzo di un post vedremo l'immagine che abbiamo messo nel template e il titolo verde:
Nella prossima lezione inizieremo ad implementare Bootstrap nel nostro progetto.