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
Related
Basicly my django project consists of the templates with html.
I would like to fill the context of the site using blocks.
My problem is that I would like to send the block to sidebar and the base part of the page from application's .html files.
Templates:
sidebar.html
footer.html
header.html
base.html
In my base.html I use:
{% include 'partials/_sidebar.html' %}
{% block content %}{% endblock %}
in my sidebar.html I use
{% block sidebar %}{% endblock %}
and in my Application index.html i try to use:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
{% block sidebar %}
<div class="bg-white py-2 collapse-inner rounded"></div>
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
<a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
</div>
{% endblock %}
But it is obviously not working.
The starting page triggers app/index.html with a view.
How to workaround such a problem?
[i cant add post][1]
[1]: https://i.stack.imgur.com/FV3Co.png
Hopefully I can demonstrate how you use blocks by sharing some example templates with you.
Starting with a base template, that generally has the most content and contains the basic markup;
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock title %}</title>
<meta name="description" content="{% block meta_description %}{% endblock meta_description %}">
<meta name="viewport" content="width=device-width,initial-scale=1">
{% block styles %}{% endblock %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript" src="https://kit.fontawesome.com/c3c34cb042.js" crossorigin="anonymous"></script>
{% endblock %}
{% block head_extras %}{% endblock %}
</head>
<body>
{% block header %}{% endblock header %}
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
{% block footer_scripts %}
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
Then a page for content would extend that and you'd include in this template the blocks you want to add content to;
{% extends "base.html" %}
{% load static %}
{% block title %}Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
</div>
</section>
{% endblock content %}
That'd be a really simple setup. But as you've said, you might also use the {% include %} tag.
What that does is inject the content of the included template into the template at the point you use the tag.
So in a template with a sidebar, that might look like;
{% extends "base.html" %}
{% load static %}
{% block title %}Sidebar Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
{% include 'partials/_sidebar.html' %}
</div>
</section>
{% endblock content %}
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.
When User registers successfully, I will display a thank you page.
This page will have a meta tag to redirect after 5 seconds to home.
<meta http-equiv="refresh" content="5;url=http://www.example.com/"/>
However, I need to place it inside the thank you page, that extends from base. Not in base, so not other pages make this redirect.
thank you page:
{% extends 'base.html' %}
{% load staticfiles %}
{% load embed_video_tags %}
{% block metadescription %}
{% if category %}
{{ category.description|truncatewords:155 }}
{% else %}
¡Bienvenidos a Stickers Gallito Perú!
{% endif %}
{% endblock %}
{% block title %}
<p>Stickers Gallito - Confirma tu correo electrónico</p>
{% endblock %}
{% block content %}
<div class="container">
<div class="col-md-12">
<h1> ¡Gracias por registrarte! </h1>
</div>
</div>
{% endblock %}
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Stickers Gallito Perú">
<meta http-equiv="refresh" content="3;url=http://www.google.com/"/>
<meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM"/>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<script src="{% static 'js/footer.js' %}"></script>
</head>
<body>
<div class="general-container">
</div>
{% include 'navbar.html' %}
{% if has_shop_in_url %}
{% include 'header.html' %}
{% endif %}
{% block content %}
{% endblock %}
In the head of your base.html include
{% block extra_head %}{% endblock %}
Then in your page
{% block extra_head %}
<meta http-equiv="refresh" content="5;url=http://www.example.com/"/>
{% endblock %}
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'm creating a Django project, where I want to use multiple levels of inheritance in my templates. E.g I want to do something like this:
project_base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Then in app_base.html I extend this.
{% extends "project/project_base.html" %}
{% block title %}Generic Title{% endblock %}
{% block content %}
<img src="/dir/sub_dir/image.jpg">
{% block app_content %}
{% endblock %}
{% endblock %}
Finally I have my actual template
{% extends app_base.html %}
{% block title %}Specific Title{% endblock %}
{% block app_content %}
{% for obj in objects %}
{{ obj.name }}
{% endfor %}
{% endblock %}
The problem that I have is that when I go to load that page I see a single heading from an entirely unrelated template, and not my list of hyperlinks. What's the correct/best way to have multiple levels of inheritance for my template files?