Django 3: Статические файлы и Bootstrap

Урок посвящен работе со статическими файлами в 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; }. Если стиль не применяется, проверьте:

  1. Наличие STATIC_URL и STATICFILES_DIRS в settings.py.
  2. Подключение 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, создание базового дизайна сайта и работу со статическими ресурсами. В следующих уроках продолжим разработку, добавив функциональность работы с базой данных.

Что будем искать? Например,программа