Gyakorlat – Django-crispy-forms implementálása
A létrehozott űrlap megtekintése után észreveheti, hogy a formázás nem ugyanaz, mint a lap többi része. Bootstrap-t használunk, és az űrlap jelenleg nem. Szerencsére van egy könyvtár, amely biztosíthatja, hogy az űrlapjaink a Bootstrap-t is használják.
A django-crispy-forms könyvtár
A django-crispy-forms könyvtár tovább javítja a Django által létrehozott űrlapokat. Meg fogjuk vizsgálni, hogyan használhatjuk a kódtárat annak biztosítására, hogy az űrlapjaink a Bootstrap-t használják.
A kódtár telepítése
A Python-kódtárakhoz hasonlóan a django-crispy-formst is a pip használatával telepítjük.
Nyissa meg a requirements.txt fájlt a Visual Studio Code-ben.
A fájl alján adjon hozzá egy új sort , amely a következőt olvassa:
django-crispy-forms
Nyisson meg egy új terminálablakot az Új terminál terminál> kiválasztásával.
Telepítse az összes csomagot a következő parancs futtatásával:
pip install -r requirements.txt
Az alkalmazás regisztrálása a Django-ban és a sablon konfigurálása
A Django által használt bármit alkalmazásként vagy köztes szoftverként kell regisztrálni. Mivel a django-crispy-forms egy alkalmazás, fel fogjuk sorolni a INSTALLED_APPS
listában.
A Visual Studio Code-n belül nyissa meg a project/settings.py fájlt.
Az olvasási
# TODO: Register crispy_forms
sor alatt adja hozzá a következő kódot a django-crispy-forms regisztrálásához.# TODO: Register crispy_forms 'crispy_forms',
Az olvasási
# TODO: Set template_pack
sor alatt adja hozzá a következő kódot a django-crispy-forms konfigurálásához a Bootstrap 4 használatához.# TODO: Set template_pack CRISPY_TEMPLATE_PACK = 'bootstrap4'
A sablon frissítése django-crispy-forms használatára
A django-crispy-forms csodálatos munkájának nagy része egy szűrő használatával történik. A szűrő lehetővé teszi, hogy egy változót egy sablonban vegyen fel, és átadja egy másik kezelőnek vagy folyamatnak. Esetünkben a szűrő átalakítja az crispy
űrlapot a megadott sablonra, a Bootstrap 4-re.
A Visual Studio Code-ot megnyitva nyissa meg a dog_shelters/templates/dog_form.html fájlt.
Az olvasási
{# TODO: Load crispy_forms_tags #}
sor alatt adja hozzá a következő kódot a szűrő vagy címke betöltéséhez.{# TODO: Load crispy_forms_tags #} {% load crispy_forms_tags %}
A szűrő használatához
crispy
cserélje le az alábbi kódra beolvasott{{ form.as_p }}
sort.{{ form | crispy }}
A webhely tesztelése
Minden telepített és frissített, teszteljük oldalunkat.
Az összes fájl mentéséhez válassza az Összes mentése lehetőséget>.
Nyissa meg a
http://localhost:8000/dog/register
URL-címet a böngészőben.Látni fogja, hogy a lap most a Bootstrap-t használja az űrlaphoz.
Most frissítette az alkalmazást, hogy az űrlap Bootstrap-t használjon.
Segítségre van szüksége? Tekintse meg a hibaelhárítási útmutatót, vagy küldjön visszajelzést hibák bejelentésével.