Configuring the Content

Now we need to prepare a place for our content to be loaded into the template. Currently, we only have lorem ipsum text in place:

<!-- Main Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p>Lorem ipsum dolor sit amet, ...</p>
      <p>Lorem ipsum dolor sit amet, ...</p>
      <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
  </div>
</div>

Remove the paragraphs including their <p> tags, and replace them with a pair of Django content block tags: 

{% block content %}{% endblock %}

It should now look like this: 

<!-- Main Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

Save your changes. The default text from our default.html  template should now show up. 

Configuring Your Navigation

To render the navigation, we’ll need to replace the following code:

<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about.html">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="post.html">Sample Post</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>
  </ul>
</div>

With this code:

<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    {% with dropdown=True %}
      {% show_menu 0 100 100 100 "includes/menu.html" %}
    {% endwith %}
  </ul>
</div>

This tag automatically renders the main menu from the CMS. 

___

Navigation
The numbers after show_menu  define what levels of navigation are rendered. Learn more about this in the django CMS documentation.
___

Next, head over to djangocms-boilerplate-bootstrap4 and copy dropdown.html and menu.html into your templates/includes/ folder.

Reload the page in your browser. 

The django CMS toolbar may obscure the navigation. To solve this, add this snippet inside the <head>  tag, to push down the content:

   <!-- django CMS toolbar adjustment -->
  {% if request.toolbar %}
  <style>
    .cms-toolbar-expanded .navbar.fixed-top {
        margin-top: 45px;
    }
  </style>
  {% endif %}
</head>

The CMS adds cms-toolbar-expanded  to the document when the toolbar is visible and removes it again when hidden.

You should now see the two pages you added: Home and Blog.

Your base.html  file is now ready to be used. 

You can now apply some optional template modifications & cleanup before moving to the next chapter.

Did this answer your question?