El error 404 se genera cuando la URL solicitada no existe o aún no se ha definido. Esto se conoce comúnmente como error de página no existente . Para manejar las requests de las URL no definidas en un sitio web, se crea una página de error. Si el usuario solicita este tipo de URL, esta página de error se ejecuta para reflejar al usuario que la página no existe y puede redirigirlo a otra URL como la página de inicio. Mediante esta técnica también podemos mejorar el SEO de nuestra web.
En este artículo, crearemos una página de error 404 simple para nuestra aplicación.
Implementación:
- Primero, vaya al archivo url.py de su aplicación y coloque el siguiente código:
Python3
from django.contrib import admin
from django.urls import include, path
# add the following path in the
# url patterns
urlpatterns = [
path('', include('pages.urls'))
]
# add a flag for
# handling the 404 error
handler404 = 'pages.views.error_404_view'
- Después de eso, abra view.py de su aplicación y agregue el siguiente código:
Python3
from django.conf import settings from django.shortcuts import redirect def error_404_view(request, exception): # we add the path to the the 404.html file # here. The name of our HTML file is 404.html return render(request, '404.html')
- Después de eso, solo necesita agregar la página HTML a su página de plantilla y su trabajo estará terminado.
HTML
{% load static %}
<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js oldie ie8" lang="en">
<![endif]-->
<!--[if IE 9 ]>
<html class="no-js oldie ie9" lang="en">
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Web Developer</title>
<link href="{% static 'img/Demo/favicon.png' %}" rel="shortcut icon"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Alphaandroid - Creative Agency of web developers">
<meta name="author" content="Pavan And Romil">
<meta name="keywords" content="Web developer (using coding), Digital Marketing" />
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="{% static 'css/error404/base.css' %}">
<link rel="stylesheet" href="{% static 'css/error404/main.css' %}">
<link rel="stylesheet" href="{% static 'css/error404/vendor.css' %}">
<!-- script
================================================== -->
<script src="{% static 'js/error404/modernizr.js' %}"></script>
<!-- favicons
================================================== -->
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MRJ5QRJ');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MRJ5QRJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- header
================================================== -->
{% comment %}
<header class="main-header">
<div class="row">
<div class="logo">
<a href="index.html">Alpha Android</a>
</div>
</div>
<a class="menu-toggle" href="#"><span>Menu</span></a>
</header>
<!-- /header --> {% endcomment %}
<!-- navigation
================================================== -->
{% comment %}
<nav id="menu-nav-wrap">
<h5>Site Pages</h5>
<ul class="nav-list">
<li><a href="/" title="">Home</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
<h5>Some Text</h5>
<p>Lorem ipsum Non non Duis adipisicing pariatur eu enim Ut in aliqua dolor esse sed est in sit exercitation eiusmod aliquip consequat.</p>
</nav>
{% endcomment %}
<!-- main content
================================================== -->
<main id="main-404-content" class="main-content-particle-js">
<div class="content-wrap">
<div class="shadow-overlay"></div>
<div class="main-content">
<div class="row">
<div class="col-twelve">
<h1 class="kern-this">404 Error.</h1>
<p>
Oooooops! Looks like nothing was found at this location.
Maybe try on of the links below, click on the top menu
or try a search?
</p>
{% comment %}
<div class="search">
<form>
<input type="text" id="s" name="s" class="search-field" placeholder="Type and hit enter …">
</form>
</div>
{% endcomment %}
</div>
<!-- /twelve -->
</div>
<!-- /row -->
</div>
<!-- /main-content -->
<footer>
<div class="row">
<div class="col-seven tab-full social-links pull-right">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class="col-five tab-full bottom-links">
<ul class="links">
<li><a href="/">Homepage</a></li>
<li><a href="/about-us/">About Us</a></li>
{% comment %}
<li><a href="/contact-us/">Contact Us</a></li>
{% endcomment %}
<li><a href="mailto:Contact@alphaandroid.com">Report Error</a></li>
</ul>
<div class="credits">
<p>Design by <a href="http://www.alphaandroid.com/" title="styleshout">alphaandroid.com</a></p>
</div>
</div>
</div>
<!-- /row -->
</footer>
</div>
<!-- /content-wrap -->
</main>
<!-- /main-404-content -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Java Script
================================================== -->
<script src="{% static 'js/error404/jquery-2.1.3.min.js' %}"></script>
<script src="{% static 'js/error404/plugins.js' %}"></script>
<script src="{% static 'js/error404/main.js' %}"></script>
</body>
</html>
Ahora, siempre que aparezca el error 404, les mostrará el archivo 404.html:
Producción :
Nota: podrá ver el resultado de esta página solo y solo cuando haya hecho que ese sitio web esté activo en el alojamiento o cuando establezca el modo de depuración «Falso» y configure su host permitido.
Publicación traducida automáticamente
Artículo escrito por pavanpatel3684 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA