自定义 Django 管理模板答案

【问题标题】：Customize Django admin template自定义 Django 管理模板
【发布时间】：2018-09-07 02:20:59
【问题描述】：

我尝试像这样自定义导航栏

Base_site.html

 {% block nav-global %}
 <img class = "brand_img" src = "{% static 'images/ic_launcher.png'%}" 
    width = "50" height = "50" alt = "logo">
 {%block branding%}    

  {% endblock %}
  <div class = "head">
    <h1 id = "name">Admin Dashboard</h1>
  </div>    
{% endblock %}

看起来像这样

现在我尝试在 {%block branding%} 中添加登录页面的标题

但如果我在品牌块内添加它也会显示在导航栏中，如果我尝试在品牌块中添加图像和标题图像将显示登录页面标题。

如何为导航栏和登录页面标题添加不同的标题？

【问题讨论】：

标签： django django-templates django-admin

【解决方案1】：

这很容易实现。

在您的templates 文件夹中，您应该已经创建了一个admin 子文件夹。在那里，您应该将文件 base_site.html 和 login.html 放在里面。

base_site.html的内容：

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

{% load static %}

{% block branding %}
    <div class="head">
        <h1 id="name">Admin Dashboard</h1>
    </div>
{% endblock %}

{% block nav-global %}
    <img class="brand_img" src="{% static 'images/ic_launcher.png'%}" width="50" height="50" alt="logo">
{% endblock %}

login.html的内容：

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

{% block branding %}
    <div class="head">
        <h1 id="name">Custom header text for LOGIN screen only</h1>
    </div>
{% endblock %}

以下是正确的项目结构：

project/
    myapp/
    myapp2/
    project/
    templates/
        admin/
            base_site.html
            login.html
    manage.py

请注意您要覆盖的每个 html 模板中的 extends。这是至关重要的。欲了解更多信息，请查看docs。

【讨论】：

如何将徽标放在name 标签之前？我可以在 OP 图像中看到徽标似乎位于页面名称的左侧。却得不到效果。会有什么办法？
我认为它应该像交换 {% block branding %} 和 {% block nav-global %}. 中的内容一样简单，或者覆盖 {% block branding %} 并将 h1 和 img 都放在那里，然后声明并留空{% block nav-global %}.
第二个技巧根本不起作用（名称值完全丢失）。第一种方法奏效了。不过name和logo之间没有空格，好像骑在logo上一样！！
如果问题是水平空间问题，可以根据您的需要通过#name {margin-left: 20px;}等CSS规则或类似规则解决。但这是另一个通过屏幕截图提出的问题，以便可视化您的问题。

【解决方案2】：

我发现你需要像这样调整DIRS in TEMPLATES in settings.py：

TEMPLATES = [
    {
        'BACKEND': .....,
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # <-- add this line here
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                .....
            ],
        },
    },
]

这是告诉您的应用程序在哪里查找这些文件所必需的。除了上面@nik_m 的解决方案之外，这对我有用....

【讨论】：