django-unfold-0: Installation and Configuration

Django Unfold is an admin framework based on Django Admin that uses Tailwind as its CSS framework. In the future, we hope to achieve full-stack development and delivery based on Django Unfold.

Django Unfold Installation

1. Create a virtual environment using uv. For more information about uv, see uv management tool

uv init 
uv venv --python=3.12 # Compatible with the latest version of Django
cd .venv/Scripts
activate

uv add django
uv add django-unfold
uv add cookiecutter
uv add django-crispy-forms

2. Create a project using cookiecutter

Create a project using my cookiecutter template. For details, see Lightweight Django cookiecutter template. Set the project name, author, and version.

cookiecutter git@github.com:silentQQQ/cookiecutter.git

Create a Django app using add_app.py

python add_app.py <app_name>

Verify that the app was created successfully

python manage.py runserver

# Visit app_name url
127.0.0.1:8000/app_name/

Django Configuration

1. settings.py

Static file configuration

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

2. urls.py

Modify the urls.py file to serve static files in debug mode

from django.contrib import admin
from django.urls import path,include

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),

]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

3. Database migration, create superuser

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

Django Unfold Configuration

Django Unfold Configuration

Add configuration items in settings.py. Add comment sections to distinguish from other configuration items. Comment out configuration items that are not currently used.

# =======================================================
# unfold settings
# =======================================================
UNFOLD = {
    "SITE_TITLE": "moomboss demo system",
    "SITE_HEADER": "moomboss website",
    "SITE_SUBHEADER": "Going live tomorrow"
}

# =======================================================
# end unfold settings
# =======================================================

SITE_ICON and SITE_LOGO

Select appropriate icons from icon resources, download the SVG files, and place them in the static directory.

SITE_HEADER and SITE_SUBHEADER are not displayed when site-logo is used

This is a common issue. When SITE_LOGO is used, it will override the display of SITE_HEADER and SITE_SUBHEADER. The design logic of Unfold Admin is: if a logo is provided, it will prioritize displaying the logo instead of the text title.

Solution

If SITE_ICON is used, the icon image, SITE_HEADER, and SITE_SUBHEADER will be displayed. If SITE_LOGO is used, ensure that the logo image contains relevant information such as the website's title and subtitle. In summary, the convenient solution is to use SITE_ICON to display the SITE_HEADER and SITE_SUBHEADER information in the configuration file.

Users & Groups

See User & group models

Add relevant code in the app's admin.py file