ظاهر برنامه جنگو خود را با ایجاد یک صفحه خطای شخصی سازی شده 404 به جای تکیه بر صفحه پیش فرض ساده بهبود دهید.
صفحات خطا در برنامه های وب رایج هستند. مشارکت کنندگان جنگو صفحات پیش فرضی را برای برخی از این خطاها مانند خطای 404 (یافت نشد) ارائه کرده اند. اما به عنوان یک توسعه دهنده، بهتر است یک صفحه خطا داشته باشید که از اصول طراحی بقیه برنامه های وب شما پیروی کند.
ایجاد یک صفحه سفارشی 404 در جنگو
خطای 404 بخشی از چندین کد وضعیت HTTP است که توسط مرورگر برای نشان دادن پاسخ سرور به درخواست‌های مرورگر توسط کاربر استفاده می‌شود. جنگو الگوهای پیش‌فرض را برای برخی از این کدهای وضعیت ارائه می‌کند و صفحه خطای پیش‌فرض 404 در جنگو به شکل زیر است:
تصویر فوق زیبا به نظر نمی رسد و اکثر شرکت ها به راحتی آن را در وب سایت خود نمی پذیرند. برای تغییر این صفحه به یک صفحه سفارشی 404 به انتخاب خود، باید مراحل ذکر شده در زیر را دنبال کنید.
مرحله 1: یک View برای مدیریت خطای 404 ایجاد کنید
فایل views.py خود را باز کنید و یک نمای برای صفحه خطای 404 ایجاد کنید. این نما باید یک الگوی حاوی طرح صفحه خطای 404 سفارشی شما را برگرداند. در اینجا یک نمای جنگو ساده است که می توانید در پروژه خود استفاده کنید:
from django.shortcuts import render
# custom 404 view
def custom_404(request, exception):
return render(request, '404.html', status=404)
قطعه کد بالا یک تابع پایتون است (در این مورد ترجیحاً نمای جنگو نامیده می شود) که دو آرگومان تابع را می گیرد. درخواست و استثنا آرگومان دوم-exception-به شما امکان می دهد به شی استثنایی که خطای 404 را راه اندازی کرده است دسترسی داشته باشید.
باید «404.html» در نمای بالا را با مسیر صحیح صفحه الگوی HTML خطای 404 خود جایگزین کنید.
مرحله 2: یک الگو برای خطای 404 خود ایجاد کنید
یک فایل HTML جدید ایجاد کنید تا حاوی طرح سفارشی شما برای صفحه خطای 404 باشد. طراحی باید با بقیه برنامه شما سازگار باشد. در اینجا یک قالب ساده HTML وجود دارد که می توانید در پروژه خود از آن استفاده کنید. شما باید این الگو را به دلخواه خود تغییر دهید:
<!-- 404.html template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Page Not Found</title>
<link
<!-- import Bootstrap -->
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<!-- custom css -->
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
max-width: 600px;
}
.emoji {
font-size: 8rem;
margin-bottom: 20px;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
margin-bottom: 20px;
}
.btn {
font-size: 1.25rem;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="emoji">😕</div>
<h1>Oops! Page Not Found</h1>
<p>We couldn't find the page you were looking for.</p>
<a class="btn btn-primary" href="/">Go back to Home</a>
</div>
</body>
</html>
مرحله 3: فایل URL های پروژه خود را تغییر دهید
در سطح پروژه خود (جایی که فایل settings.py شما قرار دارد)، فایل urls.py خود را باز کنید و کنترل کننده خطای 404 را به نمایی که برای رسیدگی به خطای 404 ایجاد کرده اید، اشاره کنید. خطای 404 handler handler404 نامیده می شود. برای اشاره handler404 به دیدگاه خود، باید این فرمت را دنبال کنید:
handler404 = 'app_name.views.custom_404_view_name'
اگر برنامه شما دستور پخت نام دارد و نمای آن custom_404 نام دارد، باید فرمت فوق را به این صورت تغییر دهید:
handler404 = 'recipe.views.custom_404'
اطمینان حاصل کنید که این کار را در سطح پروژه خود انجام می دهید و نه در سطح برنامه خود. بین یک پروژه و یک برنامه در جنگو تفاوت هایی وجود دارد.
مرحله 4: صفحه خطای جدید 404 خود را آزمایش کنید
برای آزمایش صفحه خطای جدید خود، سرور توسعه خود را راه اندازی کنید و به صفحه ای که در برنامه وجود ندارد بروید. می توانید با اجرای این دستور در ابزار خط فرمان (CLI) سرور خود را راه اندازی کنید:
python manage.py runserver
برای اینکه دستور بالا کار کند، باید در دایرکتوری ریشه پروژه خود باشید، یعنی پوشه ای که فایل manager.py شما در آن زندگی می کند.
هنگامی که سرور شما شروع به کار کرد، صفحه سفارشی 404 خود را با پیمایش به صفحه ای که وجود ندارد مانند http://127.0.0.1:8000/hello تست کنید. اگر همه چیز را به درستی انجام داده اید، باید صفحه خطای سفارشی 404 خود را ببینید.
اگر صفحه خطای سفارشی 404 شما ظاهر نمی شود، باید نماهای خود را بررسی کنید تا مطمئن شوید که مسیر صحیح الگوی HTML خود را در تابع render() نوشته اید، زیرا این یک مشکل رایج است.
صفحات خطای سفارشی تجربه بهتری به کاربر می دهند
داشتن یک صفحه خطای سفارشی در برنامه شما باعث بهبود تجربه کاربران شما در هنگام مواجهه با خطا می شود. به جای دیدن یک پیام خطای عمومی، یک صفحه خطای سفارشی می تواند اطلاعات دقیق تری در مورد خطا ارائه دهد و راه حل های ممکن را پیشنهاد کند.
این می تواند به کاربران کمک کند تا بفهمند چه مشکلی رخ داده و چگونه آن را برطرف کنند، ناامیدی را کاهش می دهد و اعتماد آنها را به برنامه شما افزایش می دهد. همچنین می‌توانید با افزودن ویژگی‌های دسترسی، صفحه را فراگیر کنید.