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-lg-offset-2 col-md-10 col-md-offset-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae debitis nobis, quod sapiente qui voluptatum, placeat magni repudiandae accusantium fugit quas labore non rerum possimus, corrupti enim modi! Et.</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-lg-offset-2 col-md-10 col-md-offset-1">
            {% block content %}{% endblock %}
        </div>
    </div>
</div>

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

Configuring Your Navigation

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

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="about.html">About</a>
        </li>
        <li>
            <a href="post.html">Sample Post</a>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</div>

With this code:

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        {% show_menu 0 0 100 100 %}
    </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.
___

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-custom {
        margin-top: 45px;
    }
</style>
{% endif %}

</head>

The CMS adds cms-toolbar-expanded  to the document when the toolbar is expanded and removes it again when collapsed. You can expand and collapse the toolbar by clicking the triangle on the right side of the toolbar.

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

Did this answer your question?