how do I use html block snippets with dynamic content inside a django template that extends another
Posted
by stackoverflowusername
on Stack Overflow
See other posts from Stack Overflow
or by stackoverflowusername
Published on 2010-04-19T20:24:32Z
Indexed on
2010/04/19
21:43 UTC
Read the original article
Hit count: 273
Hi. Can someone please help me figure out a way to achieve the following (see snippets below) in Django templates? I know that you cannot use more than one extends, but I am new to django and I do not know the proper syntax for something like this. I want to be able to do this so that I can use my nested div layout for css reasons without having to type it like that each time and risking a typo. In words, I want to be able to have a page template extend my base.html file and then use html snippets of dynamic template content (i.e. template for loops or other template logic devices, not just a context variable I set from my view controller).
------------------------------------------------------------
base.html
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>{% block title %}Title{% endblock %}</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
{% if messages %}
<div class="messages">
<ul>
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="content">
{% block content %}Page Content{% endblock %}
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
<div class="container1">
<div class="col1">
{% block twocol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block twocol_col2 %}{% endblock %}
</div>
</div>
</div>
------------------------------------------------------------
columnlayout3.html
------------------------------------------------------------
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
{% block threecol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block threecol_col2 %}{% endblock %}
</div>
<div class="col3">
{% block threecol_col3 %}{% endblock %}
</div>
</div>
</div>
</div>
------------------------------------------------------------
page.html
------------------------------------------------------------
{% extends "base.html" %}
{% block content %}
{% extends "columnlayout2.html" %}
{% block twocol_col1 %}twocolumn column 1{% endblock %}
{% block twocol_col2 %}twocolumn column 2{% endblock %}
{% extends "columnlayout3.html" %}
{% block threecol_col1 %}threecol column 1{% endblock %}
{% block threecol_col2 %}threecol column 2{% endblock %}
{% block threecol_col3 %}threecol column 3{% endblock %}
{% endblock %}
------------------------------------------------------------
page.html output
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Title</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
<div class="content">
<div class="twocol container2">
<div class="container1">
<div class="col1">
twocolumn column 1
</div>
<div class="col2">
twocolumn column 2
</div>
</div>
</div>
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
threecol column 1
</div>
<div class="col2">
threecol column 2
</div>
<div class="col3">
threecol column 3
</div>
</div>
</div>
</div>
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
© Stack Overflow or respective owner
