Configuring the Content

Now we need to prepare a place for our content to be loaded into the template. Currently, we 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 inside and replace them with the proper content block. It should look exactly 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. To learn more about this, check out the django CMS docs, here.
___

Check your browser and reload. 

At this point, the toolbar will be in the way of viewing the navigation. Disable the toolbar by clicking on the first menu item next to the django CMS logo and click “Disable Toolbar.” 

You should now see the menu on your website. 

Enable the toolbar again by replacing “?toolbar_off” with “?edit” in the website address in your browser. 

This might not help you if you want to stay in “Draft” mode. To solve this, add this simple snippet inside your <head> tag:

<!-- 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. 

Did this answer your question?