django-unfold-1: 自定义页面

在django-unfold-0中，我们安装了django-unfold，但是它的默认页面是django admin的页面，我们可以自定义页面，并添加到侧边栏菜单。参照Django Unfold 自定义页面，页面效果如下所示。自定义页面与侧边栏菜单

自定义页面步骤

自定义页面需要基于model，首先在app（假设为start）的models.py中定义一个model，然后make migrations和migrate。

class SampleModel(models.Model):
    name = models.CharField(_("name"), max_length=255)
    description = models.TextField(_("description"), null=True, blank=True)

    class Meta:
        db_table = "sample_models"
        verbose_name = _("sample model")
        verbose_name_plural = _("sample models")

    def __str__(self):
        return self.name

在admin.py中注册model 基于django unfold的写法，自定义页面需要继承UnfoldModelAdminViewMixin和TemplateView。

from start.models import SampleModel
from django.views.generic import TemplateView

from unfold.admin import ModelAdmin
from unfold.views import UnfoldModelAdminViewMixin

class CustomBasedView(UnfoldModelAdminViewMixin, TemplateView):
    title = "Custom Title"  # required: custom page header title
    permission_required = ()  # required: tuple of permissions
    template_name = "start/custom_page.html"


@admin.register(SampleModel)
class CustomAdmin(ModelAdmin):
    def get_urls(self):
        # IMPORTANT: model_admin is required
        custom_view = self.admin_site.admin_view(
            CustomBasedView.as_view(model_admin=self)
        )

        # url: /admin/start/sample_model/custom_page
        return super().get_urls() + [
            path("custom_page", custom_view, name="custom_page"),
        ]

在start目录下创建templates/start目录，在该目录下创建custom_page.html文件，内容如下所示。其中{% block content %}为内容区显示区。

html

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

{% load admin_urls i18n unfold %}

{% block breadcrumbs %}{% if not is_popup %}
    <div class="px-4">
        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
            <ul class="flex flex-wrap">
                {% url 'admin:index' as link %}
                {% trans 'Home' as name %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
                
                {% url 'admin:SampleModel_changelist' as link %}
                {% trans 'Sample models' as name %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

                {% trans 'Custom page' as name %}
                {% include 'unfold/helpers/breadcrumb_item.html' with name=name %}
            </ul>
        </div>
    </div>
{% endif %}{% endblock %}

{% block content %}
    {% trans "Custom page" %}
{% endblock %}

在settings.py的unfold配置中增加侧边栏菜单项，点击可以访问自定义页面。注意link = reverse_lazy("admin:custom_page")中的custom_page与第2步admin.py中的name一致。 return super().get_urls() + [ path("custom_page", custom_view, name="custom_page"), ] sidebar菜单项配置如下：

    "SIDEBAR": {
         "navigation": [
            {
                "title": _("Navigation"),
                "separator": True,  # Top border
                "collapsible": True,  # Collapsible group of links
                "items": [
                    {
                        "title": _("Custom"),
                        "icon": "book",
                        "link": reverse_lazy("admin:custom_page"),
                    },
                ],
            },
        ],
    },

🎉🎉🎉 大功告成！

django-unfold-1: 自定义页面 ​

自定义页面步骤 ​

django-unfold-1: 自定义页面

自定义页面步骤