Γράφοντας το πρώτο σας Django app, μέρος 6¶
Ο οδηγός αυτός ξεκινά εκεί που τελειώνει ο οδηγός 5. Έχουμε φτιάξει μια γεμάτη με τεστ εφαρμογή ψηφοφορίας (Web-poll) και τώρα θα βελτιώσουμε την εμφάνιση της προσθέτοντας ένα stylesheet (CSS) και μια εικόνα.
Πέρα από την HTML που παράγεται από τον server, τα web applications, σε γενικές γραμμές, χρειάζονται να κάνουν serve και πρόσθετα αρχεία — όπως εικόνες, γραμματοσειρές, JavaScript αρχεία, CSS κλπ — αρχεία απαραίτητα ούτως ώστε μια πλήρης ιστοσελίδα να γίνει render. Στο Django, αναφερόμαστε σε αυτά τα αρχεία ως “static files”.
Για τα μικρής κλίμακας projects, αυτό δεν είναι και πολύ σημαντικό, επειδή μπορείτε να κρατήσετε αυτά τα αρχεία (τα οποία δεν θα είναι πολλά) κάπου που ο web server σας να μπορεί να τα βρει. Ωστόσο, στα μεγαλύτερης κλίμακας projects (ειδικά εκείνων που αποτελούνται από πολλά apps) που έχουν να κάνουν με πολλαπλά σετ από static files, όπου το κάθε app έχει το δικό του σετ, τα πράγματα αρχίζουν να δυσκολεύουν.
Αυτό ακριβώς κάνει το django.contrib.staticfiles: συγκεντρώνει όλα τα static files από κάθε εφαρμογή σας (και οποιοδήποτε άλλο μέρος εσείς καθορίσετε) σε μια τοποθεσία (που εσείς πάλι καθορίζετε) από την οποία μπορούν εύκολα να γίνουν served σε παραγωγικό περιβάλλον (production).
Προσαρμογή της εμφάνισης της εφαρμογής σας¶
Πρώτα, δημιουργήστε ένα φάκελο με το όνομα static μέσα στο φάκελο polls (μέσα, δηλαδή, στην εφαρμογή σας). Το Django θα ψάξει για τυχόν static files μέσα εκεί, ομοίως όπως ψάχνει για templates μέσα στο φάκελο polls/templates/.
Η ρύθμιση του Django STATICFILES_FINDERS περιέχει μια λίστα από finders οι οποίοι γνωρίζουν πως να βρίσκουν τα static files από διάφορα μέρη. Μια από τις προεπιλογές είναι η AppDirectoriesFinder η οποία κοιτάζει να βρει έναν υπό-φάκελο με το όνομα “static” σε κάθε εφαρμογή η οποία συγκαταλέγεται στη λίστα της ρύθμισης INSTALLED_APPS (όπως ο υπό-φάκελος που μόλις δημιουργήσαμε μέσα στην εφαρμογή polls). Το admin site χρησιμοποιεί την ίδια αρχιτεκτονική φακέλων για τα δικά του static files.
Μέσα στον φάκελο static που μόλις δημιουργήσατε, δημιουργήστε άλλο έναν φάκελο με το όνομα polls και μέσα σε αυτόν δημιουργήστε ένα αρχείο με το όνομα style.css. Με άλλα λόγια, το stylesheet θα πρέπει να βρίσκεται στη διαδρομή polls/static/polls/style.css. Λόγω του τρόπου λειτουργίας του AppDirectoriesFinder staticfile finder, μπορείτε να αναφέρεστε στο αρχείο αυτό ως polls/style.css, παρόμοια με το πως αναφέρεστε στη διαδρομή (path) για τα templates σας.
Static file namespacing
Όπως ακριβώς συμβαίνει με τα templates, θα μπορούσαμε να αποθηκεύαμε τα static files μας απ’ ευθείας στο φάκελο polls/static (παρά να δημιουργήσουμε άλλον έναν φάκελο μέσα εκεί με το όνομα polls), αλλά δεν θα ήταν καλή ιδέα. Το Django θα επιλέξει το πρώτο static file που θα βρει το οποίο θα ταιριάξει στο όνομα που ψάχνει. Αν έχετε ένα static file με το ίδιο όνομα σε μια άλλη εφαρμογή, τότε το Django δεν θα μπορέσει να διαχωρίσει ποια από τα δύο να χρησιμοποιήσει. Χρειαζόμαστε ένα τρόπο να καθοδηγήσουμε το Django στο σωστό αρχείο. Ο ευκολότερος τρόπος να το κάνουμε είναι να εφαρμόσουμε την τεχνική του namespacing στα static files. Δηλαδή, να τοποθετούμε αυτά τα static files μέσα σε άλλον έναν φάκελο με το ίδιο όνομα με αυτό της εφαρμογής.
Τοποθετήστε τον ακόλουθο κώδικα στο αρχείο CSS (polls/static/polls/style.css):
li a {
color: green;
}
Μετά, προσθέστε τα ακόλουθα στην αρχή του αρχείου polls/templates/polls/index.html:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />
Το template tag {% static %} παράγει το absolute URL των static files.
Αυτό χρειάζεστε, μόνο, για το development. Ανανεώστε τη σελίδα http://localhost:8000/polls/ και θα δείτε ότι τα question links είναι πράσινα (στυλ Django!), που σημαίνει ότι το stylesheet φορτώθηκε και διαβάστηκε επιτυχώς.
Προσθέτοντας μια background-image¶
Επόμενο βήμα είναι να δημιουργήσουμε έναν υπό-φάκελο για τις εικόνες μας. Δημιουργήστε, λοιπόν, ένα φάκελο με το όνομα images στη διαδρομή polls/static/polls/. Μέσα σε αυτό το φάκελο αποθηκεύστε μια εικόνα με το όνομα background.gif. Με άλλα λόγια το full path της εικόνας θα είναι το polls/static/polls/images/background.gif.
Μετά προσθέστε στο CSS αρχείο σας τα παρακάτω (polls/static/polls/style.css):
body {
background: white url("images/background.gif") no-repeat right bottom;
}
Ανανεώστε τη σελίδα http://localhost:8000/polls/ και θα δείτε την εικόνα κάτω δεξιά στην οθόνη.
Προειδοποίηση
Είναι προφανές ότι το template tag {% static %} δεν θα είναι διαθέσιμο για static files τα οποία δεν παράγονται από το Django. Θα πρέπει πάντα να χρησιμοποιείτε relative paths για να συνδέσετε μεταξύ τους τα static files. Αν το κάνετε αυτό θα μπορείτε, έπειτα, να αλλάζετε τη ρύθμιση STATIC_URL (η οποία χρησιμοποιείται από το static template tag για να δημιουργεί τα URLs) χωρίς να χρειαστεί να αλλάζετε ένα σωρό από μονοπάτια (paths) στα static files σας. Με άλλα λόγια μην χρησιμοποιείτε absolute paths για τα static files. Η δουλειά του {% static %} είναι να μετατρέπει τα relative paths σε absolute URLs.
Αυτά είναι τα βασικά. Για περισσότερες πληροφορίες σχετικά με τις ρυθμίσεις και άλλα εργαλεία τα οποία συμπεριλαμβάνονται στο Django δείτε στο άρθρο διαχείριση των static files και στο η εφαρμογή staticfiles. Το άρθρο production server και static files συζητά πως να χρησιμοποιήσετε τα static files σε ένα πραγματικό server.
Όταν είστε εξοικειωμένοι με τα static files, διαβάστε το έβδομο μέρος αυτού του οδηγού για να μάθετε περισσότερα με την παραμετροποίηση του διαχειριστικού site του Django (admin site) το οποίο δημιουργείται αυτόματα.
