我目前正在尝试对 django 管理面板的皮肤进行一些自定义,以使其更符合我们的品牌。目前我们使用django-jet来美化管理面板。django-jet可以自定义css/html吗?所有的评论都说我应该更改一些 html 文件,但我认为这些文件在我的项目中是隐藏的,因为 django-jet 会处理它们?如果有人能指出我正确的方向,将不胜感激。
谢谢
这个话题已经在 django-jet github 页面中讨论过了
我将简单地尝试用我自己的话重新表述提供的解决方案
- 创建your_app/模板/管理员/文件夹(如果不存在)
- 在此文件夹下创建base_site.html文件
- 将以下代码之一复制到此文件,并根据需要进行自定义
简单代码
{# 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 %}
#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)
在模板文件夹中创建一个管理目录,然后创建 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 %}
这就是您使用自定义徽标完成的全部工作。