Forbedre utseendet til Django-appen din ved å utvikle en personlig 404-feilside i stedet for å stole på den vanlige standarden.

Feilsider er vanlige med nettapplikasjoner. Django-bidragsytere har gitt standardsider for noen av disse feilene, for eksempel 404 (Ikke funnet)-feilen. Men som utvikler er det best å ha en feilside som følger designprinsippene til resten av nettapplikasjonen din.

Opprette en tilpasset 404-side i Django

404-feilen er en del av flere HTTP-statuskoder brukes av nettleseren for å indikere serverrespons på nettleserforespørsler fra en bruker. Django gir standardmaler for noen av disse statuskodene, og standard 404 feilside i Django ser slik ut:

Bildet ovenfor ser ikke bra ut, og de fleste selskaper vil ikke uten videre godta det på nettsiden deres. For å endre denne siden til en egendefinert 404-side etter eget valg, bør du følge trinnene nedenfor.

Trinn 1: Opprett en visning for å håndtere 404-feilen

Åpne din views.py fil og opprett en visning for 404-feilsiden. Denne visningen skal returnere en mal som inneholder designet for din egendefinerte 404-feilside. Her er en enkel Django-visning du kan bruke i prosjektet ditt:

fra django.snarveier import gjengi

# tilpasset 404-visning
defcustom_404(forespørsel, unntak):
komme tilbake gjengi (forespørsel, '404.html', status=404)

Kodebiten ovenfor er en Python funksjon (helst kalt en Django-visning i dette tilfellet) som tar to funksjonsargumenter; be om, og unntak. Det andre argumentet -unntak— lar deg få tilgang til unntaksobjektet som utløste 404-feilen.

Du bør erstatte «404.html» i visningen ovenfor med den riktige banen til feil 404 HTML-malsiden.

Trinn 2: Lag en mal for 404-feilen din

Opprett en ny HTML-fil som inneholder det tilpassede designet for 404-feilsiden. Designet skal være i samsvar med resten av søknaden din. Her er en enkel HTML-mal du kan bruke i prosjektet ditt. Du bør endre denne malen etter eget ønske:

 404.html mal 
html>
<htmllang="no">
<hode>
<metategnsett="UTF-8">
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0">
<tittel>404 Side Ikke Funnettittel>
<link
importer 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">
tilpasset css
<stil>
kropp {
display: flex;
flex-retning: kolonne;
rettferdiggjøre-innhold: senter;
align-items: center;
høyde: 100vh;
font-familie: Arial, sans-serif;
}

.container {
tekst-align: center;
maks-bredde: 600px;
}

.emoji {
skriftstørrelse: 8rem;
marg-bunn: 20px;
}

h1 {
skriftstørrelse: 3rem;
marg-bunn: 20px;
}

p {
skriftstørrelse: 1,5rem;
marg-bunn: 20px;
}

.btn {
skriftstørrelse: 1,25rem;
polstring: 10px 20px;
}
stil>
hode>
<kropp>
<divklasse="container">
<divklasse="emoji">😕div>
<h1>Oops! Side ikke funneth1>
<s>Vi fant ikke siden du lette etter.s>
<enklasse="btn btn-primær"href="/">Gå tilbake til Hjemen>
div>
kropp>
html>

Trinn 3: Endre prosjektets URL-fil

På ditt prosjektnivå (hvor din settings.py filen er), åpne din urls.py fil og pek feil 404-behandleren til visningen du opprettet for å håndtere 404-feilen. Feil 404-behandleren kalles handler404. Å peke handler404 etter ditt syn, bør du følge dette formatet:

handler404 = 'app_name.views.custom_404_view_name'

Hvis appen din kalles oppskrift, og utsikten heter custom_404, bør du endre formatet ovenfor slik:

handler404 = 'recipe.views.custom_404'

Sørg for at du gjør dette på prosjektnivå og ikke på appnivå. Det er forskjeller mellom et prosjekt og en app i Django.

Trinn 4: Test din nye feil 404-side

For å teste den nye feilsiden, start utviklingsserveren og naviger til en ikke-eksisterende side i applikasjonen. Du kan starte serveren din ved å kjøre denne kommandoen i kommandolinjeverktøyet (CLI):

python manage.py runserver

For at kommandoen ovenfor skal fungere, må du være i prosjektets rotkatalog, dvs. mappen der manage.py filens liv.

Når serveren din starter, test din egendefinerte 404-side ved å navigere til en ikke-eksisterende side som f.eks. http://127.0.0.1:8000/hello. Hvis du har gjort alt riktig, bør du se din egendefinerte 404-feilside.

Hvis din egendefinerte 404-feilside ikke vises, bør du vurdere å sjekke visningene dine for å være sikker på at du skrev riktig bane til HTML-malen i gjengi() funksjon, da dette er et vanlig problem.

Egendefinerte feilsider gir bedre brukeropplevelse

Å ha en egendefinert feilside i applikasjonen din vil forbedre opplevelsen til brukerne dine når de støter på feil. I stedet for å se en generisk feilmelding, kan en tilpasset feilside gi mer spesifikk informasjon om feilen og foreslå mulige løsninger.

Dette kan hjelpe brukere med å forstå hva som gikk galt og hvordan de kan fikse det, redusere frustrasjon og øke tilliten til applikasjonen din. Du vil også kunne gjøre siden inkluderende ved å legge til tilgjengelighetsfunksjoner.