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 %}
Related
I am familiar with the concept of extends and include with django templates.
However, I am trying to build up pages with components (which relates more to the "include" approach). Unfortunately, some elements on a page should be added in the header of the page (e.g. stylesheets) and some should be added at the end of the page (e.g. scripts).
Is there a way to declare blocks (e.g. {% block extraheaders %}<link...>{% endblock %}) in the included files so they are placed in the correct region of the page?
Perhaps you are looking for the following setup:
<!-- base.html -->
<html>
<head>
{% block css %}
<link href="/css/bootstrap.css">
<link href="/css/base.css">
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
{% block js %}
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/base.js"></script>
{% endblock %}
</body>
</html>
{% extends base %}
{% block css %}
{{ block.super }}
<link href="/css/home-page.css" />
{% endblock %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
{% block js %}
{{ block.super }}
<link href="/js/home-page.js" />
{% endblock %}
...with the main point being that we can use {{ block.super }} to place specific resources into a parent template's blocks through inheritance.
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 am trying to modify the part {% block contentLeft%}.
However, I can not change this part only. When I use {{super}} I get the full block but I can not change it.
I can not edit a block in a block.
I used includes, I tried to remove the block tags for the body however I can not modify the tag contentLeft, contentCenter, contentRight
I am also looking to change the name of modules in the administration page, do you have an idea? I changed the name of the models but I can not change the name of the "application"
Default value it's not a good solution (i post a sample exemple)
{% extends "base.html" %}
{% block title %}Ma page Date{% endblock %}
{% block body %}
{{ block.super }}
{% block contentLeft %}
essai
{% endblock %}
{% block contentCenter %}
centre
{% endblock %}
{% block contentRight %}
droite
{% endblock %}
{% endblock %}
{% load static %}
{% block body %}
<body>
{% block header %}
{% include 'header.html' %}
{% endblock %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
{% block contentLeft %} Toto1 {% endblock %}
</div>
<div class="col-md-8">
{% block contentCenter %} Toto2 {% endblock %}
</div>
<div class="col-md-2">
{% block contentRight %} Toto3 {% endblock %}
</div>
</div>
</div>
{% block footer %}
{% include 'footer.html' %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/mdb.js' %}"></script>
</body>
{% endblock %}
<!DOCTYPE html>
<html lang="fr">
{% block head %}
{% include 'head.html' %}
{% endblock %}
{% block body %}
{% include 'body.html' %}
{% endblock %}
</html>
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?