π§ ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ Django? Π£Π·Π½Π°ΠΉΡΠ΅ ΡΠ΅ΠΊΡΠ΅ΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²Π΅Π±-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°!
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, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ Π΄Π»Ρ Π²Π°Ρ ΡΠΏΠΎΡΠΎΠ± ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.