CODEWITHSUNDEEP
pythonhtmldjango
Liondancer
Liondancer

Reputation: 16469

Creating Modular templates with template inheritance

I am new to Django and I am practicing template inheritance. I am currently having trouble inheriting templates on the 3rd level. The base level is a template that my whole site uses (ex: navbars). The second level is the content of my site. However this content is a bit lengthy so I took a portion(contactform.html) of it and created its own HTML file for that portion.

I am able to get my home.html into my index.html like so

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head lang="en">
  <link href="{% static "css/boothie.css" %}" rel="stylesheet" type="text/css">
  <script src="{% static "js/boothie.js" %}"></script>
  <script src="{% static "js/jquery.easing.1.3.js" %}"></script>

  <title>Boothie</title>
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

Within my home.html I want to include my contactform.html. This is what I have so far.

{% extends "index/index.html" %}

{% load staticfiles %}

{% block content %}


   ...
   ...
   ...stuff...

<!-- contact -->

{% block contactform %}{% endblock %}

{% endblock %}

My contactform.html:

{% extends "home/home.html" %}

{% load staticfiles %}

{% block contactform %}

<section id="contact">
   <!-- HTML! -->
</section>

{% endblock %}

This is what is currently in my home/views.py:

from django.shortcuts import render
from django.views import generic


class HomeView(generic.TemplateView):
    template_name = "home/home.html"

my home/urls.py:

from django.conf.urls import patterns, url

from home.views import HomeView

urlpatterns = patterns('',
    url(r'^$', HomeView.as_view(), name="home"),
)

TEMPLATE_DIRS:

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, 'templates'),
    os.path.join(BASE_DIR, 'home'),
)

here is a picture of my project structure:

enter image description here

Upvotes: 0

Views: 70

Answers (2)

Joe Petrini
Joe Petrini

Reputation: 489

Instead of inheriting, just include the contactform template in the home template. In home/home.html put:

<section id="contact">
  {% include 'home/contactform.html' %}
</section>

Upvotes: 3

karthikr
karthikr

Reputation: 99620

You dont need to extend, instead include

Example, keep the contents of the contact_form.html with just the required html content (without the extends, and the block tag, etc..), and then include the html snippet. Now, django would do the magic for you - The included snippet would have all the context variables too. 

{% extends ".." %}

{% load staticfiles %}

{% block content %}


   ...
   ...
   ...stuff...

   {% include /path/to/contactform.html %}

{% endblock %}

Upvotes: 1

Related Questions