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.
Related
I am using django-leaflet to display on my website and It works fine and displays the map on browser when I include the leaflet_map in the base template but when I use leaflet_map on a template that extends that base template then map doesn't appear on the browser.
This is the code of extended template from base.html and it doesn't show the map on browser.
{% extends 'base.html' %}
{% load leaflet_tags %}
{% block leaflet %}{% leaflet_js %}{% leaflet_css %}{% endblock %}
{% block content %}
{% leaflet_map 'gis' %}
{% endblock content%}
These are the snippets from the base template.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
<!-- Leaflet Info goes here -->
{% block leaflet %}{% endblock %}
</head>
<body>
<div class="content">
{% block content %}{% endblock %}
</div>
I tried to render both render_template('index.html') and render_template('layout.html'). only the header and layouts render. the index is not rendering. where is it going wrong?
app.py
#app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
header.html:
{% block header %}
<div>this is header</div>
{% endblock %}
Layout.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %} - My Site {% endblock %}</title>
<link rel="stylesheet" href="">
</head>
<body>
{% include 'header.html' %}
{% block content %}
<div> this is the layouts <div>
{% endblock %}
</body>
</html>
index.html:
{% extends 'layout.html' %}
{% block content %}
<div>this is index page</div>
{% endblock %}
what happens is that the Jinja concept is a bit different. In case, when you extended layout.html inside the index.html file, you would necessarily need to call the header replacement inside of it as well. So the header was not called. Here is an example:
{% extends 'layout.html' %}
{% block header %}
<div>this is header</div>
{% endblock %}
{% block content %}
<div>this is index page</div>
{% endblock %}
I have developed a project that helps you in a series of automatic creations, in case you want to venture out and help me improve it feel at ease: https://github.com/marcosstefani/flute
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',
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 %}