Сегодня мы соберём все эти знания в единое целое и создадим многостраничный сайт на 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' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">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. Вы можете его масштабировать, добавляя новые страницы, улучшая стили и добавляя интерактивные элементы.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ