搜索

首页 >科技周边 >IT业界 >如何使用Bootstrap重新设计和自定义Django管理员

如何使用Bootstrap重新设计和自定义Django管理员

Lisa Kudrow
Lisa Kudrow原创
2025-02-14 08:52:12579浏览

如何使用Bootstrap重新设计和自定义Django管理员

> django管理网站很棒 - 功能齐全，易于使用，设计，设计，坚固……且有些丑陋，当您想将其与其他外观整合在一起时，这可能是一个不利之处您的网站。让我们对此进行排序。

钥匙要点

    通过集成Bootstrap的设计模板和响应功能，利用Bootstrap来增强DJANGO管理员的视觉吸引力和用户体验。
  • 覆盖Django的默认管理模板允许与主站点进行无缝集成，保持一致的品牌和导航。
    • 自定义过程涉及修改`myproject/settings.py'中的设置，并在模板目录中创建新的模板文件以结合Bootstrap样式和脚本。
  • > 可以将共享导航栏和其他共同元素添加到主站点和管理模板上，从而促进跨平台的统一用户界面。
    • >通过仔细管理类定义并使用浏览器调试工具来解决重叠CSS的潜在问题。
    • 如果没有破产……
  • >
    • >默认Django管理员。 （源）

说您刚刚与Django和vue.js进行了制作的Web应用程序。对于各种各样的情况，将Django的管理员按原样用于后台目的，甚至在适当设置权限后将其处理给您的客户都很好。毕竟，它的运作良好，可以通过内置工具进行大量定制以涵盖许多情况。
> 如何使用Bootstrap重新设计和自定义Django管理员>再次，为什么要打扰
攻击管理的外观和感觉 但是，有许多有效的理由将集成进一步：>
  • >品牌：想要公司的名称和颜色而不是“ Django Administration”没有错（为了记录，这符合Django的BSD许可）。 主站点和管理员之间的无缝集成：您可能希望能够通过拥有一个公共导航栏在导航站点时在后台功能之间过渡。
    • >漂亮：虽然管理员看起来还不错，并且自从V2（在移动和台式机上都很好地运作良好）以来，它甚至已经实现了响应式的Web设计原则，但是有很多精心设计的样式表可以使它看起来更好。
    • 旁路功能：您可能还只想为管理员创建自定义下拉菜单，显示您实际使用的选项并隐藏在用户界面中，您实际上不需要的内容，这可能会带来更好的用户体验。
  • 一个实践示例
    • 在此示例中，
  • >不重复自己，我们将恢复使用django and vue.js文章的Web应用程序启动的简单发布Web应用程序。 简而言之：

>带有两个模型的Django应用：

>带字段名称作者（链接），内容和slug

>的文章

作者：带有字段名称和slug

>
    >一个称为前端的单个视图，该视图查询这两个模型中的所有注册表。>
  • 一个称为模板的单个模板。
    • 用Vue Router和Vuex实现Vue.js，用于反应性可伸缩接口。
    • >我们不会特别关心此期间的vue.js集成，我们不会在这里修改它。
  • 基本模板
  • 源
    • django模板非常广泛且功能强大，可以在应用程序级别（Django站点的一个组件）或站点级别上创建，甚至可以覆盖Django随附的模板（这就是我们的'' LL在这里做）。

源

如何使用Bootstrap重新设计和自定义Django管理员我们创建了一个基本模板，该模板链接到Bootstrap的JavaScript和样式表，以及其伴随工具，JQuery和Popper。
>这是我们用于主站点的基本模板，与我们通常用于任何其他Django网站使用的基本模板完全不同：
>

接下来，我们将将其集成到管理员中，并在两端添加共享导航栏 - 主站点和后台！

>

将主UI模板与Admin

集成 如前所述，我们可以覆盖模板，包括管理模板。但是，由于Django的设计，而且毫不奇怪，主站点和后台是两个不同的系统，每个系统都有自己的模板，样式表和贡献包。因此，即使它们将是

>几乎相同的>，我们也需要维护两个不同的模板 - 一个用于主UI，一个用于管理员。 启用模板的目录一般> 首先，我们需要告诉django我们将在基本目录中存储被黑客攻击的管理模板。> SE

对此更改该代码：

>包装管理模板（Admin/Base Hack）

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
>如果我们只是想进行化妆品更改，例如将自定义样式表传递给管理员，或删除/更换其标题，我们可以通过编辑Admin/base_site模板并完全跳过此当前步骤，从而与之相处。但是，如果我们想一路走并“包裹”管理员部分，就好像它包含在我们的主站点中，并且有可能拥有一个通用的标头和页脚，请继续阅读。

>我们需要将Django的admin/base.html复制到模板/admin/base.html中的模板目录，以便我们可以放置包装器。

我们将编辑容器部分周围的代码，以便从此范围内：> 
<span>'DIRS': [],
</span>

：

>仅此而已！我们只是创建了Bodyheader和Bodyfooter Block标签，因此我们可以注入将在下一步中包装管理员的代码。

编码自定义管理模板（admin/base_site hack） 然后，我们将在模板/admin/base_site.html中对实际模板进行编码（我们需要在项目的根部创建目录）：>

崩溃

<span>'DIRS': [os.path.join(BASE_DIR, 'templates')],
</span>
>让我们尝试解释我们在这里做什么：

  1. 我们告诉模板引擎我们正在“扩展” admin/base_site.html模板，以有效地覆盖其某些定义。
    2. 我们利用标题块自定义了浏览的管理页面标题。
  2. >
    3. 我们清空了品牌和面包屑块的内容，因为我们真的不需要它们。
  3. >
    4. 我们使用BodyClass块来设置Bootstrap的BG-Light，就​​像我们在前端模板中所做的那样。
    5. 我们使用Extrastyle块嵌入引导程序和一些CSS代码。 一个。好的，#header，.breadcrumbs {display：none; }是数字3的重述；但是知道您可以双向禁用品牌和面包屑部分，这很有用。 b。当与Django的CSS重叠时，可能会有一些问题，因此这些是一些修复程序。
  5. >使用Bovyheader和Bodyfooter块来包装管理员内容。
  6. >现在我们可以访问管理模板，我们可以进一步进一步的样式表，或者只需使用主UI的共享样式。
caveats

>我们维护两个不同的模板（Main UI和Admin）进行基本相同的表示。诚然，这并不理想，因为我们明确打破了软件开发的最高版本之一：不要重复自己（干燥）。

> 正如我们所评论的那样，这是因为Django管理员的设计被设计为从主UI脱离。这没什么错，就像开箱即用的思考没有什么错一样。但是，是的，这迫使我们使用两个具有几乎相同内容的模板。

>

实际上

，原则上，我们可以设计一个模板模式，其中包括Navbar和Main UI和Admin的其他常见元素，并从该单个源重复使用它们；但是在这一点上，出于本文的目的，这种方法将有点过分杀伤。无论如何，我会为您提供这个想法。 ？

制作共享导航栏 >现在，主UI和管理站点看起来几乎相同，我们可以进一步集成并进行常见的导航体验……甚至在主菜单上呈现一些Admin选项！

这是Navbar的片段：

请注意下拉菜单部分，该部分将负责介绍管理菜单（有关更多信息，请参见Bootstrap的Navbar组件）。

>我们还对{％user.is_authenticated％} /{％endif％}进行有条件的检查，以决定是否显示管理员菜单。

> 最后，请记住，由于我们现在正在维护两个不同的主要模板，因此我们需要将NAVBAR的HTML代码添加到这两种模板中模板/admin/base_site.html。
<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

额外：管理员登录屏幕

管理站点已经得到了照顾，

>

>仍然有一个松散的结尾：登录屏幕。 现在我们可以转动这样的东西：

如何使用Bootstrap重新设计和自定义Django管理员
源

…进入这样的东西：

>

如何使用Bootstrap重新设计和自定义Django管理员

我们可以通过在templtes/admin/login.html中创建以下模板来实现更接近此操作的事情： 

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
崩溃

我们在这里做什么：

    {{{block.super}}标签在那里告诉模板引擎，我们没有覆盖Extrastyle的内容（我们在模板/admin/admin/base_site.html模板中定义了），但我们只是简单将内容附加到它（有关更多信息，请参见模板继承）。
    2. >品牌块使我们能够将“ Django Administration”标头更改为更有趣的东西。
  2. 我们通过设置一个空的定义来摆脱head_title块。
    3. 我们使用content_title块添加一些额外的信息。
  3. >
  4. 一些考虑因素

源
如何使用Bootstrap重新设计和自定义Django管理员
>就像Bootstrap一样，Django Admin站点也寄出了自己的jQuery捆绑包，但幸运的是，Django开发人员认为这是通过并避免与用户提供的脚本和库发生冲突的，Django的JQuery被称为Django.jquery。因此，我们可以安全地包含您自己的副本（如我们所做的那样）。
>
在主要样式表中的班级定义疯狂时要小心，因为这也会影响管理站点，以意外的方式影响其功能。在此事件中，您始终可以查看浏览器调试工具的情况，例如Chrome DevTools，Firefox开发人员工具（尤其是页面检查员）或Safari开发人员工具。

>演示和完整代码

我们在这里讨论的这个实现将看起来像这样：

>

>您可以在我的github存储库中浏览所有项目代码，luzdealba / djangovuejs。

总结有些人可能会声称 - 相当合理地说，不需要更改Django的管理员外观，但同样，

>顺利地整合网站的不同端点是一个很好的hack，可以改进UX

，因为它可以在两者之间提供无缝的过渡，甚至可以提供管理员的更具控制的导航。

这样做并不是那么困难。您需要注意的是如何包装管理员，以及如何将第三方库与自己的JavaScript代码和样式纸混合在一起。幸运的是，您可以很容易地将其中一些集成到管理员中，其中一些在主站点的其余部分中，而有些则融入了两者中。

>。

希望您对如何以不明显的方式来进一步自定义django有一些想法！

>

如果您需要构建Web应用程序的借口，以便可以使用Django管理员播放，请查看上周与Django和vue.js的Web应用程序的原型教程，这很有趣。而且，如果您想进一步提高Django技能，那么SitePoint Premium Library为您提供大量资源。

>与Bootstrap自定义Django管理员的常见问题（常见问题解答）

>使用Bootstrap自定义Django管理员的好处是什么？首先，它增强了管理界面的视觉吸引力，使其更加友好和直观。 Bootstrap是一个流行的前端框架，为排版，表单，按钮和其他接口组件提供各种设计模板。通过将其与Django管理员集成在一起，您可以利用这些模板创建更具视觉吸引力和功能性的管理界面。其次，它允许您在管理接口中添加自定义功能。例如，您可以添加自定义操作，过滤器和表格，以提高管理员界面的可用性。最后，它可以提高管理员界面的响应能力，使其在不同的设备和屏幕尺寸上更容易访问。

如何将自定义操作添加到Django Admin？

django Admin允许您允许您允许您添加可以在选定对象上执行的自定义操作。要添加自定义操作，您需要定义一个在所选对象上执行所需操作的函数。此功能应采用三个参数：模型管理员，请求和选定对象的QuerySet。定义此功能后，您可以将其添加到模型管理员的“操作”属性中。这将使操作在“管理员更改列表”页面上的操作下拉列表中可用。

>我可以使用bootstrap自定义django admin的外观和感觉吗？使用Bootstrap的Django管理员感觉。 Bootstrap是一个前端框架，可为排版，表单，按钮和其他接口组件提供各种设计模板。通过将其与Django管理员集成在一起，您可以利用这些模板创建更具视觉吸引力和功能性的管理界面。您可以自定义管理界面的颜色，字体，布局和其他设计元素，以匹配您的品牌标识或个人喜好。

>

>如何将自定义过滤器添加到django admin？

django admin允许您添加可用于过滤“管理员更改列表”页面上显示的对象的自定义过滤器。要添加自定义过滤器，您需要定义django.contrib.admin.simplelistfilter的子类。该子类应定义两种方法：查找和QuerySet。查找方法应返回一个元组列表，每个列表代表过滤器选项。 QuerySet方法应基于所选过滤器选项返回过滤后的QuerySet。定义此子类后，您可以将其添加到模型管理的“ List_filter”属性中。要将Bootstrap与Django Admin一起使用，没有任何其他软件包，使用Django-Admin-bootstrap之类的软件包通常更容易，更有效。该软件包为Django管理员提供了一个基于引导程序的主题，从而更容易将Bootstrap与Django Admin集成在一起。它还提供了其他功能，例如响应式设计和自定义表单渲染，它可以进一步增强管理界面的可用性和功能。

>

>如何自定义Django Admin中的表单字段？管理员允许您自定义用于创建或编辑对象的表单字段。要自定义表单字段，您需要覆盖模型管理员的“ FormField_For_DBField”方法。此方法应返回将用于指定数据库字段的表单字段实例。您可以自定义表单字段的属性，小部件和验证行为以适合您的需求。

我可以将自定义视图添加到django admin吗？要添加自定义视图，您需要在模型管理中定义一个处理视图逻辑的方法。此方法应将请求作为其唯一参数并返回响应。然后，您可以通过在模型管理员的“ get_urls”方法中添加URL模式来将此方法映射到URL。这将使您可以从管理界面访问视图。

>

如何自定义django admin中的列表显示？

django admin允许您自定义列表显示，哪个是对象表显示在管理变更列表页面上。要自定义列表显示，您可以将模型管理员的“ list_display”属性设置为要显示的字段名称列表。您还可以在此列表中包含方法名称，该名称将在每个对象上调用相应的方法并显示结果。

>我可以将Django Admin用于复杂的数据库模型吗？它提供了各种功能，可以帮助您管理复杂的数据结构，例如相关对象，自定义表单字段和自定义操作的内联编辑。但是，对于非常复杂的数据结构或高级数据库操作，您可能需要使用自定义视图，表单或操作扩展Django Admin。有几种方法可以提高Django管理员的性能。一种方法是优化数据库查询。 Django Admin会根据您的模型定义和管理选项自动生成数据库查询。但是，这些查询有时可能会降低，尤其是对于复杂的数据结构或大型数据集而言。通过自定义管理选项并使用Django的数据库优化功能，您可以显着减少数据库查询的数量并提高管理员接口的性能。另一种方法是使用缓存。 Django提供了一个强大的缓存框架，您可以使用该框架来缓存昂贵的操作或经常访问的数据的结果。通过使用缓存，您可以减少数据库上的负载并提高管理员界面的响应能力。

以上是如何使用Bootstrap重新设计和自定义Django管理员的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript django firefox jquery css chrome safari bootstrap html chrome devtools Array Object define if sort for while include try Directory Filter using class Interface Conditional Attribute Event copy map JS number function default this display transition table github idea database web app ux ui Access vuex router Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：How to Find & Fix Common Website Accessibility Issues下一篇：4 Most High-Demand Skillsets for Remote Jobs

相关文章

查看更多