在Django基本管理页面中覆盖Navbar，使其与base.html相同 [英] Override Navbar in Django base admin page to be same as the base.html

问题描述

在django管理页面中，我想覆盖导航栏(顶部功能区)，使其与"base.html"模板中的导航栏相同.由于不同的原因:

In my django admin pages, I would like to override the navbar (top ribbon) to be the same as the one in my "base.html" template. For different reasons:

• 即使处于管理员视图中，用户也可以浏览网站.
• 要在整个页面上保持相同的样式，即使在管理页面中也是如此.

我正在使用Django 2.2.6.

I am using django 2.2.6.

我真的不知道如何开始，什么是最好的方法.

I don't really know how to start and what would be the best approach.

关于您如何执行此操作的任何建议?

Any advices of how you would do this ?

我当时正在考虑在"templates/admin/"文件夹中创建一个base_site.html文件，然后复制并粘贴我的base.html.

I was thinking about creating a base_site.html file within "templates/admin/" folder and just copy paste my base.html.

我面临的问题是样式.有关更多详细信息，请参见以下内容:

The problem I am facing is styling. Please see below for more details:

# Content of admin/base_site.html:
{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
<!--<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"/>--> # Uncommenting this line will "fix" style on my navbar but break style of all admin pages ...

<script src="{% static 'js/jquery-1.12.3.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endblock %}

{% block usertools %}
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/">
    Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Some action</a></li>
        <li><a href="#">Some other action</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Group</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level</a></li>
            </ul>
        </li>
    </ul>
</div>
{% endblock %}

您可能已经了解，我的base.html中的导航栏是正在使用引导程序，由于我忽略的原因，当尝试在我的 admin/base_site.html模板中导入boostrap时，它被破坏了一般.

As you may have understood, the navbar in my base.html is using bootstrap which for reason I ignored, when trying to importing boostrap in my admin/base_site.html template is breaking style in general.

我是否缺少一种重要的样式来使管理页面正常工作?我以为管理页面已经在使用引导程序了.

Am I missing an important style for admin pages to be working? I was thinking admin page were already using bootstrap.

在这种情况下，如何仅通过将样式导入base_site.html来破坏样式?

In that case, how style can be broken just by importing it in base_site.html?

如果没有，我知道如何将引导程序与缺少的CSS样式结合起来?

If not, any idea how can I combine bootstrap with the missing css style ?

推荐答案

所有管理页面均继承自 admin/base_site.html .为了覆盖顺序，您可以使用自定义代码覆盖此模板.

All admin pages inherit from admin/base_site.html. In order override, you can override this template with your custom code.

此外，应在加载管理应用程序之前加载此模板.这是覆盖基础模板的几个示例应用模板.

Also this template should be loaded before admin app is loaded. Here are a couple of sample app templates that are overriding the base template.

django-admin-env-notice ， django-admin-ribbon

这篇关于在Django基本管理页面中覆盖Navbar，使其与base.html相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！