Video Corso Django 1.11 - Programmare in Python

Crea il Tuo Blog con Django 1.11 e Bootstrap 3.3.7

12: File Statici

Per Static Files, 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 un pó da caso a caso.

Per fare in modo che l'applicazione staticfiles possa trovare i file statici, definiamo una variabile STATICFILES_DIRS da dentro 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 ho 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 posso usare il file in base.html in questo modo:

<!--DOCTYPE html -->
<html>
    {% load static %}

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

In questo primo esempio ho salvato un'immagine chiamata django_movie.jpg all'indirizzo "Desktop/blog/myblog/posts/static/posts/img/django_movie.jpg", e la richiamo da dentro a post_singolo.html in questo modo:

{% extends "base.html" %}
{% load static %}

    <title> {% block head_title %}{{object.titolo}} | {{block.super}}{% endblock head_title %} </title>

    {% block content %}

    <h1>{{ object.titolo }}</h1>
        <img src="{% static 'posts/img/django_movie.jpg' %}" />
        <p>{{ object.contenuto }}</p>
        <h4>{{ object.data }}</h4>

    {% endblock content %}
Menu della Serie