This is the index.html
{% extends 'base.html' %}
{% block content %}
<h1>list of {{title}}</h1>
{% if questions %}
<ul>
{% for question in questions %}
<li>
{{question.title}}
</li>
{% endfor %}
</ul>
{% else %}
<p>there is a no question available</p>
{% endif %}
{% endblock %}
details.html
{% extends 'base.html' %}
{% block content %}
<H2>Details Page</H2>
<h3>{{question.title}}</h3>
{% for choice in question.choices %}
<p>{{choice.text}}({{choice.votes}})</p>
{% empty %}
<p>There is no choice available for this Question</p>
{% endfor %}
<p>Poll is created by {{question.created_by.first_name}}</p>
{% endblock %}
This is base.html
{%load static%}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPage</title>
<link rel="stylesheet" href="(%static 'css/custom.css'%)">
</head>
<body>
<h1>Welcome to My Page</h1>
{% block content %}
{% endblock %}
</body>
</html>
And poll.urls
from django.conf.urls import url
from poll.views import *
urlpatterns = [
url('', index, name='polls_list'),
url('<int:id>/details/', details, name='polls_details')
]
So this is what happens I have 3 questions that display on the index.html, on clicking any of them it changes to the proper url but does not open the requested page. How do I solve this. Do keep in mind that i just started django two days ago so pardon my naivety.Thanks
In urls.py you are using the url() function but path syntax. Change it to path:
path('', index, name='polls_list'),
path('<int:id>/details/', details, name='polls_details')
Edit If you're using pre-2.0, path syntax is not supported, so you need to use regexes:
url('^$', index, name='polls_list'),
url('^(?P<id>\d+)/details/$', details, name='polls_details')
Can you please edit your url as per the code below. Django can handle the url creation.
{{question.title}}
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'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/
base.html
<!DOCTYPE html>
<html>
<head>
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
head.html
<title>Example</title>
body.html
<h1>Example Django</h1>
Using django, you can render the template "base.html" but replace the blocks "head" and "body", respectively, by templates "head.html" and "body.html"?
If i understand you right, you need include tag
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include
<!DOCTYPE html>
<html>
<head>
{% include "head.html" %}
</head>
<body>
{% include "body.html" %}
</body>
</html>
{% include "base.html" %}
{% block head %}
{% include "head.html" %}
{% endblock %}
{% block body %}
{% include "body.html" %}
{% endblock %}
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'm wondering if anyone knows how to deal with the following quirky template structure:
### base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title> {% block title %} Title of the page {% endblock %} </title>
</head>
<body>
<header>
{% block header %}
{% include "base/header.html" %}
{% endblock header %}
</header>
{% block content %}{% endblock %}
</body>
</html>
### base/header.html
<div id="menu-bar">
{% block nav %}
{% include "base/nav.html" %}
{% endblock %}
</div>
### base/nav.html
<nav id="menu">
<ul>
<li>
My Profile
</li>
<li>
My Favorites
</li>
{% block extra-content %}{% endblock %}
</ul>
</nav>
And, the heart of the matter:
### app/somepage.html
{% extends "base.html" %}
{% block content %}
<p>Content is overridden!</p>
{% endblock %}
{% block extra-content %}
<p>This will not show up, though...</p>
{% endblock %}
{% block nav %}
<p>Not even this.</p>
{% endblock %}
The problem is when extending a template you can only override the blocks declared in the parent only, not any of its children.
I suppose I could make base.html a husk of empty unused nested blocks covering all future contingencies, but would even that override properly? And is that the only way?
If you're wondering why I have a bi-directional include/extends workflow around base.html, I have many sub-templates that I want to get used all across the project: Headers, footers, navs, sidebars, etc. They all will be consistant in structure across the entire site, but in many cases a whole subdivision of the site will only need a few of those sub-templates. My idea was to define the sub-templates under the templates/base folder, and have templates/base-type1.html, templates/base-type2.html, etc to extend in other places. Each type would only reference the sub-templates needed, and override them to place content as needed.
It seems to be little known that you can use the with keyword with the include to pass variables into the context of an included template - you can use it to specify includes in the included template:
# base.html
<html>
<body>
{% block header %}{% include "header.html" %}{% endblock %}
</body>
</html>
# header.html
# some stuff here
<div id="header">
<img src="logo.png">
{% include nav_tmpl|default:"navigation.html" %}
</div>
# special_page.html (uses other navigation)
{% extends "base.html" %}
{% block header %}
{% include "header.html" with nav_tmpl="special_nav.html" %}
# you might also want to wrap the include in an 'if' tag if you don't want anything
# included here per default
{% endblock %}
This approach saves you at least from having one additional file just for the purpose of overwriting a block. You can also use the with keyword to pass a value through a bigger hierarchy of includes as well.
A terser variant to the solution proposed by #Bernhard Vallant:
# base.html
<html>
<body>
{% block header %}{% include "header.html" %}{% endblock %}
</body>
</html>
# header.html
# some stuff here
<div id="header">
<img src="logo.png">
{% include nav_tmpl|default:"navigation.html" %}
</div>
# special_page.html (uses other navigation)
{% extends "base.html" %}
{% block header %}
{% with nav_tmpl="special_nav.html" %}
{{ block.super }}
{% endwith %}
{% endblock %}
You can solve this by extending your currently-included templates, then including the extension instead of the the currently-included base template.