定制Django管理模板

Question

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

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%}中为登录页面添加标题。

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

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

- Ashok

Answer 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。这一点非常重要，如需更多信息请查看文档。

- nik_m

---

我该如何在“name”标签之前放置徽标？我可以看到在OP图像中，徽标似乎放置在页面名称的左侧。但是我无法获得这种效果。有什么解决方法吗？ - Love Putin Not War

我认为这应该很简单，只需交换{% block branding %}和{% block nav-global %}内部的内容。或者覆盖{% block branding %}并在其中放置h1和img，然后声明并留空{% block nav-global %}即可。 - nik_m

第二个技巧根本不起作用（名称值完全丢失）。第一种方法有效。但是，在“名称”和“**标志”之间没有空格，就像骑在标志上一样！！ - Love Putin Not War

如果问题是水平空间，可以通过CSS规则解决，例如#name {margin-left: 20px;}或根据您的需求进行类似调整。但这需要提供一张屏幕截图以便更好地可视化您的问题。 - nik_m

Answer 2

我发现你需要在settings.py中的TEMPLATES中调整DIRS，像这样：

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

需要这样做是为了告诉您的应用程序在哪里查找这些文件。除了@nik_m上面提供的解决方案之外，这对我来说也很管用....

- Landon