Image a base template like this:
{% set styles = [] %}
<!DOCTYPE html>
<html>
<head>
{% for style in styles %}
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8">
{% endfor %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I want to append to the styles variable from a child-template, but it will yield "styles is undefined".
{% extends "base.html" %}
{% do styles.append("index.css") %}
One solution to this would be to define the styles as an empty list when rendering the template from the Python code. But I do not want to add styles=[] to every template I render.
Unfortunately, importing doesn't work either. It won't tell you anymore that "styles is undefined", but it simply won't render in the head section of the parent template.
{% extends "base.html" %}
{% from "base.html" import styles %}
{% do styles.append("index.css") %}
How can this be solved?
PS: You need to add jinja2.ext.do to the extensions if you want to test it.
You can achieve this using blocks
base.html would look like this
<!DOCTYPE html>
<html>
<head>
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8"> {# all global css includes you need #}
{% block styles %}
{% endblock styles %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
and then child.html would look like this:
{% extends "base.html" %}
{% block styles %}
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8"> {# all css files you need #}
{% endblock styles %}
Related
My initial template base.html must load menus with items dynamically loaded at the beginning. Is it possible? Some hints?
You can use template inheritance which is provided by Django. But in your case suppose you have two different templates with names navbar.html and base.html and you want to add navbar.html to beginning of your base.html. With Django tag (i.e. {% include 'navbar.html' %} ) you can include your navbar.html content in your base.html. Just like following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Django</title>
</head>
<body>
{% include 'navbar.html' %}
</body>
</html>
In other scenario if you want to add something to your base.html (for example product_list.html) you can use Django tag (i.e. {% extends 'base.html' %} ) in your destination template but do not forget to use {% block content %} and {% endblock content %} in your base.html (for example in the body tag of base.html and then use {% block content %} and {% endblock content %} in your destination template. Finally just add your codes between that block contents of yours. For more information check the following codes:
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Django</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}{% endblock content %}
</body>
</html>
product_list.html
{% extends 'base.html' %}
{% block content %}
{% for obj in object_list %}
{{ obj.id }} - {{ obj.name }}<br>
{% endfor %}
{% endblock content %}
And if you need something else just go to Django template docs.
views.py
def base(request):
return render(request,"base.html",{'':''})
def index(request):
return render(request,"index.html",{'':''})
base.html
<html>
<head>ppppppppp</head>
<body>
<h1>this is base template</h1>
</body>
</html>
index.html
{% extends "base.html" %}
{% block content %}
<body>
<h1>
Welcome to my app
</h1>
</body>`
{% endblock content %}
Here the issue is django is not at all recognising index.html only displaying extended template.
The correct flow here is to create really :) base template:
base.html
<html>
<head>ppppppppp</head>
<body>
{% block content %} {% endblock %}
</body>
</html>
And in your child templates you can override {% block content %} but leaving <head> etc common for all templates:
index.html
{% extends "base.html" %}
{% block content %}
<h1>Welcome to my app</h1>
{% endblock %}
Also you should not write tag like {% endblock BLOCKNAME %}, just {% endblock %}
wanip.html
base.html
use base.html in wanip.html ,can't show table .how can I use base.html right?
You should create block in base.html and override that block in wanip.html.
Just for your reference.
base.html
<html>
<head>
....
</head>
<body>
....
{% block content %}
....
{% endblock content %}
....
</body>
</html>
And wanip.html will be like
{% extends "base.html" %}
{% block content %}
{{block.super}}
<table>...</table>
{% endblock content %}
I have two files, base.html and homepage.html. Homepage extends base, and adds to block extra. Base should render block extra in a span within the body, but doesn't.
base.html:
{% load sekizai_tags %}
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<span style="color: red;">{% render_block "extra" %}</span>
{% block 'content' %}
{% endblock %}
</body>
</html>
homepage.html:
{% extends 'base.html' %}
{% load sekizai_tags %}
{% block 'content' %}
<p>that's some sweet content ya got there lad</p>
{% addtoblock "extra" %}wow{% endaddtoblock %}
{% endblock %}
And the output:
What really simple thing am I missing?
Aha, I was missing a context preprocessor from my templates.
'sekizai.context_processors.sekizai',
#base.html
<html>
<head><title>Hello world</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
#child.html
{% extends base.html %}
{% block content}
This is the content that
comes here
{% endblock %}
but the html output of base.html not displaying content.? Why this template language not working ?
Template inheritance includes the parent template in the child, not the other way around.
Render child.html and you'll see your content surrounded by the base.html (parent) markup.
Also, you need to quote the parent template name:
{% extends "base.html" %}
{% block content %}
Content!
{% endblock %}