I'm calling a template in extended template.
I can't not find 'how to extended template call the other template in jinja2?'
base.html
<div class="main-container">
{% block content %}
{% endblock %}
</div>
child.html
{% extends "base.html" %}
{% block content %}
<div class="child">
<button class="modal"/>
{% modal content %}
{% endblock %}
</div>
{% endblock %}
modal content.html
<div class="modal-content">
...some code
</div>
I want call modal content in child.html.
If you're meaning you want to add the content.html into the child.html page, use include
Within child.html:
{% include 'content.html' %}
Related
I have two distincts template which must be extended in three diffrents page.
Is there a solution to extends a template with if block?
I tried this without success.
{% if 'project' in request.get_full_path %}
{% extends 'index.html' %}
{% elif 'network' in request.get_full_path %}
{% extends 'base.html' %}
{% elif 'zoneset' in request.get_full_path %}
{% extends 'base.html' %}
{% endif %}
{% load crispy_forms_tags %}
{% block title %} Network {% endblock title %}
{% block content %}
<div class="row">
<div class="col-md">
<div class="card card-body">
<h6>Update</h6>
<form class="" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form|crispy}}
<input type="submit" name="" value="Update">
</form>
</div>
</div>
</div>
{% endblock %}
If you work with template inheritance, {% extends … %} [Django-doc] should be the first template tag. You can not use an {% if … %} block, nor is it a good idea to detect the parent based on the full path of the request.
You can do this in the view, and work with:
def my_view(request):
context = { 'parent': 'index.html' }
return render(request, 'my_template.html', context)
and then in the template use:
{% extends parent %}
…
I'm using jazzmin for django admin and mptt. After adding mptt to admin, in jazzmin theme add button disappeared.
I'm using latest versions of all libraries
class CustomMPTTModelAdmin(MPTTModelAdmin):
# specify pixel amount for this ModelAdmin only:
mptt_level_indent = 30
admin.site.register(Menu, CustomMPTTModelAdmin)
Here you can see the admin where button disappeared
When I disable jazzmin or remove Mptt add button returns back on place
INSTALLED_APPS = [
# 'jazzmin',
.....
]
Here you can button returns back
There is also issue was opened on github
https://github.com/farridav/django-jazzmin/issues/126
but I could not find solution for this problem
I was facing the exact same issue while using django-mptt and django-jazzmin together. It seems that the admin template admin/mptt-change-list.html currently does not have the {% change_list_object_tools %} tag present, which causes the Add button to not be rendered.
The solution is to override the mptt-change-list.html template with:
{% extends "admin/mptt_change_list.html" %}
{% load admin_list i18n mptt_admin %}
{% block result_list %}
<div class="row">
<div class="col-12 col-sm-8">
{% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
</div>
<div class="col-12 col-sm-4">
{% block object-tools %}
{% block object-tools-items %}
{% change_list_object_tools %}
{% endblock %}
{% endblock %}
</div>
<hr>
<div class="col-12">
{% mptt_result_list cl %}
</div>
{% if action_form and actions_on_bottom and cl.show_admin_actions %}
<div class="row">
<div class="col-12">
{% admin_actions %}
</div>
</div>{% endif %}
</div>
{% endblock %}
I'm trying to load a header template into my index with {% block %} but I can't get it to load
index.html
<body>
<header>
{% block header %}{% endblock %}
</header>
<h1>Hello</h1>
</body>
header.html
{% extends "index.html" %}
{% block header %}
<div class="header">
<i class="fas fa-archive"></i>
<i class="fas fa-home"></i>
<h1>hey</h1>
</div>
{% endblock %}
views.py
def index(request):
categories = Category.objects.all()
context = {'categories': categories}
return render(request, 'category/index.html', context)
The app is installed in the settings.
To get things to work the way you wanted you would need to make header.html the base template then extend index.html off of it. This is because header.html is only substituting in {% block header %} when you render header.html. Index.html doesn't see any of these substitutions when rendered. You may want to make the header.html file a static file and load it in that way. Similar to how you would with css.
To achieve what you want to you should render header.html now, check django docs.
It's better to have a layout and then put the header block inside it.
layout.html
...
<body>
<header>
{% block header %}{% endblock %}
</header>
<h1>Hello</h1>
{% block content %}{% endblock %}
<footer>
{% block footer %}{% endblock %}
</footer>
</body>
...
index.html
{% extends "layout.html" %}
{% block header %}
the header
{% endblock %}
{% block content %}
here the content
{% endblock %}
{% block footer %}
here the footer
{% endblock %}
Now you can render the index.html in your view
It seems if I use {% extends "base.html" %} it inherits the template correctly but the navbar doesn't use bootstrap.
If I use {% extends "bootstrap/base.html" %} it doesn't even work. I don't get errors but it just sets the title to Index and then the page is blank.
Another note: The only way I've gotten the navbar to show up is directly putting it inside index.html and using {% extends "bootstrap/base.html" %}
I am using Flask Web Development by Miguel Grinberg and the code is identical except the obvious content.
What am I doing wrong? And does anyone have good resources for slowly jumping into Flask that doesn't just dive in head first? I'm having trouble understanding the little nitpicky details.
base.html:
{% extends "bootstrap/base.html" %}
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
</head>
<body>
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>
index.html:
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
When using the template inheritance it is common to define the structure of the layout in the base template, and then provide the specific details of each child template in the blocks (like content, page_content, etc).
In the above example where the base template itself is a child template (of "bootstrap/base.html"), the same pattern can be used.
Instead of defining HTML tags (like <html>, <head>, etc.) it's better to use the corresponding blocks. Flask bootstrap defines such blocks corresponding to each of these HTML tags, where child templates can override.
So if you change the base.html template as follows, then the index template can use the layout defined in bootstrap/base:
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
Note that in the head block, we are using super() to bring whatever Flask bootstrap has defined in the head block (could be loading CSS, JS files, etc.). This allows the base.html template to customize the head section. However if you do not require this control and only want to specify the title of the page, then you can avoid overwriting head block and just define the title block. To do this change base.html file to start like:
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
Removing {% block head %} ... section.
And then modify your index.html template to define the page_name block instead of title:
{% extends "base.html" %}
{% block page_name %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
Now the title of the index page will be "Index - MyFlask", so you could have a common suffix for the title of all the pages.
Or if you need each page to have their own specific title, you may define the title block in there, overriding the title block in base.html.
I am using jinja2 as a template language in my project. Here is simplified templates structure:
base.html:
{% block content %}{% endblock %}
{% block sidebar %}{% endblock %}
content.html:
{% extend 'base.html' %}
{% block content %}
<div class="content">
Content
{% block sidebar %}
<div class="sidebar">Sidebar</div>
{% sidebar %}
</div>
{% endblock %}
And the result of content.html render:
<div class="content">
Content
<div class="sidebar">Sidebar</div>
</div>
<div class="sidebar">Sidebar</div>
As you may see, sidebar is present twice at rendered content.html.
Question:
Is there a way to avoid appearance of the sidebar in content, leaving {% block sidebar %} inside {% block content %} ?
I think your content.html template is invalid - you're clearly positioning sidebar related content inside the content block, so it will allways appear there. Also, your base.html seems invalid as well, it should look more like:
{% block content %}{% endblock %}
{% block sidebar %}{% endblock %}