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/
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 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!
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', {
I have a base.html file that looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
{% block header %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
and I have a file, auth.html that extends this:
{% extends "base.html" %}
{% block content %}
[MY CONTENT]
{% endblock %}
which works fine, but I also want to have a separate header.html file that plugs into the header block above.
What's the correct way to structure auth.html and header.html in order to include both and to have both extend base.html?
I tried adding a {% include header.html %} line to auth.html, and structuring header.html as follows:
{% extends "base.html" %}
{% block header %}
[HEADER CONTENT HERE]
{% endblock %}
but that didn't work. How should I be doing this?
You need {{ block.super }}:
If you need to get the content of the block from the parent template,
the {{ block.super }} variable will do the trick. This is useful if
you want to add to the contents of a parent block instead of
completely overriding it.
Its burried in the template inheritance documentation.
Suppose you want to add extra stuff to the header block in auth.html. header is defined in index.html:
Your auth.html would look like:
{% extends "index.html" %}
{% block header %}
{{ block.super }}
Your extra stuff, which will come after whatever was in the header block
{% endblock %}