I have a working Django app that has started giving me a template block error on my Windows 11 development PC:
Invalid block tag on line 17: 'endblock', expected 'endblock' or 'endblock stylesheets'. Did you forget to register or load this tag?
I looked at this stackoverflow article:
Invalid block tag : 'endblock'. Did you forget to register or load this tag?, but I don't have the typo that that article discusses. It is in a base.html template:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static 'assets/img/orange-img.png' %}" type="image/x-icon">
<title>
Clever - {% block title %}{% endblock %}
</title>
<!-- Specific Page CSS goes HERE -->
<link rel="stylesheet" href="{% static 'assets/css/blue_theme.css' %}">
{% block stylesheets %}
{% endblock stylesheets %}
</head>
<body class="hold-transition {% block body_class %}{% endblock body_class %}; w3-theme-l4">
{% block content %}{% endblock content %}
<div style="text-align: center">
{% include 'includes/footer.html' %}
</div>
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
{% endblock javascripts %}
{% include 'session_security/all.html' %}
</body>
</html>
The error gets generated on line 17: {% endblock stylesheets %}. I have tried putting the block and endblock on the same line, it gives me that same error with the different line number. I don't have a space between the curly braces and the percentage signs. I am running this with python 3.11.1 and Django 3.2.16 on my Windows PC. I tried it with python 3.7.3 with the same results. I have the app running on a Ubuntu instance with python 3.10.6 and Django 3.2.16, and it works. For what it's worth, I use PyCharm on my Windows PC.
Any suggestions?
Thanks--
Al
In the immortal words of Gilda Radner--"never mind". I had a typo in another template that was causing the error in this template... The lesson learned is don't use vim when you're so tired that you don't notice you're in insert mode when you do a ':w'...
--Al
Thank you very much guys! that issue has solved!(Here is my old post Django name 'admin' is not defined )
but it show nothing. I want to show the content in header.html & home.html
here is the code personal/views
from django.shortcuts import render
def index(request):
return render(request,'personal/templates/personal/home.html')
And here are the code of home and header
{% extends "personal/header.html" %}
{% block content %}
<p> Hey welcome to my very first project by Django :D </p>
{% include "personal/includes/"htmlsnippet.html %}
{% endblock %}
header:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harry-Phuc Coi</title>
<meta charset="utf-8">
</head>
<body class="body" style="background-color: #f6f6f6f6">
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>
And here is my path
my path
Firstly, note that you should specify the template relative to your templates directory, so you shouldn't need the personal/templates prefix.
return render(request,'personal/home.html')
Secondly you have " in the wrong place. It should be at the end of the template name.
{% include "personal/includes/htmlsnippet.html" %}
I've created a base.html file where I want my bootstrap3 navbar and footer to live. These will be used on every page of my site.
However, the base.html & corresponding css file that goes with it seems to overwrite all of the index.html file and specific css for that view.
I've read the django documentation and closely-related questions like this one on overriding the base template. Other website have tutorials but still aren't making sense. I believe I am misunderstanding something fundamental.
Here is the code:
base.html:
<!DOCTYPE html> {% load staticfiles %}
<html>
<head>
<link rel="stylesheet" href="/static/css/main.css" />
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
</head>
<body>
{# Load the tag library #} {% load bootstrap3 %} {# Load CSS and JavaScript #} {% bootstrap_css %} {% bootstrap_javascript %} {# Display django.contrib.messages as Bootstrap alerts #} {% bootstrap_messages %} {# Navigation Menu #}
<header>
<nav class="navbar navbar-default">
----->Navbar code here<-----
</nav>
</header>
<footer>
<div class="container">
<p>Good stuff is here in the footer</p>
</div>
</footer>
</body>
</html>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Online community">
<meta name="author" content="My name">
<title>Planet</title>
<link href="/static/css/homepage.css" rel="stylesheet">
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<p>WORDS WORDS WORDS WORDS</p>
<h1>HERE ARE SOME BIG WORDS ON THE MAIN PAGE</h1>
{% endblock content %}
</body>
</html>
I can include the css files for index.html & base.html if it helps but I believe the problem lies somewhere with my understanding of extending the base template and how to use {% block content %}. I can remove that block and it doesn't seem to matter either.
Thank you for any insights you can provide.
It looks like you're trying to use template extending
In simplicity, you should structure your files like so:
base.html
<head> </head>
<body>
{% block content %}
index.html will be loaded and everything within
the block named "content" will display here
{% endblock %}
</body>
<footer> </footer>
index.html
{% extends 'base.html' %}
{% block content %}
Everything within this block, named "content", will
be inserted into the "content" block of base.html
{% endblock %}
Your combined HTML would look like this once it passes through Django's templating system:
<head> </head>
<body>
Everything within this block, named "content", will
be inserted into the "content" block of base.html
</body>
<footer> </footer>
Your view will need to return the rendered index.html. This system is designed such that you can continue to use base.html with other templates to maintain a standard structure or page design, while modifying only the content on those pages with different versions of index.html.
so essentially I'm a recent convert to Django (and Python for the matter) from PHP. In PHP I'm used to being able to automate many things, especially when writing HTML I used to be able to write such commands such as <?php get_head() ?> and it would go fetch all the meta information that needs to be inside the <head></head> of the HTML page. Is there any such functionality built into Django, or am I going to have to write all the HTML manually?
Thanks so much for any pointers.
You are going to love the extends and block tags.
Assuming you already got a templated page working, you can extract the basic setup of your HTML page like this:
Create a template called base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<body>
{% block body %}
Empty page.
{% endblock %}
</body>
</html>
Now, in your page template called page.html, you can extend your base template and override any blocks:
{% extends "base.html" %}
{% block title %}Page 1 title{% endblock %}
{% block body %}
Real page content.
{% block main %}
Subpage of page.html can also override this main block.
{% endblock %}
{% endblock %}
But Hamish is right, do checkout the doc:
https://docs.djangoproject.com/en/dev/topics/templates/
I do html/css by trade, and I have been working on and off django projects as a template designer. I'm currently working on a site that uses Jinja2, which I have been using for about 2 weeks. I just found out through reading the documentation that Jinja2 doesn't support multiple level template inheritance, as in you can't do more than one
{% extends "foo" %}
per rendering. Now I'm pretty sure you can do this in Django, which is powerful because you can specify a base template, specify 3 or 4 templates based on that, and then build the meat of your pages using those base templates. Isn't the point of inheritance so you have more power to abstract so your only really messing with unique code?
In any case I have no idea what to do here. I don't know if there is some way I can do it that will work as well as it could with the Django templates. I'm not exactly an expert at either Django or Jinja(2) but I can provide any information needed.
One of the best way to achieve multiple level of templating using jinja2 is to use 'include'
let say you have 'base_layout.html' as your base template
<!DOCTYPE html>
<title>Base Layout</title>
<div>
<h1>Base</h1>
.... // write your code here
{% block body %}{% endblock %}
</div>
and then you want to have 'child_layout.html' that extends 'base_layout.
{% include "base_layout.html" %}
<div>
... // write your code here
</div>
{% block body %}{% endblock %}
and now your page can just extends 'child_layout.html' and it will have both base_layout.html and child_layout.html
{% extends "child_layout.html" %}
{% block body %}
...// write your code here
{% endblock %}
The way the documentation worded it, it seemed like it didn't support inheritance (n) levels deep.
Unlike Python Jinja does not support
multiple inheritance. So you can only
have one extends tag called per
rendering.
I didn't know it was just a rule saying 1 extends per template.... I now know, with some help from the jinja irc channel.
Try this, this work for me thanks to #Ixm answer.
base.html
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
{% block content %}{% endblock %}
</body>
</html>
content.html
{% extends "base.html" %}
{% block content %}
<table>
<tr>
{% include "footer.html" %}
</tr>
</table>
{% endblock %}
footer.html
{% block footer %} <td> test</td>{% endblock %}
and call with
env = Environment(loader=FileSystemLoader(os.path.join(path, "Layouts")))
template = env.get_template('content.html')
html = template.render()
print html
After struggling for a long time, I found {{super}} for multiple levels of inheritance in jinja2 templates.
The following is inspired from https://stackoverflow.com/a/31093830/1300775.
base.html
<html>
<body>
{% block title %}
Brand
{% endblock %}
</body>
layer-1.html
{% extends "base.html" %}
{% block title %}
{{ super() }} - Section
{% endblock %}
layer-2.html
{% extends "layer-1.html" %}
{% block title %}
{{ super() }} - Article
{% endblock %}
Rendering template layer-2.html will output Brand - Section - Article in block title.
I recently faced the same issue. I wanted to inherit several child templates and it worked. To illustrate it I would like to show you a solution that worked for me:
I had a base.html file that has block content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:
|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)
when I rendered it, everythink worked fine, which means that you can have several {% extends %} in one render. the only thing is that if you are using relative links to your css or js files then it might not work, rather it will render, but it won't find your css/js files.
like:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>
In that case you have to use dynamic links by using url_for. like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">
See the documentation extending, including, and importing.
This provides the means of getting functionality from multiple files for different purposes and is different from the depth of the nesting.
You can perfectly have a template that extends a template that extends a template...
Multiple inheritance and multiple-level inheritance are not the same. I understand the question is related to the latter.
Let me show my workaround for the problem:
parent-template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Your Title</title>
<link rel='stylesheet' href="{{ url_for('static', filename='css/main.css') }}">
{% block head %}{% endblock %}
</head>
<body>
{% block nav %}{% endblock %}
{% block body %}{% endblock %}
</body>
</html>
child-template.html
{% extends 'parent-template.html' %}
{% block nav %}
<header>
<div>
<nav>
...
[navbar html code]
...
</nav>
</div>
</header>
{% endblock %}
login.html (where I don't need navbar)
{% extends 'parent-template.html' %}
{% block body %}
<header>
...
[header html code]
...
</header>
<main>
...
[main html code]
...
</main>
{% endblock %}
home.html (where I need navbar)
{% extends 'child-template.html' %}
{% block body %}
<main>
...
[main html code]
...
</main>
{% endblock %}
Both login.html and home.html uses all the data from parent-template, but only home.html uses data from child-template (the navbar).
You could use the following way to combine different contents into a single layout.html for various layout designs:
{% if instance == 'type1' %}
{% elif instance == 'type2' %}
{% else %}
{% endif %}
...and call:
render_template('layout', instance='%s' % instance)
in python code.