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

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.

image.png

Recommended Posts

Personnalisation de l'écran d'administration de Django Première étape
Personnalisation de list_filter de l'écran d'administration de Django
Mémo inversé de l'écran de gestion Django
Premier défi Django
Premier développement Django
Développement d'une application WEB avec Django [Création de l'écran d'administration]
Flux d'ajout d'écran Django2
Lorsque vous oubliez le nom d'utilisateur et le mot de passe de l'écran de gestion dans Django
Personnalisation du champ de modèle Django Divers
Réglage du site d'administration de Django
Créer un écran de connexion Django
Renforcer l'apprentissage 4 CartPole première étape
L'histoire de l'échec de la mise à jour de "calendar.day_abbr" sur l'écran d'administration de django