Reputation: 77
I'm totally new to django CMS (started 2 days ago) and I've followed the tutorial that Divio provides.
I have the home page totally working and it's great and all. I'm trying to create the rest of the pages now and I'm confused.
In my templates directory, I have a base.html
that has the general layout of the site and a block for content.
Then I have content.html
which puts the home page code into the content block.
page-content.html
is where I have the code in the content block for every other page on my site.
My problem is, that whenever I add a new page on my site with the django CMS toolbar, it's always using the content.html
page. Basically, when I click the Add a Page
button, it only adds a page that looks exactly like the home page. I want to have my home page be one layout and then every page from there be a different layout, so that when I click Add a Page
it lets me add a second type of layout. Is this possible?
Note: Both the home and the other layouts are fine as a page. They aren't really news-blog pages or anything like that. Just a regular page that I can put different CMS plugins on is perfect.
Please just let me know if you need more info to properly answer! :)
base.html
{% load staticfiles i18n cms_tags sekizai_tags menu_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>
{% block title %}
{% page_attribute "page_title" %} - {{ request.site.name }}
{% endblock title %}
</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="{% static 'css/ce3.css' %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- django CMS -->
{% render_block "css" %}
<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_head }}
<!-- django CMS toolbar adjustment -->
{% if request.toolbar %}
<style>
.cms-toolbar-expanded .navbar-custom {
margin-top: 45px;
}
</style>
{% endif %}
</head>
<body>
<!-- django CMS Toolbar -->
{% cms_toolbar %}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top navbar-ce3">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">{{ request.site.name }}</a>
</div>
<!-- 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="#">About</a></li>
<li><a href="#">News & Updates</a></li>
<li><a href="#">Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kristina <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Account</a></li>
<li><a href="index-logged-out.html">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Main Content -->
{% block content %}
{% endblock %}
<hr>
<!-- Footer -->
<div class="container footer-container">
<div class="row">
<footer class="footer">
<div class="foot-1">
{% placeholder "address" %}
</div>
<div class="foot-2">
<ul>
<li><a href="">About</a></li>
<li>|</li>
<li><a href="">Terms of Use</a></li>
<li>|</li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</footer> <!-- end footer -->
</div> <!-- end row -->
</div> <!-- end container -->
<!-- jQuery -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Contact Form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- django CMS -->
{% render_block "js" %}
<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_tail }}
</body>
</html>
content.html
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
<div class="container">
<div class="banner-zone">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="title-box">
<h1>{% placeholder "banner title" %}</h1>
<h2>{% placeholder "banner subtitle" %}</h2>
</div>
</div>
<div class="col-md-5">
<div class="black-box">
<p>{% placeholder "banner introduction" %}</p>
</div>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- banner-zone -->
<div class="container">
<div class="row text-block">
<a id="nav-anchor"></a>
<p class="emphasis"><span>The Cookbook.</span> The links below lay out the steps along the CE3 roadmap, from Research and Analysis, to Deployment and Operations. Within each chevron, you will find information, tools and resources to help you complete that step.</p>
</div>
<div class="row" style="margin-top:70px">
<div class="col-sm-5">
{% placeholder "CE3 Pilot Image" %}
</div>
<div class="col-sm-7">
<h3>The CE3 Pilot</h3>
<p>{% placeholder "project introduction" %}</p>
</div>
</div>
</div> <!-- /container -->
</div>
{% endblock content %}
page-content.html
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-4">
<!-- Secondary left-side navbar -->
<div class="navbar navbar-default sidenav-ce3">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-nav">
Phase Menu
</button>
</div>
<div id="side-nav" class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">
<li class="step-through-nav"><a href="index.html#nav-anchor"><span
class="glyphicon glyphicon-chevron-left"></span> Back to Cookbook</a></li>
<li class="active"><a href="prelim-sol-des.html">Preliminary Solution Design Summary</a>
</li>
<li><a href="psd_pull-tog-des.html">1. Pulling Together The Design</a></li>
<li><a href="psd_asbl-tech-req.html">2. Assemble Technical Requirements</a></li>
<li><a href="">3. Develop and Post Competitive Tender</a></li>
<li><a href="">4. Shortlist Selections</a></li>
<li><a href="">5. Reconcile Submission CAPEX with Business Model</a></li>
<li><a href="">6. Iterate Solution Design With Selected Vendors</a></li>
<li><a href="">7. Select Final Design & Finalize Business Model</a></li>
<li class="step-through-nav"><span class="descriptor">up next:</span><a
class="chevron-in-line" href="proj-finance.html">Project Finance</a></li>
</ul>
</div>
</div>
</div><!-- col-sm-4 left-nav -->
<div class="col-sm-8 main-content">
<h1>{% placeholder "page title" %}</h1>
<h4>{% placeholder "page subtitle" %}</h4>
<h3>Purpose</h3>
{% placeholder "purpose" %}
<div class="row">
{% include "page-elements/tools_templates.html" %}
</div>
<div class="row">
{% include "page-elements/helpful_resources.html" %}
</div>
<div class="row">
{% include "page-elements/publications.html" %}
</div>
</div>
</div>
</div> <!-- /container -->
{% endblock content %}
My project structure is as follows:
Upvotes: 2
Views: 892
Reputation: 77
The issue was actually in the settings.py
file.
According to the documentation, templates need to be specified in the CMS_TEMPLATES
within settings.py
(http://docs.django-cms.org/en/release-3.4.x/introduction/templates_placeholders.html#templates)
My original settings.py
file did not have any CMS_TEMPLATES
in it.
Original settings.py file:
INSTALLED_ADDONS = [
# <INSTALLED_ADDONS> # Warning: text inside the INSTALLED_ADDONS tags is auto-generated. Manual changes will be overwritten.
'aldryn-addons',
'aldryn-django',
'aldryn-sso',
'aldryn-django-cms',
'aldryn-devsync',
'aldryn-bootstrap3',
'djangocms-googlemap',
'djangocms-history',
'djangocms-snippet',
'djangocms-style',
'djangocms-text-ckeditor',
'djangocms-video',
'django-filer',
# </INSTALLED_ADDONS>
]
import aldryn_addons.settings
aldryn_addons.settings.load(locals())
# all django settings can be altered here
INSTALLED_APPS.extend([
# add your project specific apps here
])
MIDDLEWARE_CLASSES.extend([
# add your own middlewares here
])
Edited settings.py file:
INSTALLED_ADDONS = [
# <INSTALLED_ADDONS> # Warning: text inside the INSTALLED_ADDONS tags is auto-generated. Manual changes will be overwritten.
'aldryn-addons',
'aldryn-django',
'aldryn-sso',
'aldryn-django-cms',
'aldryn-devsync',
'aldryn-bootstrap3',
'djangocms-googlemap',
'djangocms-history',
'djangocms-snippet',
'djangocms-style',
'djangocms-text-ckeditor',
'djangocms-video',
'django-filer',
# </INSTALLED_ADDONS>
]
import aldryn_addons.settings
aldryn_addons.settings.load(locals())
# all django settings can be altered here
INSTALLED_APPS.extend([
# add your project specific apps here
])
MIDDLEWARE_CLASSES.extend([
# add your own middlewares here
])
CMS_TEMPLATES = (
('content.html', 'Home Page'),
('page-content.html', 'Section Page'),
('sub-section-page.html', 'Sub Section Page'),
)
Once the templates are specified in the settings.py
file, they are available in the CMS Toolbar from Page > Templates.
Upvotes: 1