I am building a website with a unique homepage design (homepage has a different header and logo arrangement than all the other pages). However, I would like to have a base template which everything inherits from, to cut down on redundancies.
-base.html
-basehome.html (inherits from base.html)
-basesecond.html (inherits from base.html)
-about.html (inherits from basesecond.html)
-etc...
So base.html holds the html declaration and the structure. Basehome.html and basesecond.html contain the different header structures and the various other pages on the site inherit from basesecond.html.
So the problem I keep running into is, it seems like I need to put a block within a block to handle the body content which is obviously contained the (furthest) child template. As far as I know, Django does not let you do this.
base.html--
<html>
<head>
<title>Mysite</title>
</head>
<body id="{% block bodyholder %}{% endblock %}">
<div id="hd">{# start of hd #}
{% block hd %}{% endblock %}
</div>{# end of the hd #}
<div id="bd">{# start of body #}
{% block bd %}{% endblock %}
</div>{# end of body #}
</body>
</html>
basehome.html--
{% extends "base.html" %}
{% block bodyholder %}bodyhome{% endblock %}
{% block hd %}
big logo and wide header
{% endblock %}
{% block bd %}
homepage body content
this part works just like I want it to.
{% endblock %}
basesecond.html--
{% extends "base.html" %}
{% block bodyholder %}bodysecond{% endblock %}
{% block hd %}
small logo and narrow header
{% endblock %}
{% block bd %}
second page body content
here is where I want to put extra blocks like
{% block unique about page sidebar %}{% endblock %}
but it breaks the template system
{% endblock %}
What is the best way to solve this problem?
If you're using exactly what you have shown you need to re-write a small portion:
instead of this
{% block unique about page sidebar %}{% endblock %}
replace it with this
{% block unique %}{% endblock %}
{% block about %}{% endblock %}
{% block page %}{% endblock %}
{% block sidebar %}{% endblock %}
Otherwise, everything looks like it should work. What error codes or behavior are you seeing that you aren't expecting?
Related
In Django, can we add block content in a included html page? Is it feasible?
base.html
{% block title %}
<p>This is title base.html</p>
{% endblock title %}
{% include "head.html" %}
head.html
{% block subtitle %}
<p>This is subtitle head.html</p>
{% endblock subtitle %}
index.html
{% extends 'base.html' %}
{% block title %}
<p>This is title index.html</p>
{% endblock title %}
{% block subtitle %}
<p>This is subtitle index.html</p>
{% endblock subtitle %}
Final result
<p>This is title dashboard.html</p>
<p>This is subtitle head.html</p>
Meaning, that when we are rendering index.html, it will not find the subtitle block on head.html
Thanks!
As stated in the documentation:
The include tag should be considered as an implementation of
“render this subtemplate and include the HTML”, not as “parse this
subtemplate and include its contents as if it were part of the
parent”. This means that there is no shared state between included
templates – each include is a completely independent rendering
process.
Blocks are evaluated before they are included. This means that a
template that includes blocks from another will contain blocks that
have already been evaluated and rendered - not blocks that can be
overridden by, for example, an extending template.
In simpler words as you notice, what you try is not possible.
How to overcome this? Simply bring the blocks to the parent template:
base.html
{% block title %}
<p>This is title base.html</p>
{% endblock title %}
{% block subtitle %}
{% include "head.html" %}
{% endblock subtitle %}
head.html
<p>This is subtitle head.html</p>
index.html
{% extends 'base.html' %}
{% block title %}
<p>This is title index.html</p>
{% endblock title %}
{% block subtitle %}
<p>This is subtitle index.html</p>
{% endblock subtitle %}
I have a base.html template which contains basic html definitions .The other templates are defined below
// pages/dashboard.html
{% extends 'base.html' %}
{% block body %}
{% include 'components/nav.html' %}
{% include 'components/dashboard.html' %}
{% endblock %}
// components/dashboard.html
<div class="page-container">
<div class="main-page">
{% block dashboard %}
{% endblock %}
</div>
</div>
// mailer/new.html
{% extends 'pages/dashboard.html' %}
{% block dashboard %}
<h1>hello</h1>
{% endblock %}
The view renders mailer/new.html the problem is that the block containing <h1>hello</h1> is not working. Where am i going wrong with that ?
{% include %} doesn't work that way. See the note in the documentation for that tag:
Blocks are evaluated before they are included. This means that a template that includes blocks from another will contain blocks that have already been evaluated and rendered - not blocks that can be overridden by, for example, an extending template.
Okay so I have my index.html file which has a file called info.html which exntends from the index.html file but it isn't quite working currently. Here's my code:
index.html
<body>
{% include "home/quote.html" %}
{% include "home/intro.html" %}
{% block content %}
{% endblock %}
{% include "home/projects.html" %}
{% include "home/goals.html" %}
</body>
info.html
{% extends "home/index.html" %}
{% block content %}
<section class="info-section">
<div class="info-section_content">
{% include "home/includes/info-content.html" %}
</div>
</section>
{% endblock %}
Essy Fix!
In views.py in the apps directory i was rendering the parent file (index.html) so I have now switch to render the child file (info.html) and it now works.
I would need some more information on your project to know for sure, but I would check to make sure that you are referencing the proper namespace here:
{% extends "home/index.html" %}
For instance if the path is something like templates/home/something/info.html or templates/something/home/info.html this could be the issue.
Django-cms multiple inheritance does not work.
I have the following template structure:
base.html
{% block content %}
{% endblock content %}
page1.html
{% extends "base.html" %}
{% block test %}
{% endblock test %}
page2.html
{% extends "page1.html" %}
{% block content %}
<div>foo</div>
{% endblock content %}
{% block test %}
<div>foo</div>
{% endblock test %}
The problem is that the block test in page2 HTML is not rendered. Only the blocks from base.html are rendered. If I include block test in base.html is also gets rendered in page2
Does your base.html contain {% block test %}?
Your base template must contain the block you want to override. You can add additional blocks in child templates, but they must be contained within a base block.
See https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance
base.html is your top level template. This would normally be the thing that starts with an html doctype and ends with a </html> tag. Everything else has to have a place to go in there. All you have is a content block.
So where would the test block go? You've tried to put it in page1.html, but it still needs a place to go in the parent template.
I am using the Django template system in my app, and in the child template I reference the {% extends "base.html" %} accordingly, though when redenring the template, it only comes up with the html tags and no css styling-thus not picking up the base.html template altogether.
Please advise on what I am doing wrong?. Could it be an issue with it not finding the location of my base.html template?
This is the child template code:
{% extends "base.html" %}
{% block content %}
{% for field in form %}
{{ form }}
{% endfor %}
{% endblock %}
This is the base.html template code (relevant parts):
<div id="content">
<h2>
Page heading - This is where the functionality goes...
</h2>
<FIELDSET><INPUT class=Test value="Test" type=submit></FIELDSET>
{% block primary %}{% endblock %}
</div>
Please let me know if you need any firther information to solve this issue.
-I will add the views.py this evening (London time)--
This all all sorted, many thanks for the help
Thanks
Like goliney mentioned...
You need to have a part in your base.html file that has
{% block content %}
{% endblock %}
Then you can override that in your other template that extends the base.html template.
Currently in your child template you could do a
{% block primary %}
whatever you want here and this would show up where you marked on the base.html template
{% endblock %}
Also not sure if you are just putting together a quick example or not. You will need to create the
<form action="" method="post">{% csrf_token %}
for loop here
</form>