I have error in my template when I try to use inheritance block
Everything works before I convert the login.html into html, which is basically everything from base.html
My html files are as below：
base.html :
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title> {% block title %} {% endblock %} | Company Name</title>
{% endblock %}
</head>
<body>
{% block body}
{% endblock %}
</body>
</html>
login.html :
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block body %}
<form method="POST">
<label for="name_question">What is your name? <br>
<input type="text" name="name"> <br>
<input type="submit" name="submit" value="Submit"> <br>
</form>
{% if name %}
<h1>Hello, {{name}}!</h1>
{% endif %}
{% endblock body %}
Nothing seems wrong with what you are trying to do. This could likely be caused due to a number of other reasons, mainly any of the followings:
I think that the reference to the base template is relative to you
TEMPLATE_DIR. Try different things like putting both templates at the
same level etc.
Check all the tags in both templates to be sure that they are all
correctly formatted
Check the encoding of the files. If it is UTF-8, try to disable the
BOM in both files.
Maybe it is a problem with your directory setting. Try to hard code
the absolute path to check that
My guess would be the final point.
Related
I'm trying to get basic bootstrap formatting working in a django app, and installed django_bootstrap5 to do so. No formatting, however, is getting applied to any of the pages.
Here's the various pages:
base.html:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<div class="container">
{% block body %}
{% endblock %}
</div>
</body>
</html>
I extend this in a simple index page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block title %}
Home
{% endblock %}
{% block body %}
<h1>Hello World</h1>
{% endblock %}
Hello World, however, is not showing up in a container.
This is also failing on a form page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block body %}
<div class="container">
<h1>Sign Up</h1>
<form method="POST">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" value="Sign Up" class="btn btn-default">
</form>
</div>
{% endblock %}
The form is neither in a bootstrap container, nor does it have any styling at all. What am I missing here? Do you need to also load the bootstrap files by cdn or download them and add them to static when using django_bootstrap5? That makes things work, but it seems like it defeats the purpose of installing via pip. Thank you.
Thank you #tdy for tracking this down in the source code on github: one is not supposed to install bootstrap via cdn or by downloading the local files. Those are already included. Instead the preferred way to link is to include the {% boostrap_css %} and {% bootstrap_javascript %} tags. Thus your base.html file should look something like:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
{% bootstrap_css %}
</head>
<body>
<!-- Content -->
<!-- Bootstrap JavaScript -->
{% bootstrap_javascript %}
</body>
As an additional note, even if one did have to install bootstrap via cdn or local files in addition to the django_bootstrap5 package, this still wouldn't defeat the point of the package: django_bootstrap5 makes it easy to integrate bootstrap into django, that's the main point. You can format an entire form in a single line using django_bootstrap5:
<form id="postForm" action="{% url 'posts:create' %}" method="POST">
{% csrf_token %}
{% bootstrap_form form %} # this one line does a TON of work.
<input class="btn btn-primary btn-large" type="submit" value="Post">
</form>
The django_bootstrap5 package also makes it easy to install bootstrap.
Thank you all, especially #tdy for the support, and happy django-ing.
Hello I want to have different sub header under navbar for different pages. so I used {% block %} I learnt. but this time it's not showing anything, no content no error. am I doing it wrong?
Inside navbar.html
<nav>
<div id="bottom header" style="background:yellow;">
{% block sub-header %}
{% endblock %}
</div>
</nav>
then inside base.html I have
extends navbar.html
then inside index.html I have
extends base.html
{% block sub-header %}
<p>hello yall</p>
{% endblock %}
Django does not process blocks in included files.
The include tag should be considered as an implementation of "render
this subtemplate and include the HTML", not as "parse this subtemplate
and include its contents as if it were part of the parent". This means
that there is no shared state between included templates -- each
include is a completely independent rendering process.
See the documentation for more information.
The problem is that {% block sub_header %} is inside navbar.html, which is an included template on base.html. One way to get around this restriction is to extract parts of your nav into the base:
<!-- base.html -->
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
{% include 'navbar.html' %}
{% block sub_header %}{% endblock %}
</nav>
<!-- other HTML here -->
</body>
Then your templates which extend base.html can use {%block sub_header %}
<!-- my-template.html -->
{% extends 'base.html' %}
{% block sub_header %}
<h1>Hello World!</h1>
{% endblock %}
I am a beginner in python and django programming, i have a question that already have been asked in stackoverflow and many forums, but i couldnt solve my own.
this exactly my situation:
this the code in my app html page:
{% extends 'base.html' %}
{% block content %}
<form method="POST" action=""> {% csrf_token %}
{{ form.as_p }}
<footer>
<button type="submit" class="button">Confirmer</button>
</footer>
</form>
{% endblock %}
but in my base.html i have already this form and this classes:
<form action="" class="sky-form">
<section>
<label class="input">
<input type="password" placeholder="Confirmation">
<b class="tooltip tooltip-bottom-right">Retaper votre mot de passe</b>
</label>
</section>
.
.
.
.
</form>
where should i put {% block content %} and {% endblock %} in my base.html!!!!!!
i've also followed the tutorial from the official docs, but it did,'t work out for me
i'm sorry if my question seem silly!
Thanks in advance.
Don't put the form in your base.html.
In your base.html you should have something like this.
<!DOCTYPE html>
<html lang="en">
<head>
...put your css and metatags here....
</head>
<body>
{% block content %}
{% endblock %}
</body>
Then in your app html templates you just include.
{% extends 'base.html' %}
{% block content %}
..... Place form code here!.....
{% endblock %}
Now whenever you want to display code in the body of your html you can just use {% block content %} and not have to re-write the base.html code over and over! Just as the code says you are extending the base template.
Hope this helps! Let me know if you have any other questions.
I have a base template that I'd like to split up into three parts: header, body, footer. Then I use the base template to include the three sub-templates. However, from what I've seen, this means I cannot override {{ block }} content. Is using includes a bad idea then? Or is there a way to override block content in an included template?
I know that you can send static context variables to the included segment, but it needs to be more dynamic.
My code:
In header.html
<html>
<head>
<script url="..."></script>
<link rel="..." />
{% block head_extension %}
{% endblock %}
</head>
<body>
<header>
<div class="headerstuff">
</div>
</header>
Then in the body.html file:
<div class="container">
{% block content %}
Foo fum my content
{% endblock %}
</div>
footer.html:
<footer>
{% block footer %}
Copyright 2015
{% endblock %}
</footer>
</body>
</html>
base.html:
{% include "header.html" %}
{% include "body.html" %}
{% include "footer.html" %}
<!-- and the part that doesn't work -->
{% block head_extension %}
<script src="unique_script"></script>
{% endblock %}
{% block content %}
My unique content
{% endblock %}
{% block footer %}
Copyright 2011
{% endblock %}
<!-- end broken django templating try -->
Am I doing something wrong? The templating documentation seemed to indicate that what I am trying to do doesn't work. It seems like this would be the best way to create easy-to-read templates. Is it better just to have all parts in one large file? As you can imagine, the header, body, and footer elements are much larger than this demonstration. But the point remains.
I am hoping there is a way to do what I'm thinking of that I'm not aware of.
Thanks in advance
Your approach is fine but you are doing this in wrong order. First of all the html starting <html> and ending tag </html> should not be split into different files, it is good to have it in base.html.
Below is an example of how to follow the breakup structure:
base.html
<html>
<head>
<!-- Some stuff here which should be included in all templates for example js or css -->
{% block extra_css %}
<!-- to included app-template dependent css -->
{% endblock extra_css %}
{% block extra_js %}
<!-- to included app-template dependent js -->
{% endblock extra_js %}
{% block extra_head %}
<!-- for anything else inside head -->
{% endblock extra_head %}
</head>
<body>
{% block menu %}
<!-- Default menu here -->
{% block extra_menu %}
<!-- extend menu based on template -->
{% endblock extra_menu %}
{% endblock menu %}
{% block content %}
<div>This is good</div>
{% endblock content %}
{% include "footer.html" %}
{% block bottom_js %}
<!-- if you want to have manual js scripts at bottom -->
{% endblock bottom_js %}
</body>
</html>
Now base.html is all setup now lets suppose from another child template you want to override the base.html block content you will do:
child.html
{% extends "base.html" %}
{% block content %}
<div>This is really good</div>
{% endblock content %}
So when the page will be loaded you will see this is really good instead of this is good (which was defined in base.html inside content block) because you just override it.
If you want that whatever inside the content block in base.html should also be preserved then you need to extend the block rather than overriding it completely by using method {{ block.super }}
child.html
{% extends "base.html" %}
{% block content %}
{{ block.super }}
<div>This is really good</div>
{% endblock content %}
Now you will see both this is good and this is really good. Hope this will clarify your concept and will lead you good.
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.