Hur man skapar en anpassad 404-felsida i Django

Felsidor är vanliga med webbapplikationer. Django-medarbetare har tillhandahållit standardsidor för några av dessa fel, till exempel 404-felet (hittades inte). Men som utvecklare är det bäst att ha en felsida som följer designprinciperna för resten av din webbapplikation.

Skapa en anpassad 404-sida i Django

404-felet är en del av flera HTTP-statuskoder används av webbläsaren för att indikera serversvar på webbläsarförfrågningar från en användare. Django tillhandahåller standardmallar för några av dessa statuskoder, och standard 404-felsidan i Django ser ut så här:

Ovanstående bild ser inte bra ut, och de flesta företag kommer inte att acceptera den på sin webbplats. För att ändra den här sidan till en anpassad 404-sida som du väljer, bör du följa stegen nedan.

Steg 1: Skapa en vy för att hantera 404-felet

Öppna din views.py fil och skapa en vy för 404-felsidan. Den här vyn bör returnera en mall som innehåller designen för din anpassade 404-felsida. Här är en enkel Django-vy som du kan använda i ditt projekt:

från django.shortcuts importera framställa
# anpassad 404-vy
defcustom_404(förfrågan, undantag):
lämna tillbaka rendera (begäran, "404.html", status=404)

Ovanstående kodavsnitt är en Python funktion (kallas helst en Django-vy i det här fallet) som tar två funktionsargument; begäran, och undantag. Det andra argumentet -undantag— låter dig komma åt undantagsobjektet som utlöste 404-felet.

Du bör byta ut "404.html" i ovanstående vy med rätt sökväg till din HTML-mallsida för fel 404.

Steg 2: Skapa en mall för ditt 404-fel

Skapa en ny HTML-fil som innehåller din anpassade design för 404-felsidan. Designen bör överensstämma med resten av din applikation. Här är en enkel HTML-mall som du kan använda i ditt projekt. Du bör ändra den här mallen som du tycker är lämplig:

 404.html mall 
html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">
<titel>404 Sidan hittades intetitel>
<länk
 importera Bootstrap 
 href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 rel="stylesheet" 
 integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
 crossorigin="anonym">
 Anpassad CSS 
<stil>
 kropp {
 display: flex;
 flex-riktning: kolumn;
 motivera-innehåll: center;
 align-items: center;
 höjd: 100vh;
 font-family: Arial, sans-serif;
 }
 .behållare {
 text-align: center;
 max-bredd: 600px;
 }
 .emoji {
 teckenstorlek: 8rem;
 margin-bottom: 20px;
 }
 h1 {
 teckenstorlek: 3rem;
 margin-bottom: 20px;
 }
 p {
 teckenstorlek: 1,5 rem;
 margin-bottom: 20px;
 }
 .btn {
 teckenstorlek: 1,25rem;
 stoppning: 10px 20px;
 }
stil>
huvud>
<kropp>
<divklass="behållare">
<divklass="emoji">😕div>
<h1>hoppsan! Sidan hittas inteh1>
<sid>Vi kunde inte hitta sidan du letade efter.sid>
<aklass="btn btn-primär"href="/">Gå tillbaka till Hema>
div>
kropp>
html>

Steg 3: Ändra ditt projekts URL-fil

På din projektnivå (där din settings.py filen är), öppna din urls.py fil och peka med fel 404-hanteraren till vyn du skapade för att hantera 404-felet. Hanteraren för fel 404 anropas hanterare404. Att peka hanterare404 enligt din åsikt bör du följa detta format:

hanterare404 = 'app_name.views.custom_404_view_name'

Om din app heter recept, och utsikten kallas custom_404, då bör du ändra formatet ovan så här:

hanterare404 = 'recipe.views.custom_404'

Se till att du gör detta på projektnivå och inte på appnivå. Det finns skillnader mellan ett projekt och en app i Django.

Steg 4: Testa din nya fel 404-sida

För att testa din nya felsida, starta din utvecklingsserver och navigera till en icke-existerande sida i din applikation. Du kan starta din server genom att köra det här kommandot i ditt kommandoradsverktyg (CLI):

python manage.py runserver

För att kommandot ovan ska fungera måste du vara i ditt projekts rotkatalog, det vill säga mappen där din hantera.py fil liv.

När din server startar testar du din anpassade 404-sida genom att navigera till en icke-existerande sida som t.ex. http://127.0.0.1:8000/hello. Om du har gjort allt korrekt bör du se din anpassade 404-felsida.

Om din anpassade 404-felsida inte visas bör du överväga att kontrollera dina vyer för att vara säker på att du skrev rätt sökväg till din HTML-mall i framställa() funktion, eftersom detta är ett vanligt problem.

Anpassade felsidor ger bättre användarupplevelse

Att ha en anpassad felsida i din applikation kommer att förbättra upplevelsen för dina användare när de stöter på fel. Istället för att se ett allmänt felmeddelande kan en anpassad felsida ge mer specifik information om felet och föreslå möjliga lösningar.

Detta kan hjälpa användare att förstå vad som gick fel och hur man åtgärdar det, minska frustration och öka deras förtroende för din applikation. Du kommer också att kunna göra sidan inkluderande genom att lägga till tillgänglighetsfunktioner.