Сьогодні ми зберемо всі ці знання в єдине ціле і створимо багатосторінковий сайт на Django. Ми будемо використовувати концепції, які обговорювали раніше: створення базового шаблону, наслідування шаблонів, робота з контекстом і підключення статичних файлів.
До кінця лекції ви зможете:
- Організувати шаблони для багатосторінкового сайту на Django.
- Створювати сторінки із загальними елементами (наприклад, навігацією, футером).
- Використовувати наслідування шаблонів для спрощення розробки.
- Розробляти навігацію між сторінками.
1. Створюємо структуру проєкту
Для початку давайте створимо Django-проєкт і налаштуємо базовий додаток. Якщо ви забули, як це робиться, можна повернутися до лекцій з перших днів.
Створення проєкту та додатку
django-admin startproject multipage_site
cd multipage_site
python manage.py startapp website
Додамо додаток website у файл settings.py:
INSTALLED_APPS = [
# Інші додатки Django
'website',
]
Налаштовуємо базовий шаблон
Почнемо зі створення базового шаблону base.html, на основі якого будуть будуватися всі сторінки нашого сайту.
Організуємо шаблони в проєкті. У додатку website створимо папку templates/website:
multipage_site/
├── website/
│ ├── templates/
│ │ └── website/
│ │ ├── base.html
│ │ ├── home.html
│ │ ├── about.html
│ │ └── contact.html
Шаблон base.html
Базовий шаблон буде містити спільні елементи для всього сайту: заголовок, навігаційне меню та футер.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Website{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{% url 'home' %}">Головна</a></li>
<li><a href="{% url 'about' %}">Про нас</a></li>
<li><a href="{% url 'contact' %}">Контакти</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}
<!-- Вміст сторінок -->
{% endblock %}
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>Створення сторінок сайту
Тепер створимо декілька сторінок: домашню сторінку, сторінку "Про нас" і сторінку "Контакти".
Домашня сторінка home.html
Домашня сторінка буде наслідувати шаблон base.html.
{% extends 'website/base.html' %}
{% block title %}
Home - My Website
{% endblock %}
{% block content %}
<h1>Welcome to My Website</h1>
<p>This is the homepage of our multi-page Django site.</p>
{% endblock %}Сторінка "Про нас" about.html
{% extends 'website/base.html' %}
{% block title %}
About - My Website
{% endblock %}
{% block content %}
<h1>About Us</h1>
<p>Learn more about what we do and why we do it.</p>
{% endblock %}Сторінка "Контакти" contact.html
{% extends 'website/base.html' %}
{% block title %}
Contact - My Website
{% endblock %}
{% block content %}
<h1>Contact Us</h1>
<p>Feel free to reach out to us anytime via our contact form.</p>
{% endblock %}Налаштування маршрутизації
Щоб перейти до створених сторінок, потрібно налаштувати маршрути у urls.py.
Налаштування URL у website/urls.py
Створіть файл website/urls.py, якщо його ще немає.
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about'),
path('contact/', views.contact, name='contact'),
]Основний файл urls.py проєкту
Тепер підключимо маршрути додатку в проєкті. Відкрийте multipage_site/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('website.urls')),
]Створення представлень
У файлі views.py додатку website створимо кілька представлень:
from django.shortcuts import render
def home(request):
return render(request, 'website/home.html')
def about(request):
return render(request, 'website/about.html')
def contact(request):
return render(request, 'website/contact.html')Додавання стилів
Створимо папку для статичних файлів і додамо простий CSS:
website/
├── static/
│ └── css/
│ └── styles.css
Приклад styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header ul li {
margin: 0 15px;
}
header ul li a {
color: white;
text-decoration: none;
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px 0;
background-color: #f4f4f4;
}Перевірка роботи сайту
Запустіть сервер:
python manage.py runserver
Перейдіть у браузері за адресою http://127.0.0.1:8000/. Ви повинні побачити головну сторінку! Тепер перевірте інші сторінки: "Про нас" і "Контакти". Навігація повинна працювати коректно.
Найкращі практики з організації шаблонів
- Структуруйте папку
templates. Використовуйте підкаталоги для групування шаблонів, якщо проєкт стає великим. - Намагайтеся уникати дублювання коду. Використовуйте
{% include %}для повторюваних елементів, таких як хедер, меню та футер. - Наслідування шаблонів допомагає дотримуватися принципу DRY. Завжди використовуйте базовий шаблон для сторінок, щоб не повторювати HTML-код.
- Використовуйте статичні файли для стилізації. CSS і JS-файли роблять ваш сайт більш привабливим та інтерактивним.
Сподіваюся, ви відчули себе справжнім архітектором веб-сайту! Тепер у вас є робочий багатосторінковий сайт на Django. Ви можете його масштабувати, додаючи нові сторінки, покращуючи стилі та додаючи інтерактивні елементи.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ