Урок посвящен работе со статическими файлами в Django и интеграции Bootstrap для улучшения дизайна сайта. Рассмотрим подключение Bootstrap, создание собственных CSS-файлов и организацию структуры проекта для хранения статических ресурсов.
Подключение Bootstrap
Bootstrap — CSS-фреймворк, предоставляющий готовые стили. Для подключения можно скачать его с getbootstrap.com и добавить CSS-файл в проект, но проще использовать CDN-ссылку с bootstrapcdn.com. Добавьте ссылку на CSS-файл в base.html внутри тега <link>:
<link rel="stylesheet" href="ссылка_на_bootstrap_css">
После добавления ссылки Bootstrap будет подключен, и стили применятся ко всему тексту.
Организация статических файлов
Для хранения статических файлов (CSS, JavaScript, изображений и т.д.) создайте директорию static внутри приложения. Внутри static создайте вложенную папку с именем приложения (например, main) для предотвращения конфликтов при объединении статических файлов из разных приложений. Далее, создайте директории для упорядочивания файлов по типам (например, css, img, js).
Пример структуры:
myproject/ ├── myapp/ │ └── static/ │ └── myapp/ │ ├── css/ │ │ └── main.css │ └── img/ │ └── logo.svg
Подключение собственного CSS-файла
Создайте main.css в static/myapp/css/. Для подключения к шаблону, добавьте в base.html:
{% load static %}
Затем подключите main.css:
<link rel="stylesheet" href="{% static 'myapp/css/main.css' %}">
Путь начинается с static/, далее имя приложения, затем путь к файлу.
Для проверки, добавьте в main.css простой стиль, например, body { background-color: red; }. Если стиль не применяется, проверьте:
- Наличие STATIC_URL и STATICFILES_DIRS в settings.py.
- Подключение static в urls.py:
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('main.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
При необходимости, очистите кэш браузера.
Базовый дизайн сайта
Пример базового дизайна с боковой панелью и основной частью в base.html. Используются стили Bootstrap и иконки с fontawesome.com. В main.css прописаны стили для элементов страницы. Имена ссылок в urls.py выбраны для удобства управления URL-адресами. Показано использование плавного изменения размеров при наведении курсора мыши на ссылки. В примерах кода используется lorem ipsum.
В этом уроке мы рассмотрели подключение Bootstrap, организацию статических файлов в Django, создание базового дизайна сайта и работу со статическими ресурсами. В следующих уроках продолжим разработку, добавив функциональность работы с базой данных.