سلام
تا به اینجای کار برای هر صفحۀ HTML به صورت جداگانه کد زدیم و بعضی وقت ها هم کدهای تکراری استفاده کردیم. در اینجا می خواهیم یک صفحۀ اصلی (master page) بسازیم و بعد قسمت های یکتایی را به هر تمپلیت اضافه کنیم.
فایلی با نام base.html درون فولدر templates ایجاد می کنیم:
templates/base.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}Django Boards{% endblock %}</title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </head> <body> <div class="container"> <ol class="breadcrumb my-4"> {% block breadcrumb %} {% endblock %} </ol> {% block content %} {% endblock %} </div> </body> </html> |
این صفحه به عنوان master page است. هر قالب دیگری که ایجاد کنیم در راستای توسعۀ این صفحه است.
از تگ % block %} برای رزرو یک فضای خالی درون قالب استفاده می‌شود. به تعبیر دیگر این بلوک‌ها به عنوان فرزندان صفحۀ اصلی هستند و می توانیم کدهای خود را درون آن قرار دهیم.
با تنظیم {% block title %} یک مقدار پیشفرض را مشخص کرده‌ایم. (Django Boards) این کار زمانی فایده دارد که در قالب‌های فرزند، مقدار {% block title %} را تنظیم نکنیم.
حالا می خواهیم دو قالب فرزند با نام‌های topics.html و home.html را تولید کنیم:
templates/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{% extends 'base.html' %} {% block breadcrumb %} <li class="breadcrumb-item active">Boards</li> {% endblock %} {% block content %} <table class="table"> <thead class="thead-inverse"> <tr> <th>Board</th> <th>Posts</th> <th>Topics</th> <th>Last Post</th> </tr> </thead> <tbody> {% for board in boards %} <tr> <td> <a href="{% url 'board_topics' board.pk %}">{{ board.name }}</a> <small class="text-muted d-block">{{ board.description }}</small> </td> <td class="align-middle">0</td> <td class="align-middle">0</td> <td></td> </tr> {% endfor %} </tbody> </table> {% endblock %} |
تگ {% extends ‘base.html’ %} به جنگو می گوید که این قالب به عنوان فرزند base.html است. بعد از آن هم برای درج محتوای منحصر به فرد از بلوک‌بندی استفاده می کنیم.
templates/topics.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{% extends 'base.html' %} {% block title %} {{ board.name }} - {{ block.super }} {% endblock %} {% block breadcrumb %} <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li> <li class="breadcrumb-item active">{{ board.name }}</li> {% endblock %} {% block content %} <!-- just leaving it empty for now. we will add core here soon. --> {% endblock %} |
در این قالب با استفاده از تگ {% block title %} عنوان قالب را تغییر داده‌ایم. همچنین برای دسترسی به عنوان پیشفرض می توانیم از تگ {{ block.super }} استفاده کنیم.
بنابراین عنوان صفحه برابر می شود با نام بورد + خط تیره + عبارت Django-boards
- حالا نوبت به تست می رسد:
|
1 |
python manage.py test |
خروجی:
|
1 2 3 4 5 6 7 |
Creating test database for alias 'default'... System check identified no issues (0 silenced). ....... --------------------------------------------------------Ran 7 tests in 0.067s OK Destroying test database for alias 'default'... |
حالا که قالب html ساخته شد به راحتی می توانیم یک نوار در بالای صفحه به همراه منو ایجاد کرد.
templates/base.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}Django Boards{% endblock %}</title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="{% url 'home' %}">Django Boards</a> </div> </nav> <div class="container"> <ol class="breadcrumb my-4"> {% block breadcrumb %} {% endblock %} </ol> {% block content %} {% endblock %} </div> </body> </html> |
یک کار باحالی که می شود انجام داد تغییر فونت لوگو است. یعنی قسمت .navbar-brand از صفحه. برای این کار هم می شود فونت را دانلود کرد و هم به صورت آنلاین از سرویس گوگل استفاده کرد. برای استفاده از سرویس گوگل به آدرس google.com می رویم و یک فونت دلخواه را انتخاب می کنیم. (در اینجا نام فونت peraltaاست.)
و سپس این فونت را به صفحۀ اصلی اضافه می کنیم:
base.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}Django Boards{% endblock %}</title> <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet"> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'css/app.css' %}"> </head> <body> <!-- code suppressed for brevity --> </body> </html> |
حالا به فولدر static/CSS رفته و یک فایل جدید به نام css ایجاد می کنیم و این فونت را به navbar-brand ارتباط می دهیم:
static/css/app.css
|
1 2 3 |
.navbar-brand { font-family: 'Peralta', cursive; } |
ترجمۀ اختصاصی توسط تمدن
مطلب بعدی: هنوز نا موجود 😉
مطلب قبلی:لیستی از الگوهای پرکاربرد URL
بدون دیدگاه