Django: Extending base.html in django admin

Question

I've a base.html file which has vertical and horizontal menu-bar:

Wherever I want to use that I just simply write:

{% extends 'base.html' %}

{% block content %}
//html code

{% endblock content %}

But I don't know how to use the same file base.html from templates directory in djando admin.

I want output like this:

What I Tried:

How to override and extend basic Django admin templates?

How do I correctly extend the django admin/base.html template?

Override Navbar in Django base admin page to be same as the base.html

I tried few other solution just don't want to increase the length of question and base.html file's code just has basic bootstrap, html code for menus.

I am new to Django, little explanation would be highly appreciated!

Answer 1

You can just extend the admin's base template as

{% extends "admin/base.html" %}

For example:

{% extends "admin/base.html" %}
{% block sidebar %}
    {{ block.super }}
    <div>
        <h1>Extra links</h1>
        <a href="/admin/extra/">My extra link</a>
    </div>
{% endblock %}

Also, make sure that you have added the admin app to the INSTALLED_APPS

INSTALLED_APPS = [
    # other apps,
    
    'django.contrib.admin',
    
    # other apps,
]

Answer 2

What you are looking is similar to nav-global.

Try this:

First create a folder in your templates folder as admin and create a html file(base_site.html) in the same folder

Assuming you have separate html file for menu-bars(Let's say the file is nav.html).

Write the below code in base_site.html:

{% extends 'admin/base.html' %}
{% block nav-global %}
{% include 'nav.html' %} #Your navigation html file
{% endblock %}

Unrelated to question: I found a git repo which will give you idea how to customize the django-admin menu.