How to modify a template in Django without affecting the default layout?

Question

Django

I have a couple of questions about customizing templates in Django.
1) I figured out how the template changes as a whole, but adding a line with (for example) {% extends "admin/base_site.html" %} is not enough, and everything that goes in the default template disappears if not copied into the new template . Is there another simple way to ADD the code I need in the right place?
2) Another question: I want to make a button only on a page of a certain model (in the same application). How to do it? This link should open a new window with a couple of fields and a datepicker. In principle, I can easily connect jquery'-ui, and it will do everything I need. But is it possible to use ready-made Django components? Is it done like this?

Answer 1

The ModelAdmin has a change_form_template property. Specify the template file for the model in it

Answer 2

1) How does it disappear? In the inherited template, everything remains as it is in the ancestor template.
That is, if you create a template in a project and write only in it
, it will be, in fact, the same template.
I will give an example from my project, you can navigate it. You can redefine blocks by expanding them (adding what you need), or even removing content from them.

Template example

{% extends 'admin/base_site.html' %}

{% load js_storage %}
{% load admin_static %}
{% load i18n %}
{% load pipeline %}


{% block extrastyle %}
    {{ block.super }}
    {% stylesheet 'Jcrop' %}
    {% stylesheet 'admin-core' %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {% js_storage_out %}
{% endblock %}

{# Из заголовка удалили конкретную для страницы крошку, оставив только site_title #}
{% block title %}{{ site_title|default:_('Django site admin') }}{% endblock %}

{# Добавили логотип #}
{% block branding %}
    <img src="{% static "images/logo_50.png" %}" class="logo" />
    {{ block.super }}
{% endblock %}

{# Убрали приветствие пользователя #}
{% block welcome-msg %}
{% endblock %}

{# Убрали ссылку View Site #}
{% block userlinks %}
    {% if user.is_active and user.is_staff %}
        {% url 'django-admindocs-docroot' as docsroot %}
        {% if docsroot %}
            <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
        {% endif %}
    {% endif %}
    {% if user.has_usable_password %}
    <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
    {% endif %}
    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
{% endblock %}

{% block footer %}
    {{ block.super }}
    {% javascript 'jquery-mousewheel' %}
    {% javascript 'js-cookie' %}
    {% javascript 'Jcrop' %}
    {% javascript 'plupload' %}
    {% javascript 'admin-core' %}
{% endblock %}

2) You can customize admin templates for a specific model by overriding them in the project templates folder. For example, if I have an application users, it has a model user, and for it I need to customize the object list template, then I create a file templates/admin/users/user/change_list.htmland do what I need there

An example of redefining the admin template for a model

{% extends 'admin/change_list.html' %}

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript">
        var url = js_storage.url_users_user_show_user_password;
        (function($) {
            $(document).ready(function($) {
                $('#result_list td.field-rawpassword').click(function(event){
                    var $target = $(event.currentTarget);
                    var user_id = $target.closest('tr').find('td.action-checkbox input[type=checkbox]').val()
                    if(!$target.data('shown')){
                        $.get(url, {user_id: user_id}, function(data, status, xhr){
                            $target.html('<span style="font-family: Monospace">' + data.raw_password + '</span>');
                            $target.data('shown', true);
                        });
                    }
                });
            });
        })(django.jQuery);
    </script>
{% endblock %}