Βελτιώστε την εμφάνιση της εφαρμογής Django αναπτύσσοντας μια εξατομικευμένη σελίδα σφάλματος 404 αντί να βασίζεστε στην απλή προεπιλεγμένη.

Οι σελίδες σφαλμάτων είναι κοινές με τις εφαρμογές Ιστού. Οι συνεργάτες του Django έχουν παράσχει προεπιλεγμένες σελίδες για ορισμένα από αυτά τα σφάλματα, όπως το σφάλμα 404 (Δεν βρέθηκε). Αλλά ως προγραμματιστής, είναι καλύτερο να έχετε μια σελίδα σφάλματος που ακολουθεί τις αρχές σχεδιασμού της υπόλοιπης εφαρμογής Ιστού σας.

Δημιουργία προσαρμοσμένης σελίδας 404 στο Django

Το σφάλμα 404 είναι μέρος των πολλών Κωδικοί κατάστασης HTTP χρησιμοποιείται από το πρόγραμμα περιήγησης για να υποδείξει την απάντηση διακομιστή σε αιτήματα προγράμματος περιήγησης που υποβάλλονται από έναν χρήστη. Το Django παρέχει προεπιλεγμένα πρότυπα για ορισμένους από αυτούς τους κωδικούς κατάστασης και η προεπιλεγμένη σελίδα σφάλματος 404 στο Django μοιάζει με αυτό:

Η παραπάνω εικόνα δεν φαίνεται ωραία και οι περισσότερες εταιρείες δεν θα την αποδεχτούν εύκολα στον ιστότοπό τους. Για να αλλάξετε αυτήν τη σελίδα σε μια προσαρμοσμένη σελίδα 404 της επιλογής σας, θα πρέπει να ακολουθήσετε τα βήματα που αναφέρονται παρακάτω.

instagram viewer

Βήμα 1: Δημιουργήστε μια προβολή για να χειριστείτε το σφάλμα 404

Ανοιξε το δικό σου views.py αρχείο και δημιουργήστε μια προβολή για τη σελίδα σφάλματος 404. Αυτή η προβολή θα πρέπει να επιστρέψει ένα πρότυπο που περιέχει τη σχεδίαση για την προσαρμοσμένη σελίδα σφάλματος 404. Ακολουθεί μια απλή προβολή Django που μπορείτε να χρησιμοποιήσετε στο έργο σας:

από django.συντομεύσεις εισαγωγή καθιστώ
# προσαρμοσμένη προβολή 404
defcustom_404(αίτημα, εξαίρεση):
ΕΠΙΣΤΡΟΦΗ απόδοση (αίτημα, '404.html', κατάσταση=404)

Το παραπάνω απόσπασμα κώδικα είναι α Λειτουργία Python (κατά προτίμηση ονομάζεται προβολή Django σε αυτήν την περίπτωση) που παίρνει δύο ορίσματα συνάρτησης. αίτηση, και εξαίρεση. Το δεύτερο επιχείρημα -εξαίρεση—σας επιτρέπει να αποκτήσετε πρόσβαση στο αντικείμενο εξαίρεσης που ενεργοποίησε το σφάλμα 404.

Θα πρέπει να αντικαταστήσετε το "404.html" στην παραπάνω προβολή με τη σωστή διαδρομή προς τη σελίδα προτύπου HTML σφάλματος 404.

Βήμα 2: Δημιουργήστε ένα πρότυπο για το σφάλμα 404

Δημιουργήστε ένα νέο αρχείο HTML για να περιέχει την προσαρμοσμένη σχεδίασή σας για τη σελίδα σφάλματος 404. Ο σχεδιασμός πρέπει να είναι συνεπής με την υπόλοιπη εφαρμογή σας. Εδώ είναι ένα απλό πρότυπο HTML που μπορείτε να χρησιμοποιήσετε στο έργο σας. Θα πρέπει να τροποποιήσετε αυτό το πρότυπο όπως σας ταιριάζει:

 404.html πρότυπο 
html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<τίτλος>404 Η σελίδα δεν βρέθηκετίτλος>
<Σύνδεσμος
 εισαγωγή Bootstrap 
 href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 rel="φύλλο στυλ" 
 integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
 crossorigin="anonymous">
 προσαρμοσμένο css 
<στυλ>
 σώμα {
 οθόνη: flex;
 flex-direction: στήλη;
 justify-content: κέντρο;
 στοίχιση-στοιχεία: κέντρο;
 Ύψος: 100vh;
 γραμματοσειρά-οικογένεια: Arial, sans-serif;
 }
 .container {
 text-align: κέντρο;
 μέγιστο πλάτος: 600 px;
 }


 .emoji {
 μέγεθος γραμματοσειράς: 8rem;
 margin-bottom: 20px;
 }


 h1 {
 μέγεθος γραμματοσειράς: 3rem;
 margin-bottom: 20px;
 }


 Π {
 μέγεθος γραμματοσειράς: 1,5 rem;
 margin-bottom: 20px;
 }
 .btn {
 μέγεθος γραμματοσειράς: 1,25 rem;
 padding: 10px 20px;
 }
στυλ>
κεφάλι>
<σώμα>
<divτάξη="δοχείο">
<divτάξη="emoji">😕div>
<h1>Ωχ! Η σελίδα δεν βρέθηκεh1>
<Π>Δεν μπορέσαμε να βρούμε τη σελίδα που αναζητούσατε.Π>
<ένατάξη="btn btn-primary"href="/">Επιστρέψτε στο Homeένα>
div>
σώμα>
html>

Βήμα 3: Τροποποιήστε το αρχείο URL του έργου σας

Στο επίπεδο του έργου σας (όπου σας settings.py αρχείο είναι), ανοίξτε το δικό σας urls.py αρχείο και τοποθετήστε το πρόγραμμα χειρισμού σφάλματος 404 στην προβολή που δημιουργήσατε για να χειριστείτε το σφάλμα 404. Ο χειριστής σφάλματος 404 καλείται χειριστής404. Στο σημείο χειριστής404 κατά την άποψή σας, θα πρέπει να ακολουθήσετε αυτήν τη μορφή:

χειριστής404 = 'app_name.views.custom_404_view_name'

Εάν καλείται η εφαρμογή σας συνταγή, και η θέα λέγεται custom_404, τότε θα πρέπει να τροποποιήσετε την παραπάνω μορφή ως εξής:

χειριστής404 = 'recipe.views.custom_404'

Βεβαιωθείτε ότι το κάνετε αυτό σε επίπεδο έργου και όχι σε επίπεδο εφαρμογής. Υπάρχουν διαφορές μεταξύ ενός έργου και μιας εφαρμογής στο Django.

Βήμα 4: Δοκιμάστε τη νέα σελίδα σφάλματος 404

Για να δοκιμάσετε τη νέα σελίδα σφάλματος, ξεκινήστε τον διακομιστή ανάπτυξης και μεταβείτε σε μια ανύπαρκτη σελίδα στην εφαρμογή σας. Μπορείτε να ξεκινήσετε τον διακομιστή σας εκτελώντας αυτήν την εντολή στο εργαλείο γραμμής εντολών (CLI):

python manager.py runserver

Για να λειτουργήσει η παραπάνω εντολή, πρέπει να βρίσκεστε στον ριζικό κατάλογο του έργου σας, δηλαδή στον φάκελο όπου διαχείριση.py ζωές αρχείου.

Μόλις ξεκινήσει ο διακομιστής σας, δοκιμάστε την προσαρμοσμένη σας σελίδα 404 μεταβαίνοντας σε μια ανύπαρκτη σελίδα όπως http://127.0.0.1:8000/hello. Εάν τα έχετε κάνει όλα σωστά, θα πρέπει να δείτε την προσαρμοσμένη σελίδα σφάλματος 404.

Εάν η προσαρμοσμένη σελίδα σφάλματος 404 δεν εμφανίζεται, θα πρέπει να εξετάσετε το ενδεχόμενο να ελέγξετε τις προβολές σας για να βεβαιωθείτε ότι έχετε γράψει τη σωστή διαδρομή προς το πρότυπο HTML στο καθιστώ() λειτουργία, καθώς αυτό είναι ένα κοινό ζήτημα.

Οι προσαρμοσμένες σελίδες σφαλμάτων προσφέρουν καλύτερη εμπειρία χρήστη

Η ύπαρξη μιας προσαρμοσμένης σελίδας σφάλματος στην εφαρμογή σας θα βελτιώσει την εμπειρία των χρηστών σας όταν αντιμετωπίζουν σφάλματα. Αντί να εμφανίζεται ένα γενικό μήνυμα σφάλματος, μια προσαρμοσμένη σελίδα σφάλματος μπορεί να παρέχει πιο συγκεκριμένες πληροφορίες σχετικά με το σφάλμα και να προτείνει πιθανές λύσεις.

Αυτό μπορεί να βοηθήσει τους χρήστες να κατανοήσουν τι πήγε στραβά και πώς να το διορθώσουν, μειώνοντας την απογοήτευση και αυξάνοντας την εμπιστοσύνη τους στην εφαρμογή σας. Θα μπορείτε επίσης να κάνετε τη σελίδα χωρίς αποκλεισμούς προσθέτοντας λειτουργίες προσβασιμότητας.