django jet 中的自定义徽标

Question

我目前正在尝试对 django 管理面板的皮肤进行一些自定义，以使其更符合我们的品牌。目前我们使用 django-jet 来修饰管理面板。 django-jet 可以自定义 css/html 吗？所有的 cmets 都说我应该更改一些 html 文件，但我认为这些文件在我的项目中是隐藏的，因为 django-jet 会处理它们？如果有人能指出我正确的方向，将不胜感激。

谢谢

Answer 1

这个话题已经在django-jet github page讨论过

我将尝试用我自己的话来改写提供的解决方案

1. 创建 your_app/templates/admin/ 文件夹（如果不存在）
2. 在此文件夹下创建 base_site.html 文件
3. 将以下代码之一复制到此文件并根据您的需要进行自定义

简单代码

{# Template: your_app/templates/admin/base_site.html #}
{% extends "admin/base_site.html" %}
{% load static i18n %}

{# Setup favicon #}
{% block extrahead %}<link rel="shortcut icon" type="image/png" href="{{MEDIA_URL}}your_logo.png"/>{% endblock %}

{# Setup browser tab label #}
{% block title %}{{ title }} |  {% trans "Your title" %}{% endblock %}

{# Setup branding #}
{% block branding %}
    <h1 id="site-name">
        <a href="{% url 'admin:index' %}">
            {# Your logo here #}
            <img style="background-color: white" src="{{MEDIA_URL}}your_logo.png" alt="Your Company Name" height="50%" width="50%">
            <br><br>
            </span> {% trans "Your Branding" %}
        </a>
    </h1>
{% endblock %}

更复杂

{% extends "admin/base.html" %}
{% load static i18n %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
    <h1 id="site-name">
        <span class="icon-jet"></span> {% trans "JET DEMO" %}
    </h1>
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "core/css/branding.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "core/css/icons/style.css" %}" />
{% endblock %}

{% block nav-global %}
    <a href="https://github.com/geex-arts/django-jet" class="sidebar-link icon">
        <span class="sidebar-link-label">
            <span class="sidebar-link-icon jet-demo-icon-github"></span>
            {% trans 'Visit GitHub page' %}
        </span>
    </a>
    <a href="https://github.com/geex-arts/django-jet-demo" class="sidebar-link icon">
        <span class="sidebar-link-label">
            <span class="sidebar-link-icon jet-demo-icon-github"></span>
            {% trans 'Demo site source code' %}
        </span>
    </a>
{% endblock %}

{% block userlinks %}
    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
{% endblock %}

{% block footer %}
    {{ block.super }}
    <!-- Yandex.Metrika counter --><script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32240214 = new Ya.Metrika({ id:32240214, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="https://mc.yandex.ru/watch/32240214" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
    <!-- Google Analytics counter -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-67280038-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- /Google Analytics counter -->
{% endblock %}

Answer 2

#in admin.py file
from django.utils.html import format_html

logo_url= "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
admin.site.site_header = format_html("`<img src={url} height=50 width=50`>", url=logo_url)

Answer 3

在模板文件夹中创建一个管理目录，然后创建 Html 文件并将其命名为 base_site.html 。向其中添加以下内容。

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

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">
        <img src="{% static 'img/my-logo.png' %}" alt="My Company"/>
    </a>
</h1>
{% endblock %}

这就是您使用自定义徽标所做的全部工作。