Verbessern Sie das Erscheinungsbild Ihrer Django-App, indem Sie eine personalisierte 404-Fehlerseite entwickeln, anstatt sich auf die einfache Standardseite zu verlassen.

Fehlerseiten kommen bei Webanwendungen häufig vor. Django-Mitwirkende haben für einige dieser Fehler Standardseiten bereitgestellt, beispielsweise für den Fehler 404 (Nicht gefunden). Als Entwickler ist es jedoch am besten, eine Fehlerseite zu haben, die den Designprinzipien der übrigen Webanwendung folgt.

Erstellen einer benutzerdefinierten 404-Seite in Django

Der 404-Fehler ist Teil von mehreren HTTP-Statuscodes Wird vom Browser verwendet, um die Serverantwort auf Browseranfragen eines Benutzers anzuzeigen. Django stellt Standardvorlagen für einige dieser Statuscodes bereit, und die standardmäßige 404-Fehlerseite in Django sieht folgendermaßen aus:

Das obige Bild sieht nicht schön aus und die meisten Unternehmen akzeptieren es nicht ohne weiteres auf ihrer Website. Um diese Seite in eine benutzerdefinierte 404-Seite Ihrer Wahl zu ändern, befolgen Sie die unten aufgeführten Schritte.

instagram viewer

Schritt 1: Erstellen Sie eine Ansicht zur Behandlung des 404-Fehlers

Öffne dein Ansichten.py Datei und erstellen Sie eine Ansicht für die 404-Fehlerseite. Diese Ansicht sollte eine Vorlage mit dem Design für Ihre benutzerdefinierte 404-Fehlerseite zurückgeben. Hier ist eine einfache Django-Ansicht, die Sie in Ihrem Projekt verwenden können:

aus django.shortcuts importieren machen
# benutzerdefinierte 404-Ansicht
defcustom_404(Anfrage, Ausnahme):
zurückkehren rendern (Anfrage, '404.html', Status=404)

Der obige Codeausschnitt ist ein Python-Funktion (in diesem Fall vorzugsweise Django-Ansicht genannt), die zwei Funktionsargumente akzeptiert; Anfrage, Und Ausnahme. Das zweite Argument –Ausnahme– ermöglicht Ihnen den Zugriff auf das Ausnahmeobjekt, das den 404-Fehler ausgelöst hat.

Sie sollten das ersetzen „404.html“ in der obigen Ansicht mit dem korrekten Pfad zu Ihrer HTML-Vorlagenseite mit Fehler 404.

Schritt 2: Erstellen Sie eine Vorlage für Ihren 404-Fehler

Erstellen Sie eine neue HTML-Datei, die Ihr individuelles Design für die 404-Fehlerseite enthält. Das Design sollte mit dem Rest Ihrer Bewerbung übereinstimmen. Hier ist eine einfache HTML-Vorlage, die Sie in Ihrem Projekt verwenden können. Sie sollten diese Vorlage nach Belieben ändern:

 404.html-Vorlage 
html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“>
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“>
<Titel>404 Seite nicht gefundenTitel>
<Verknüpfung
 Bootstrap importieren 
 href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 rel="stylesheet" 
 Integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
 crossorigin="anonymous">
 Benutzerdefinierte CSS 
<Stil>
 Körper {
 Anzeige: Flex;
 Flexrichtung: Spalte;
 rechtfertigen-Inhalt: Mitte;
 align-items: center;
 Höhe: 100 Vh;
 Schriftfamilie: Arial, serifenlos;
 }
 .container {
 Textausrichtung: Mitte;
 maximale Breite: 600 Pixel;
 }


 .emoji {
 Schriftgröße: 8rem;
 Rand unten: 20px;
 }


 h1 {
 Schriftgröße: 3rem;
 Rand unten: 20px;
 }


 P {
 Schriftgröße: 1,5rem;
 Rand unten: 20px;
 }
 .btn {
 Schriftgröße: 1,25rem;
 Polsterung: 10px 20px;
 }
Stil>
Kopf>
<Körper>
<divKlasse="Container">
<divKlasse=„Emoji“>😕div>
<h1>Hoppla! Seite nicht gefundenh1>
<P>Wir konnten die von Ihnen gesuchte Seite nicht finden.P>
<AKlasse=„btn btn-primär“href="/">Geh zurück nach hauseA>
div>
Körper>
html>

Schritt 3: Ändern Sie die URL-Datei Ihres Projekts

Auf Ihrer Projektebene (wo Ihre Settings.py Datei ist), öffnen Sie Ihre urls.py Datei und verweisen Sie den Fehler-404-Handler auf die Ansicht, die Sie zur Behandlung des 404-Fehlers erstellt haben. Der Fehler-404-Handler wird aufgerufen handler404. Darauf hinweisen handler404 Ihrer Ansicht nach sollten Sie diesem Format folgen:

handler404 = 'app_name.views.custom_404_view_name'

Wenn Ihre App aufgerufen wird Rezept, und die Ansicht wird aufgerufen custom_404, dann sollten Sie das obige Format wie folgt ändern:

handler404 = 'recipe.views.custom_404'

Stellen Sie sicher, dass Sie dies auf Projektebene und nicht auf App-Ebene tun. Es gibt Unterschiede zwischen einem Projekt und einer App in Django.

Schritt 4: Testen Sie Ihre neue Fehler-404-Seite

Um Ihre neue Fehlerseite zu testen, starten Sie Ihren Entwicklungsserver und navigieren Sie zu einer nicht vorhandenen Seite in Ihrer Anwendung. Sie können Ihren Server starten, indem Sie diesen Befehl in Ihrem Befehlszeilentool (CLI) ausführen:

python manage.py runserver

Damit der obige Befehl funktioniert, müssen Sie sich im Stammverzeichnis Ihres Projekts befinden, d. h. in dem Ordner, in dem sich Ihre Dateien befinden manage.py Datei lebt.

Sobald Ihr Server gestartet ist, testen Sie Ihre benutzerdefinierte 404-Seite, indem Sie zu einer nicht vorhandenen Seite navigieren, z http://127.0.0.1:8000/hello. Wenn Sie alles richtig gemacht haben, sollte Ihre benutzerdefinierte 404-Fehlerseite angezeigt werden.

Wenn Ihre benutzerdefinierte 404-Fehlerseite nicht angezeigt wird, sollten Sie Ihre Ansichten überprüfen, um sicherzustellen, dass Sie den richtigen Pfad zu Ihrer HTML-Vorlage in geschrieben haben machen() Funktion, da dies ein häufiges Problem ist.

Benutzerdefinierte Fehlerseiten sorgen für eine bessere Benutzererfahrung

Eine benutzerdefinierte Fehlerseite in Ihrer Anwendung verbessert die Erfahrung Ihrer Benutzer, wenn sie auf Fehler stoßen. Anstatt eine allgemeine Fehlermeldung anzuzeigen, kann eine benutzerdefinierte Fehlerseite spezifischere Informationen zum Fehler bereitstellen und mögliche Lösungen vorschlagen.

Dies kann Benutzern helfen, zu verstehen, was schief gelaufen ist und wie sie es beheben können. Dadurch wird Frustration reduziert und ihr Vertrauen in Ihre Anwendung gestärkt. Sie können die Seite auch inklusiv gestalten, indem Sie Barrierefreiheitsfunktionen hinzufügen.