πŸ”§ Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django? Π£Π·Π½Π°ΠΉΡ‚Π΅ сСкрСты ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ настройки Π²Π΅Π±-интСрфСйса!

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django, Π²Π°ΠΌ потрСбуСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ CSS Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ вашСй административной ΠΏΠ°Π½Π΅Π»ΠΈ. Π’ΠΎΡ‚ шаги, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ: 1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ ".css", Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ "admin_styles.css". 2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ этот Ρ„Π°ΠΉΠ» ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свои стили CSS, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, для измСнСния внСшнСго Π²ΠΈΠ΄Π° административной ΠΏΠ°Π½Π΅Π»ΠΈ. 3. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» с вашими измСнСниями. Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ эти стили ΠΊ Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия: 1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» `settings.py`, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Django. 2. НайдитС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ `STATIC_URL` ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Π΅Ρ† URL-адрСса Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: `'admin/'`. 3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ `STATICFILES_DIRS` ΠΈ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Ρƒ, содСрТащСму ваш Ρ„Π°ΠΉΠ» CSS, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: `os.path.join(BASE_DIR, 'static')`. 4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» `settings.py`. НаконСц, ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ статичСскиС Ρ„Π°ΠΉΠ»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ измСнСния вступили Π² силу:

    python manage.py collectstatic
    
Π’Π°ΡˆΠΈ стили CSS Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ административной ΠΏΠ°Π½Π΅Π»ΠΈ Django. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ΠΈ `{% static %}` Π² ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° ваш Ρ„Π°ΠΉΠ» CSS. Π£Π΄Π°Ρ‡ΠΈ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ стилСй Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django!

Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django

ИзмСнСниС стилСй административной ΠΏΠ°Π½Π΅Π»ΠΈ Django ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим нСсколько способов, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django.

1. ИспользованиС статичСских Ρ„Π°ΠΉΠ»ΠΎΠ²

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django - это использованиС статичСских Ρ„Π°ΠΉΠ»ΠΎΠ². Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнныС CSS-Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊ административной ΠΏΠ°Π½Π΅Π»ΠΈ.

{% load static %}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Π΅Π³ `{% static %}` для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ статичСского Ρ„Π°ΠΉΠ»Π° `my_admin_styles.css`. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ» находится Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ `static` вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

2. ИзмСнСниС шаблонов

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ - ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ шаблонов административной ΠΏΠ°Π½Π΅Π»ΠΈ Django. Django прСдоставляСт Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ свои стили.

Для Π½Π°Ρ‡Π°Π»Π°, создайтС Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ `templates` Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Ссли Π΅Π΅ Π΅Ρ‰Π΅ Π½Π΅Ρ‚. Π—Π°Ρ‚Π΅ΠΌ создайтС ΠΏΠΎΠ΄Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ `admin` Π²Π½ΡƒΡ‚Ρ€ΠΈ `templates`. Π’ этой ΠΏΠΎΠ΄Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свои собствСнныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ.

НапримСр, создайтС Ρ„Π°ΠΉΠ» `base_site.html` Π² Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ `templates/admin` ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π²Π°ΠΌ элСмСнты.

<!-- templates/admin/base_site.html -->
{% extends "admin/base_site.html" %}

{% block extrahead %}
    <link rel="stylesheet" type="text/css" href="{% static 'admin/my_admin_styles.css' %}">
{% endblock %}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ шаблон `admin/base_site.html` ΠΈ добавляСм ссылку Π½Π° наш CSS-Ρ„Π°ΠΉΠ» `my_admin_styles.css`.

3. ИспользованиС ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сторонних Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

Π’Ρ€Π΅Ρ‚ΠΈΠΉ способ - использованиС ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сторонних Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ ΠΈ стили для Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django.

НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ `django-admin-styles`, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт нСсколько стилСй Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ для Π²Ρ‹Π±ΠΎΡ€Π°. УстановитС Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ pip:

pip install django-admin-styles

ПослС установки ΠΏΠ°ΠΊΠ΅Ρ‚Π° Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ„Π°ΠΉΠ»Π΅ `settings.py` вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

INSTALLED_APPS = [
    ...
    'admin_styles',
    ...
]

Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅Π³ΠΎ Π² Ρ„Π°ΠΉΠ» `settings.py`:

ADMIN_STYLE = 'admin_styles.bootstrap5'

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ Bootstrap 5 ΠΈΠ· ΠΏΠ°ΠΊΠ΅Ρ‚Π° `django-admin-styles`. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ `bootstrap5` Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ доступный ΡΡ‚ΠΈΠ»ΡŒ.

Π’Ρ‹Π²ΠΎΠ΄

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили административной ΠΏΠ°Π½Π΅Π»ΠΈ Django, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ статичСскиС Ρ„Π°ΠΉΠ»Ρ‹, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ шаблонов ΠΈΠ»ΠΈ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ сторонних Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ подходящий для вас способ ΠΈ создайтС ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π’ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

#24. Вонкая настройка Π°Π΄ΠΌΠΈΠ½ ΠΏΠ°Π½Π΅Π»ΠΈ | Django ΡƒΡ€ΠΎΠΊΠΈ

49 Админка Django. Настройка Ρ„ΠΎΡ€ΠΌΡ‹ списка. ΠšΡƒΡ€Ρ ΠΏΠΎ Django

#10. НачинаСм Ρ€Π°Π±ΠΎΡ‚Ρƒ с Π°Π΄ΠΌΠΈΠ½-панСлью | Django ΡƒΡ€ΠΎΠΊΠΈ

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

πŸ”§ Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django? Π£Π·Π½Π°ΠΉΡ‚Π΅ сСкрСты ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ настройки Π²Π΅Π±-интСрфСйса!

πŸš€ Как Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Django Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅: пошаговая инструкция