djangocms-bootstrap

一些用于与django-CMS和Bootstrap3/Bootstrap4配合使用的模板和templatetags。

Django-CMS是前端无关的，这是好事。然而，与Bootstrap3/4结合时，菜单结构并不完全匹配。这是因为Bootstrap3/4只允许一个嵌套菜单级别。

渲染django-CMS菜单

djangocms-bootstrap添加了一些修改后的templatetags，将这些现有的页面树渲染成菜单结构，适用于Bootstrap3/4的navbar。

由于“移动优先”的概念，我们无法使用鼠标悬停事件来打开显示子菜单项的下拉元素。相反，用户必须点击主菜单项才能打开下拉元素。然而，现在点击菜单项以打开下拉菜单或点击由该菜单项引用的页面之间将不再有任何区别。

在此示例中，djangocms-bootstrap 使用特殊的模板标签来渲染导航栏。在这里，CMS页面目录有三个子页面。点击导航栏中的目录，会打开一个下拉菜单，其中包含另一个目录条目。这是带我们到所需页面的链接。使用这种方法，我们可以通过django-CMS页面树进行导航，而无需使用鼠标悬停效果来打开下拉菜单。

用法

在django-CMS中渲染导航栏以显示用于在页面树中导航的菜单

{% load bootstrap_tags %}

<div class="container">
  <nav class="navbar" role="navigation">
    <ul class="navbar-nav mr-auto">
      {% main_menu "bootstrap4/menu/navbar.html" %}
    </ul>
  </nav>
</div>

模板标签{% main_menu ... %}接受一个额外的参数template，可以用于微调导航项的渲染。请注意，只有勾选了“菜单”复选框的CMS页面才会显示在导航栏中。

在Bootstrap-3和4中，导航栏通常比上面显示的短片段要复杂得多。因此，djangocms-bootstrap附带两个HTML片段，它们执行繁重的任务，并应包含在您项目的基模板中。通过在导航栏中添加{% include "bootstrap4/includes/nav-navbar.html" %}，可以渲染一个品牌图标和一个导航栏切换按钮，所有这些都符合Bootstrap的风格指南。

通过将with navbar_classes="navbar-light bg-light fixed-top"添加到include语句中，可以使用提供的CSS类来样式化导航栏。

在django-CMS中选择语言

如果django-CMS配置为在多语言环境中运行，通常需要添加一个选项，允许用户选择他的母语。为此，djangocms-bootstrap提供了一个模板标签language_chooser，它会渲染一个下拉菜单，显示CMS中所有可用的语言。要渲染此选择选项，请将以下HTML片段添加到主导航栏内部或上方

{% language_chooser "bootstrap4/includes/language-chooser.html" %}

渲染次要菜单

编写文档。

渲染分页器

Django列表视图类django.views.generic.ListView默认情况下，如果存在成员属性paginate_by = ...，则将分页器对象添加到渲染上下文中。为了按照Bootstrap的最佳实践渲染此分页器，请将以下HTML片段添加到您将要渲染的项目列表上方或下方

{% load bootstrap_tags %}

<nav aria-label="Paginator example">{% paginator %}</nav>

通过在paginator语句前添加{% with paginator_classes="pagination justify-content-center" %}，可以使用提供的CSS类来样式化分页器。别忘了之后添加{% endwith %}。