{"title":"Γράφοντας το πρώτο σας Django app, μέρος 6","version":"1.10","locale":"el","docname":"intro/tutorial06","url":"/el/1.10/intro/tutorial06/","canonical":"https://djangodocs.dev/el/1.10/intro/tutorial06/","summary":"Ο οδηγός αυτός ξεκινά εκεί που τελειώνει ο οδηγός 5. Έχουμε φτιάξει μια γεμάτη με τεστ εφαρμογή ψηφοφορίας (Web-poll) και τώρα θα βελτιώσουμε την εμφάνιση…","html":"

Γράφοντας το πρώτο σας Django app, μέρος 6Link to this heading#

\n

Ο οδηγός αυτός ξεκινά εκεί που τελειώνει ο οδηγός 5. Έχουμε φτιάξει μια γεμάτη με τεστ εφαρμογή ψηφοφορίας (Web-poll) και τώρα θα βελτιώσουμε την εμφάνιση της προσθέτοντας ένα stylesheet (CSS) και μια εικόνα.

\n

Πέρα από την HTML που παράγεται από τον server, τα web applications, σε γενικές γραμμές, χρειάζονται να κάνουν serve και πρόσθετα αρχεία — όπως εικόνες, γραμματοσειρές, JavaScript αρχεία, CSS κλπ — αρχεία απαραίτητα ούτως ώστε μια πλήρης ιστοσελίδα να γίνει render. Στο Django, αναφερόμαστε σε αυτά τα αρχεία ως «static files».

\n

Για τα μικρής κλίμακας projects, αυτό δεν είναι και πολύ σημαντικό, επειδή μπορείτε να κρατήσετε αυτά τα αρχεία (τα οποία δεν θα είναι πολλά) κάπου που ο web server σας να μπορεί να τα βρει. Ωστόσο, στα μεγαλύτερης κλίμακας projects (ειδικά εκείνων που αποτελούνται από πολλά apps) που έχουν να κάνουν με πολλαπλά σετ από static files, όπου το κάθε app έχει το δικό του σετ, τα πράγματα αρχίζουν να δυσκολεύουν.

\n

Αυτό ακριβώς κάνει το django.contrib.staticfiles: συγκεντρώνει όλα τα static files από κάθε εφαρμογή σας (και οποιοδήποτε άλλο μέρος εσείς καθορίσετε) σε μια τοποθεσία (που εσείς πάλι καθορίζετε) από την οποία μπορούν εύκολα να γίνουν served σε παραγωγικό περιβάλλον (production).

\n
\n

Προσαρμογή της εμφάνισης της εφαρμογής σαςLink to this heading#

\n

Πρώτα, δημιουργήστε ένα φάκελο με το όνομα static μέσα στο φάκελο polls (μέσα, δηλαδή, στην εφαρμογή σας). Το Django θα ψάξει για τυχόν static files μέσα εκεί, ομοίως όπως ψάχνει για templates μέσα στο φάκελο polls/templates/.

\n

Η ρύθμιση του Django STATICFILES_FINDERS περιέχει μια λίστα από finders οι οποίοι γνωρίζουν πως να βρίσκουν τα static files από διάφορα μέρη. Μια από τις προεπιλογές είναι η AppDirectoriesFinder η οποία κοιτάζει να βρει έναν υπό-φάκελο με το όνομα «static» σε κάθε εφαρμογή η οποία συγκαταλέγεται στη λίστα της ρύθμισης INSTALLED_APPS (όπως ο υπό-φάκελος που μόλις δημιουργήσαμε μέσα στην εφαρμογή polls). Το admin site χρησιμοποιεί την ίδια αρχιτεκτονική φακέλων για τα δικά του static files.

\n

Μέσα στον φάκελο static που μόλις δημιουργήσατε, δημιουργήστε άλλο έναν φάκελο με το όνομα polls και μέσα σε αυτόν δημιουργήστε ένα αρχείο με το όνομα style.css. Με άλλα λόγια, το stylesheet θα πρέπει να βρίσκεται στη διαδρομή polls/static/polls/style.css. Λόγω του τρόπου λειτουργίας του AppDirectoriesFinder staticfile finder, μπορείτε να αναφέρεστε στο αρχείο αυτό ως polls/style.css, παρόμοια με το πως αναφέρεστε στη διαδρομή (path) για τα templates σας.

\n\n

Τοποθετήστε τον ακόλουθο κώδικα στο αρχείο CSS (polls/static/polls/style.css):

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

Μετά, προσθέστε τα ακόλουθα στην αρχή του αρχείου polls/templates/polls/index.html:

\n
polls/templates/polls/index.html
Django template
{% load static %}\n\n<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />\n
\n

Το template tag {% static %} παράγει το absolute URL των static files.

\n

Αυτό χρειάζεστε, μόνο, για το development. Ανανεώστε τη σελίδα http://localhost:8000/polls/ και θα δείτε ότι τα question links είναι πράσινα (στυλ Django!), που σημαίνει ότι το stylesheet φορτώθηκε και διαβάστηκε επιτυχώς.

\n
\n
\n

Προσθέτοντας μια background-imageLink to this heading#

\n

Επόμενο βήμα είναι να δημιουργήσουμε έναν υπό-φάκελο για τις εικόνες μας. Δημιουργήστε, λοιπόν, ένα φάκελο με το όνομα images στη διαδρομή polls/static/polls/. Μέσα σε αυτό το φάκελο αποθηκεύστε μια εικόνα με το όνομα background.gif. Με άλλα λόγια το full path της εικόνας θα είναι το polls/static/polls/images/background.gif.

\n

Μετά προσθέστε στο CSS αρχείο σας τα παρακάτω (polls/static/polls/style.css):

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

Ανανεώστε τη σελίδα http://localhost:8000/polls/ και θα δείτε την εικόνα κάτω δεξιά στην οθόνη.

\n\n

Αυτά είναι τα βασικά. Για περισσότερες πληροφορίες σχετικά με τις ρυθμίσεις και άλλα εργαλεία τα οποία συμπεριλαμβάνονται στο Django δείτε στο άρθρο διαχείριση των static files και στο η εφαρμογή staticfiles. Το άρθρο production server και static files συζητά πως να χρησιμοποιήσετε τα static files σε ένα πραγματικό server.

\n

Όταν είστε εξοικειωμένοι με τα static files, διαβάστε το έβδομο μέρος αυτού του οδηγού για να μάθετε περισσότερα με την παραμετροποίηση του διαχειριστικού site του Django (admin site) το οποίο δημιουργείται αυτόματα.

\n
","rootId":"writing-your-first-django-app-part-6","toc":[{"title":"Προσαρμογή της εμφάνισης της εφαρμογής σας","anchor":"customize-your-app-s-look-and-feel","children":[]},{"title":"Προσθέτοντας μια background-image","anchor":"adding-a-background-image","children":[]}],"breadcrumbs":[{"docname":"intro/index","title":"Ξεκινώντας","url":"/el/1.10/intro/"}],"prev":{"docname":"intro/tutorial05","title":"Γράφοντας το πρώτο σας Django app, μέρος 5","url":"/el/1.10/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"Γράφοντας το πρώτο σας Django app, μέρος 7","url":"/el/1.10/intro/tutorial07/"},"formats":{"html":"/el/1.10/intro/tutorial06/","markdown":"/el/1.10/intro/tutorial06.md","json":"/el/1.10/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/1.10.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/el/1.10/intro/tutorial06/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10"],"inLocales":["en","fr","ja","id","pt-br","es","el","pl"]}