قالب‌هایی با قابلیت استفادۀ مجدد یا Reusable Templates

جنگو

سلام

تا به اینجای کار برای هر صفحۀ HTML به صورت جداگانه کد زدیم و بعضی وقت ها هم کدهای تکراری استفاده کردیم. در اینجا می خواهیم یک صفحۀ اصلی (master page) بسازیم و بعد قسمت های یکتایی را به هر تمپلیت اضافه کنیم.

فایلی با نام base.html درون فولدر templates ایجاد می کنیم:

templates/base.html

این صفحه به عنوان master page است. هر قالب دیگری که ایجاد کنیم در راستای توسعۀ این صفحه است.

از تگ % block %} برای رزرو یک فضای خالی درون قالب استفاده می‌شود. به تعبیر دیگر این بلوک‌ها به عنوان فرزندان صفحۀ اصلی هستند و می توانیم کدهای خود را درون آن قرار دهیم.

با تنظیم {% block title %} یک مقدار پیشفرض را مشخص کرده‌ایم. (Django Boards) این کار زمانی فایده دارد که در قالب‌های فرزند، مقدار {% block title %} را تنظیم نکنیم.

حالا می خواهیم دو قالب فرزند با نام‌های topics.html و home.html را تولید کنیم:

templates/home.html

تگ {% extends ‘base.html’ %} به جنگو می گوید که این قالب به عنوان فرزند base.html است. بعد از آن هم برای درج محتوای منحصر به فرد از بلوک‌بندی استفاده می کنیم.

templates/topics.html

در این قالب با استفاده از تگ {% block title %} عنوان قالب را تغییر داده‌ایم. همچنین برای دسترسی به عنوان پیش‎فرض می توانیم از تگ {{ block.super }} استفاده کنیم.

بنابراین عنوان صفحه برابر می شود با نام بورد + خط تیره + عبارت Django-boards

  1. حالا نوبت به تست می رسد:

خروجی:

حالا که قالب html ساخته شد به راحتی می توانیم یک نوار در بالای صفحه به همراه منو ایجاد کرد.

templates/base.html

یک کار باحالی که می شود انجام داد تغییر فونت لوگو است. یعنی قسمت .navbar-brand از صفحه. برای این کار هم می شود فونت را دانلود کرد و هم به صورت آنلاین از سرویس گوگل استفاده کرد. برای استفاده از سرویس گوگل به آدرس google.com می رویم و یک فونت دلخواه را انتخاب می کنیم. (در اینجا نام فونت peraltaاست.)

و سپس این فونت را به صفحۀ اصلی اضافه می کنیم:

base.html:

حالا به فولدر static/CSS رفته و یک فایل جدید به نام css ایجاد می کنیم و این فونت را به navbar-brand ارتباط می دهیم:

static/css/app.css

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی: هنوز نا موجود 😉

مطلب قبلی:لیستی از الگوهای پرکاربرد URL

بدون دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
ویوی شروع بازیابی پسورد

سلام نوشتن فایل قالب به ترتیب زیر: templates/password_reset_done.html {% extends ‘base_accounts.html’ %} {% block title %}Reset your password{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-4 col-md-6 col-sm-8″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Reset your password</h3> <p>Check your email for a link to reset your password. If …

جنگو
ویوی بازیابی پسورد

سلام فایل زیر را ویرایش می کنیم. templates/password_reset.html {% extends ‘base_accounts.html’ %} {% block title %}Reset your password{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-4 col-md-6 col-sm-8″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Reset your password</h3> <p>Enter your email address and we will send you a link …

جنگو
پیکربندی مسیرها

سلام بازیابی پسورد به چهار ویو احتیاج دارد. یک صفحه با یک فرم برای شروع پروسه یک صفحه که به کاربر نشان دهد بازیابی پسورد شروع شده و مثلاً لازم است اسپم ایمیل خود را هم چک کند. صفحه ای برای چک توکن ارسال‌شده توسط ایمیل صفحه ای که به …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.