Hello i am newbie in Django, started to learn it today and i have problem with template inheritance
i have such function in my view:
def show(request, id=1):
return render_to_response('template1.html', {
'name': name,
'model1': Model1.objects.get(id=id),
'model2': Model2.objects.get(id=id).model1,
})
And i have 3 different templates, main.html with such code:
<body>
{% block block1 %}
{% endblock %}
{% block block2 %}
{% endblock %}
</body>
</html>
and two more tempaltes that contains code like that:
{% extends 'main.html' %}
{% block block1 %}
<h2>{{ var }}</h2>
<pre>{{ var }}</pre>
{% endblock %}
second one is very similar so i wont show it, problem is: i dont know which one to put in render_to_response function.
if i put main.html:
return render_to_response('main.html', {
it doesn't load any templates, but content from main.html appears well, i can just see empty space on page
if i put template1:
return render_to_response('template1.html', {
It load only content from main and from template1.html but i need content from template2.html
if i put template2.html to function it only shows content from main.html and from template2.html but no content from template1.html
Please help me how to solve that problem.
Option 1) Try using the {% include %} tag.
main.html
<head> ... </head>
<body>
{% block content %}
{% endblock content %}
template1.html
{% extends "main.html" %}
{% block content %}
<h1>Hello world</h1>
{% include "nested_template2.html" %}
{% endblock content %}
nested_template2.html
<p>The world is smaller than you think.</p>
In your view/controller:
return render_to_response('template1.html', {
Option 2) Chain {% extends ... %} tags as deep as you want. I frquently use this structure:
templates/
----base.html
----projects/
----_.html
----detail.html
----list.html
The base.html is the master layout. The folder/_.html is specific to a "stage" (more modular content).
base.html
<head> ... </head>
<body>
{% block stage_content %}
{% endblock stage_content %}
projects/_.html
{% extends "main.html" %}
{% block stage_content %}
<h1>Project Stage</h1>
{% block page_content %}
{% endblock page_content %}
{% endblock stage_content %}
projects/list.html
{% extends "projects/_.html" %}
{% block page_content %}
{% for project in projects %}
<li>{{ project.name }}</li>
{% endfor %}
{% endblock page_content %}
projects/detail.html
{% extends "projects/_.html" %}
{% block page_content %}
Viewing project {{ project.name }}
{% endblock page_content %}
In your view/controller:
return render_to_response('projects/detail.html', {
Related
I'm trying to load different html files into the base.html and they're not showing. Any ideas?
<body class="bg">
<main class='text'>
{% block carousel %}
{% endblock %}
{% block info%}
{% endblock %}
{% block content %}
{% endblock %}
{% block mobile %}
{% endblock %}
</main>
</body>
I think you may be confusing template inheritance with template composition.
In template inheritance, you have a base page like base.html:
<body class="bg">
<main class='text'>
{% block carousel %}
{% endblock %}
{% block info%}
{% endblock %}
{% block content %}
{% endblock %}
{% block mobile %}
{% endblock %}
</main>
</body>
Then, you have a second template shoes.html that extends base.html. It inherits all the HTML from base.html, but fills in some custom content inside the blocks:
{% extends "base.html" %}
{% block carousel %}
<p>Carousel</p>
{% endblock %}
{% block info%}
<p>Info</p>
{% endblock %}
{% block content %}
<p>Content</p>
{% endblock %}
{% block mobile %}
<p>Mobile</p>
{% endblock %}
Therefore, when you render it inside your view:
views.py
from django.shortcuts import render
def index(request):
return render(request, 'polls/shoes.html', {})
you get this result:
<body class="bg">
<main class='text'>
<p>Carousel</p>
<p>Info</p>
<p>Content</p>
<p>Mobile</p>
</main>
</body>
I suspect that you have different HTML files named after each block (e.g. carousel.html, info.html). That's not how Django works (but it is how Ruby on Rails works). Is that what you were trying to do? If not, please update your question to clarify.
I can't get rid of this exception and I have no idea what's wrong. Thanks for everything.
This is my python file
app = Flask(__name__)
#app.route("/login")
def login():
return render_template("login.html")
And this is my login.html
{% extends = "layout.html" %}
{% block title %}
Login
{% endblock %}
{% block heading %}Login {% endblock %}
{% block body %}
<h1>Login</h1>
{% endblock %}
And this is layout.html
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %} - My Webpage</title>
</head>
<body>
<h1>{% block heading %} {% endblock %}</h1>
{% block body %}
{% endblock %}
</body>
</html>
As per Jinja documentation, you cannot put equal to (=) for statements like {% extends %} in your template.
Your login.html should be like this:
{% extends "layout.html" %}
{% block title %}
Login
{% endblock %}
{% block heading %}Login {% endblock %}
{% block body %}
<h1>Login</h1>
{% endblock %}
for more info Check this.
Try {% extends "layout.html" %} instead of {% extends = "layout.html" %}.
If it doesn't work, you can also try taking out all {% %} tags and adding them back in one by one.
I've got a base.html page that has both a header and a footer block.
When I use {% extends "base.html" %} in my home.html page, I get nothing from the base.html page.
If I use {% include "base.html" %}, all my content in the home.html page is at the bottom, with the header and footer at the top. Does anyone know how I can fix this?
I'd like the header block at the top, the content from home.html in the middle, and the footer block rendered on the bottom of the home page.
I'd be grateful for any help. Thanks.
Here is my code. myapp.py
from flask import Flask, render_template, url_for
app = Flask(__name__)
#app.route("/")
#app.route("/home")
def home():
return render_template("home.html", title="Home",
menu = menu)
#app.route("/base")
def base():
return render_template("base.html", title="Base")
if __name__ == "__main__":
app.run(debug=True)
base.html
<!DOCTYPE html>
<html>
<head>
<title>{{title}} - Restaurant</title>
</head>
<body>
{% block header %}
<ul>
<li>Home</li>
</ul>
{% endblock header %}
{% block footer %}
<h1>This is a footer</h1>
{% endblock footer %}
</body>
home.html
{% extends "base.html" %}
{% block header %}
<h1>Home Page</h1>
{% endblock header %}
{% block footer %}
<h1>New stuff in home page</h1>
{% endblock footer %}
Defining a block in a child template automatically overrides the version from the parent template completely. If you want to also output the parent version, you need to call super() - see the Jinja2 docs.
So your home.html should be:
{% extends "base.html" %}
{% block header %}
{{ super() }}
<h1>Home Page</h1>
{% endblock header %}
{% block footer %}
{{ super() }}
<h1>New stuff in home page</h1>
{% endblock footer %}
Try this?
base.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} - Restaurant</title>
</head>
<body>
{% block header %}
<ul>
<li>Home</li>
</ul>
{% endblock header %}
{% block content %}{% endblock %}
<h1>This is a footer</h1>
</body>
home.html
{% extends "base.html" %}
{% block content %}
{% block header %}
<h1>Home Page</h1>
{% endblock header %}
{% block footer %}
<h1>New stuff in home page</h1>
{% endblock footer %}
{% endblock %}
https://flask.palletsprojects.com/en/1.1.x/tutorial/templates/
I have base.html and file with header _header_main.html in my main template index.html i extends base.html and include _header_main.html but variables that i pass into index.html not visible in parent template
base.html:
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<!-- styles -->
...
</head>
<body>
{% block _header_main %}{% endblock %}
{% block _header_mobile %}{% endblock %}
<div class="wrapper">
<!-- header -->
{% block header_main %}{% endblock %}
{% block header_mobile %}{% endblock %}
<div class="after_header"></div>
<!-- end header -->
{% block content %}{% endblock %}
<footer class="footer">
...
</footer>
</div>
</body>
</html>
_header_main.html:
<header class="header">
<ul>
{% for i in servers %}
<li>{{ i.title }}</li>
{% endfor %}
</ul>
</header>
index.html:
{% extends "base.html" %}
{% load static %}
{% block title %}Title{% endblock %}
{% block header_main %}
{% include "_header_main.html" %}
{% endblock %}
{% block content %}
Some content...
{% endblock %}
<scripts>
...
</scripts>
How i can access to variables items in my template?
Edit. My function in views.py
def index(request):
servers = Server.objects.all().order_by('ranking')
basket_count, total_price = basket_calculate(request)
server_arr = [i.title for i in servers]
servers_string = ', '.join(server_arr)
return render(request, 'index.html', {'servers':servers, 'temp_year' : datetime.now().year,
'basket_count':basket_count, 'total_price':total_price,
'servers_string':servers_string })
The reason why my items variable don't show in templates, is because i add <script> tag with js without block, so my scripts didn't work. I add my scripts to {% block script %} and all works fine!
I am having the Issue with Jinja2 Extend and Import.
base_admin.html
<html>
<body>
<div class="outerbody">
<somehtml code>
{% include "base_admin_nav.html" %}
{% include "base_admin_sidebar.html" %}
{% include "base_admin_content.html" %}
</div>
</body>
</html>
base_admin_content.html
<div class="innerbody">
{% block body_content %}
{% endblock %}
</div>
admin.html
{% extends 'base_admin.html' %}
{% block body_content %}
<div>BodyContent</div>
{% endblock %}
The code inside body_content is not passed to base_admin_content.html. Any workarounds?
Note
This is not duplicate of this one
jinja2: blocks in included files..
The include is done in different files here
Defining {% macro admin_content() %} insdide base_admin_content.html and importing it inside base_admin.html using
{% from "base_admin_content.html" import admin_content with context %}
{{ admin_content() }}.
also has no effect.
Edited - to reflect changes in original question
Ok, now that I know you definitely need the includes, here's how I would do it: instead of including the base_admin_content.html file, you should include the admin.html file directly into base_admin.html. The admin.html file will extend base_admin_content.html and everything should work just fine:
base_admin.html
<html>
<body>
<div class="outerbody">
<somehtml code>
{% include 'admin.html' %}
</div>
</body>
</html>
admin.html
{% extends 'base_admin_content.html' %}
{% block body_content %}
<div>BodyContent</div>
{% endblock %}
base_admin_content.html
{% block innerbody %}
<div class="innerbody">
{% block body_content %}
{% endblock %}
</div>
{% endblock %}
Why does this work but your original code does not?
In your base_admin.html file you have
{% include 'base_admin_content.html' %}
Where we have no reference to admin.html, which is why nothing from the admin.html file shows up!. Therefore, we should do this:
{% include 'admin.html' %}
Because that does contain a reference to base_admin_content in the extends line:
{% extends 'base_admin_content.html' %}
Hopefully that makes sense...
You could inherit from base_admin and base_admin_content separately:
base_admin.html:
<html>
<body>
<div class="outerbody">
...
{% block admin_content %}
{% include "default_admin_content.html" %}
{% endblock %}
</div>
</body>
</html>
base_admin_content.html: (unchanged)
<div class="innerbody">
{% block body_content %}{% endblock %}
</div>
admin.html:
{% extends 'base_admin.html' %}
...
{% block admin_content %}
{% include "admin_content.html" %}
{% endblock %}
admin_content.html:
{% extends 'base_admin_content.html' %}
{% block body_content %}
<div>BodyContent</div>
{% endblock %}
This way base_admin doesn't need to know about base_admin_content's blocks,
it's flexible and simple.