שפר את המראה של אפליקציית Django שלך על ידי פיתוח דף שגיאות 404 מותאם אישית במקום להסתמך על ברירת המחדל הרגילה.

דפי שגיאה נפוצים ביישומי אינטרנט. התורמים של Django סיפקו דפי ברירת מחדל עבור חלק מהשגיאות הללו, כגון שגיאת 404 (לא נמצא). אבל כמפתח, עדיף שיהיה לך דף שגיאה שעוקב אחר עקרונות העיצוב של שאר יישום האינטרנט שלך.

יצירת דף 404 מותאם אישית ב-Django

שגיאת 404 היא חלק מהמספר קודי מצב HTTP משמש את הדפדפן לציון תגובת שרת לבקשות דפדפן שנעשו על ידי משתמש. Django מספק תבניות ברירת מחדל עבור חלק מקודי המצב הללו, ודף השגיאה 404 המוגדר כברירת מחדל ב-Django נראה כך:

התמונה לעיל לא נראית יפה, ורוב החברות לא יקבלו אותה בקלות באתר האינטרנט שלהן. כדי לשנות דף זה לדף 404 מותאם אישית לבחירתך, עליך לבצע את השלבים המפורטים להלן.

שלב 1: צור תצוגה כדי לטפל בשגיאת 404

פתח את views.py קובץ וצור תצוגה עבור דף השגיאה 404. תצוגה זו אמורה להחזיר תבנית המכילה את העיצוב עבור דף השגיאה 404 המותאם אישית שלך. הנה תצוגת Django פשוטה שבה תוכל להשתמש בפרויקט שלך:

מ django.shortcuts יְבוּא לְדַקלֵם
# תצוגת 404 מותאמת אישית
defcustom_404(בקשה, חריגה):
לַחֲזוֹר render (בקשה, '404.html', סטטוס=404)
instagram viewer

קטע הקוד שלמעלה הוא a פונקציית Python (רצוי להיקרא תצוגת Django במקרה זה) שלוקחת שני ארגומנטים של פונקציה; בַּקָשָׁה, ו יוצא מן הכלל. הטיעון השני-יוצא מן הכלל—מאפשר לך לגשת לאובייקט החריג שהפעיל את שגיאת 404.

כדאי להחליף את '404.html' בתצוגה שלמעלה עם הנתיב הנכון לדף תבנית HTML שגיאה 404.

שלב 2: צור תבנית עבור שגיאת 404 שלך

צור קובץ HTML חדש שיכיל את העיצוב המותאם אישית שלך עבור דף השגיאה 404. העיצוב צריך להיות עקבי עם שאר היישום שלך. הנה תבנית HTML פשוטה שבה תוכל להשתמש בפרויקט שלך. עליך לשנות תבנית זו כראות עיניך:

 תבנית 404.html 
html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<כותרת>עמוד 404 לא נמצאכותרת>
<קישור
 ייבוא ​​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="anonymous">
 css מותאם אישית 
<סִגְנוֹן>
 גוף {
 תצוגה: flex;
 flex-direction: עמודה;
 להצדיק-תוכן: מרכז;
 align-items: center;
 גובה: 100Vh;
 font-family: Arial, sans-serif;
 }
 .container {
 יישור טקסט: מרכז;
 רוחב מקסימלי: 600 פיקסלים;
 }


 ‎.emoji {
 גודל גופן: 8rem;
 margin-bottom: 20px;
 }


 h1 {
 גודל גופן: 3rem;
 margin-bottom: 20px;
 }


 p {
 גודל גופן: 1.5 רם;
 margin-bottom: 20px;
 }
 .btn {
 גודל גופן: 1.25 רם;
 ריפוד: 10px 20px;
 }
סִגְנוֹן>
רֹאשׁ>
<גוּף>
<divמעמד="מְכוֹלָה">
<divמעמד="אימוג'י">😕div>
<h1>אופס! הדף לא נמצאh1>
<ע>לא הצלחנו למצוא את הדף שחיפשת.ע>
<אמעמד="btn btn-primary"href="/">חזור לביתא>
div>
גוּף>
html>

שלב 3: שנה את קובץ כתובות ה-URL של הפרויקט שלך

ברמת הפרויקט שלך (היכן שלך settings.py הקובץ הוא), פתח את שלך urls.py קובץ וכוון את המטפל בשגיאה 404 לתצוגה שיצרת כדי לטפל בשגיאת 404. המטפל בשגיאה 404 נקרא מטפל404. להצביע מטפל404 לדעתך, עליך לפעול לפי הפורמט הזה:

handler404 = 'app_name.views.custom_404_view_name'

אם האפליקציה שלך נקראת מתכון, והנוף נקרא custom_404, אז עליך לשנות את הפורמט שלמעלה כך:

handler404 = 'recipe.views.custom_404'

ודא שאתה עושה זאת ברמת הפרויקט שלך ולא ברמת האפליקציה שלך. יש הבדלים בין פרויקט לאפליקציה ב-Django.

שלב 4: בדוק את דף השגיאה החדש שלך 404

כדי לבדוק את דף השגיאה החדש שלך, הפעל את שרת הפיתוח שלך ונווט לדף שאינו קיים באפליקציה שלך. אתה יכול להפעיל את השרת שלך על ידי הפעלת פקודה זו בכלי שורת הפקודה שלך (CLI):

שרת python manage.py

כדי שהפקודה למעלה תעבוד, עליך להיות בספריית השורש של הפרויקט שלך, כלומר, התיקיה שבה manage.py חיי הקובץ.

ברגע שהשרת שלך מתחיל, בדוק את דף 404 המותאם אישית שלך על ידי ניווט לדף לא קיים כגון http://127.0.0.1:8000/hello. אם עשית הכל נכון, אתה אמור לראות את דף השגיאה 404 המותאם אישית שלך.

אם דף השגיאה 404 המותאם אישית שלך לא מופיע, עליך לשקול לבדוק את התצוגות שלך כדי לוודא שכתבת את הנתיב הנכון לתבנית ה-HTML שלך ב- לְדַקלֵם() לתפקד, מכיוון שזו בעיה נפוצה.

דפי שגיאה מותאמים אישית מעניקים חווית משתמש טובה יותר

קיום דף שגיאה מותאם אישית באפליקציה שלך ישפר את חוויית המשתמשים שלך כאשר הם נתקלים בשגיאות. במקום לראות הודעת שגיאה כללית, דף שגיאה מותאם אישית יכול לספק מידע ספציפי יותר על השגיאה ולהציע פתרונות אפשריים.

זה יכול לעזור למשתמשים להבין מה השתבש וכיצד לתקן זאת, להפחית את התסכול ולהגביר את הביטחון שלהם באפליקציה שלך. תוכל גם להפוך את הדף לכלול על ידי הוספת תכונות נגישות.