How to do it...

We will update the Bootstrap-powered base.html template, so that it contains everything that Django CMS needs. Then, we will create and register two templates, default.html and start.html, to choose from for CMS pages:

First, we will update the base template that we created in the Arranging the base.html template recipe in Chapter 4, Templates and JavaScript, as follows:

{# templates/base.html #}
<!doctype html>
{% load i18n static cms_tags sekizai_tags menu_tags %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>
        {% block title %}{% endblock %}{% trans "My Website" %}
    </title>
    <link rel="icon" type="image/x-icon"
          href="{% static 'site/img/favicon.ico' %}">

    {% block meta_tags %}{% endblock %}

    {% render_block "css" %}
    {% block base_stylesheet %}
        <link rel="stylesheet" type="text/css"
              href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
              crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" media="screen"
              href="{% static 'site/css/style.css' %}">
    {% endblock %}
    {% block stylesheet %}{% endblock %}

    {% block extrahead %}{% endblock %}
</head>
<body class="{% block bodyclass %}{% endblock %}">
{% cms_toolbar %}
{% block page %}
<section class="wrapper">
    <header class="clearfix container navbar navbar-expand-lg
                   navbar-light bg-light mb-4 mx-0">
        <h1 class="navbar-brand col mb-0">{% trans "My Website" %}</h1>
        <nav role="navigation" class="navbar-nav col-10">
            {% block header_navigation %}
            <ul class="navbar-nav col">
                {% show_menu_below_id "start-page" 0 1 1 1 %}
            </ul>
            {% endblock %}
            {% block language_chooser %}
            <ul class="navbar-nav col-3">
                {% language_chooser %}
            </ul>
            {% endblock %}
        </nav>
    </header>
    {% block container %}
    <div id="content" class="clearfix container">
        {% block content %}{% endblock %}
    </div>
    {% endblock %}
    <footer class="clearfix container">
        {% block footer_navigation %}
        <nav class="navbar navbar-default" role="navigation">
            <ul class="nav navbar-nav">
                {% show_menu_below_id "footer-navigation" 0 1 1 1 %}
            </ul>
        </nav>
        {% endblock %}
    </footer>
</section>
{% endblock %}
{% block extrabody %}{% endblock %}

{% block base_js %}
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin="anonymous"></script>
    <script src="{% url "js_settings" %}"></script>
{% endblock %}
{% block js %}{% endblock %}
{% render_block "js" %}
</body>
</html>

Then, we will create a cms directory under templates and add two templates for CMS pages, the first of which is default.html, for normal pages:

{# templates/cms/default.html #}
{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %} - {% endblock %}

{% block meta_tags %}
    <meta name="description"
          content="{% page_attribute meta_description %}"/>
{% endblock %}

{% block content %}
    <h1>{% page_attribute "page_title" %}</h1>
    <div class="row">
        <div class="col-md-8">{% placeholder main_content %}</div>
        <div class="col-md-4">{% placeholder sidebar %}</div>
    </div>
{% endblock %}

Then, we will add start.html for the home page, as follows:

{# templates/cms/start.html #}
{% extends "base.html" %}
{% load cms_tags %}

{% block meta_tags %}
    <meta name="description"
          content="{% page_attribute meta_description %}"/>
{% endblock %}

{% block content %}
    {% comment %}
    Here goes very customized website-specific content like
    slideshows, latest tweets, latest news, latest profiles, etc.
    {% endcomment %}
{% endblock %}

Finally, we will set the paths of these two templates in the settings, as shown in
the following code snippet:

# settings.py or conf/base.py
from django.utils.translation import ugettext_lazy as _
# ... 
CMS_TEMPLATES = (
    ("cms/default.html", _("Default")),
    ("cms/start.html", _("Homepage")),
)

Table of Contents for How to do it...

Create new playlist

Sign In

Sign Up

Table of Contents for
How to do it...