Personnalisez l'écran de gestion de Django. L'écran d'administration par défaut de Django n'a pas l'air très cool, mais vous pouvez personnaliser le design à votre guise. Dans un premier temps, ** quel fichier dois-je utiliser? ** Organiser.

Installation de Django et création de projet

Je suis sûr que peu de personnes lisant cet article ont installé Django, Si tel est le cas, veuillez consulter cet article.

Vérifiez l'emplacement du modèle d'application d'administration

Cela dépend de la façon dont vous créez l'environnement, mais veuillez trouver l'emplacement d'installation dans la bibliothèque à partir de l'environnement d'exécution Python. Il devrait y avoir un répertoire appelé django.contrib.admin.templates. Le modèle de l'application d'administration y est stocké. ** * Ne modifiez pas directement ce fichier. ** </ font>

Copie du répertoire des modèles

Copiez le répertoire django.contrib.admin.templates antérieur dans votre propre projet.

$ cp django/contrib/admin/templates -r path/to/project/

Vérifiez les paramètres des modèles

Django recherche le fichier modèle à utiliser pour le rendu dans le répertoire de l'application répertorié dans INSTALLED_APPS. Cependant, vous pouvez également spécifier un répertoire à rechercher de préférence au répertoire de chaque application. Rien n'est défini par défaut, il est donc recommandé de le définir comme suit.

`settings.py`



TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # <--Vous pouvez spécifier ici le répertoire à rechercher de préférence!!
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins': [
                'bootstrap4.templatetags.bootstrap4',
            ]
        },
    },
]

Jouons avec le modèle comme essai

Il existe un fichier modèle appelé templates / admin / login.html. Jouons un peu avec et personnalisons-le.

`templates/admin/login.html`


{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/login.css" %}">
{{ form.media }}
{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
</p>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}

<div id="content-main">

{% if user.is_authenticated %}
<p class="errornote">
{% blocktrans trimmed %}
    You are authenticated as {{ username }}, but are not authorized to
    access this page. Would you like to login to a different account?
{% endblocktrans %}
</p>
{% endif %}

<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <h1>TEST</h1> <<<--* Essayez de le pousser dans cette zone.
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
  </div>
  {% endif %}
  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="{% trans 'Log in' %}">
  </div>
</form>

</div>
{% endblock %}

Exécuter et vérifier

Lançons le serveur de développement et accédons à http: // localhost: 8000 / admin /.

$ python manage.py runserver

S'il est affiché comme ci-dessous, il réussit.

Personnalisation de l'écran d'administration de Django Première étape