قالب‌هایی با قابلیت استفادۀ مجدد یا 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

بدون دیدگاه

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

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

جنگو
ثبت نام یا Sign Up

سلام به عنوان اولین گام باید یک Url برای صفحۀ ثبت نام تعریف کنیم. myproject/urls.py from django.conf.urls import url from django.contrib import admin from accounts import views as accounts_views from boards import views urlpatterns = [ url(r’^$’, views.home, name=’home’), url(r’^signup/$’, accounts_views.signup, name=’signup’), url(r’^boards/(?P<pk>\d+)/$’, views.board_topics, name=’board_topics’), url(r’^boards/(?P<pk>\d+)/new/$’, views.new_topic, name=’new_topic’), url(r’^admin/’, admin.site.urls), …

جنگو
تنظیمات اولیه

سلام برای تمام این کارها لازم است تا برنامۀ جدیدی را ایجاد کنیم. برای انجام این کار وارد فولدری می شویم که فایل py قرار دارد و دستور زیر را وارد می کنیم: django-admin startapp accounts ساختار پروژه‌ بعد از این دستور به شکل زیر می شود. myproject/ |– myproject/ …

جنگو
شمای کلی از اعتبارسنجی برنامه در جنگو

سلام در این فصل قصد داریم به مباحث اعتبارسنجی مثل ثبت نام، ورود به سیستم، خروج از سیستم، بازیابی پسورد و تغییر پسورد بپردازیم. همینطور چگونگی تعیین سطح دسترسی برای کاربران سایت از سایر افراد مطرح می شود. تا به این لحظه یک پروژه به نام Libogram تعریف کردیم که …

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