Why is my Django template inheritance not working? - django

I'm working with Django1.8.
I can't overtwrite the version_tag block in my base.html file. It always appears the default content.
This is a simplified version of my base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'myApp/img/favicon.png' %}" rel="icon" type="image/png" />
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'myApp/lib/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'myApp/lib/css/themes/bootstrap.min.css' %}" />
<script type="text/javascript" src="{% static 'myApp/lib/js/jquery.min.js' %}"></script>
</script>
</head>
<body>
<div id="main">
{% block menu %}
{% include "myApp/menu.html" %}
{% endblock menu %}
<div id="container" class="container-fluid">
{% block content %}
{% endblock content %}
</div>
</div>
{% block version_tag %}Default Version{% endblock version_tag %}
</body>
</html>
On the same folder I have the version_tag.html file:
{% extends 'myApp/base.html' %}
{% block version_tag %}
V. 1.2.3
{% endblock %}
What am I missing or doing wrong? Why does it always appear Default Version instead of V. 1.2.3?

There are only two possible causes I can think of:
Your view is still trying to render base.html instead of your inherited html template.
Simply change the view to call the correct one (version_tag.html)
The template you're really trying to display is still inheriting from base.html instead of version_tag.html

Related

Django Flash Message shows up without implementing it in template

i want to show up my Flash Messages in my template. It works, but i cant tell the template where to show or how to show it. It appears all the time in the same place and the same style.
This is my view:
def exportBefunde(request):
(...)
messages.info(request, "Befund exportiert")
return redirect("reporting")
This is my main.html template
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'index.css' %}">
<title>Message Problem - it drives me crazy</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
<!-- Content from other templates -->
{% endblock content %}
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
</body>
</html>
I want to show my template underneath my content. But i appears above it. Even if i remove this peace of code:
{% if messages %}
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
{% endif %}
the message shows up above the code. The styling is always the same. Django ignores my Code in my template. Do anyone has a solution for this issue?

Django 3.1 Best way to Conditionally load statics

I'm new to django and currently trying to find an effective way to load css files in the django templating language depending on the current page. The url pattern is :
path('invoices/', views.list, name='invoice_list'),
path('invoices/new/', views.create, name='create_invoice'),
path('invoices/<int:pk>/', views.edit, name='edit_invoice'),
path('invoices/<int:pk>/lines/new', views.create_line, name='create_line'),
path('invoices/<int:pk>/lines/<int:fk>', views.update_line, name='update_line'),
In the base.html, this is what i'm doing:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'invoice/css/common.css' %}">
{% if request.path == '/invoices/'%}
<link rel="stylesheet" href="{% static 'invoice/css/invoice_list.css' %}">
{% endif %}
{% if '/invoices/' in request.path and request.path != '/invoices/' and '/line/' not in request.path %}
<link rel="stylesheet" href="{% static 'invoice/css/edit_invoice.css' %}">
{% endif %}
<title>My invoices </title>
</head>
the {% if '/invoices/' in request.path and request.path != '/invoices/' and '/line/' not in request.path %} is not great at all and would like to know if there's a nicer way to do it regexp style maybe?
Thanks in advance.
You should not put such logic in the template. Instead you should use the block and extends template tag for this purpose. See Template inheritance [Django docs]:
In base.html:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'invoice/css/common.css' %}">
{% block extra_css %}
{% endblock extra_css %}
<title>My invoices </title>
</head>
Now in the template which is rendered when if request.path == '/invoices/' is true, you will fill this block as:
{% extends "base.html" %}
...
{% block extra_css %}
<link rel="stylesheet" href="{% static 'invoice/css/invoice_list.css' %}">
{% endblock extra_css %}
Similarly In the template which is rendered when if '/invoices/' in request.path and request.path != '/invoices/' and '/line/' not in request.path is true you you will fill the block as:
{% extends "base.html" %}
...
{% block extra_css %}
<link rel="stylesheet" href="{% static 'invoice/css/edit_invoice.css' %}">
{% endblock extra_css %}

Include (inherit) only specific block of template

My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.
table_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}
menu_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded.
How do I include only a specific block from specific template?
Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.
For example with this base:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>
And this child:
{% extends "base.html" %}
The result will be:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>
With this child template:
{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}
The result is:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>
Now specific to your problem:
if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
if each sidebar is different for each page, don't bother with include and just override the slot

Django template error for include tag

I am getting an error message while adding a template to base.html with include tag. All other templates are rendered properly with no issues but this got issues while I try to add it. The error is:
RuntimeError at /
maximum recursion depth exceeded in __instancecheck__
Request Method: GET
Request URL: http://127.0.0.1:8000/
Django Version: 1.8.5
Exception Type: RuntimeError
Exception Value:
maximum recursion depth exceeded in __instancecheck__
Exception Location: C:\Python27\lib\site-packages\django\template\base.py in __init__, line 743
Python Executable: C:\Python27\python.exe
Python Version: 2.7.11
Python Path:
['C:\\Users\\TOSHIBA\\market\\market',
'C:\\WINDOWS\\SYSTEM32\\python27.zip',
'C:\\Python27\\DLLs',
'C:\\Python27\\lib',
'C:\\Python27\\lib\\plat-win',
'C:\\Python27\\lib\\lib-tk',
'C:\\Python27',
'C:\\Python27\\lib\\site-packages',
'c:\\python27\\lib\\site-packages']
My template I am trying to add includes:
{% extends 'base.html' %}
{% block content %}
<!-- recommend slider -->
<section class="recommend container">
<div class="recommend-product-slider small-pr-slider wow bounceInUp">
<div class="slider-items-products">
<fieldset class="box-title">
<legend>Recommended </legend>
</fieldset>
<div id="recommend-slider" class="product-flexslider hidden-buttons">
<div class="slider-items slider-width-col3">
{% include 'products/product.html' with object_list=products col_class_set="col-sm-2" %}
</div>
</div>
</div>
</div>
</section>
<!-- End Recommend slider -->
{% endblock content %}
My base.html code is as follows:
{% load static %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dressika Theme">
<meta name="author" content="Harira Ijaz">
<title>Dressika Online Shopping Store</title>
<!-- Favicons Icon -->
<link rel="icon" href="{% static 'images/favicon.png' %}" type="image/x-icon" />
<link rel="shortcut icon" href="{% static 'images/favicon.png' %}" type="image/x-icon" />
<!-- Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS Style -->
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/revslider.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/owl.theme.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/font-awesome.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/product-detail.css' %}" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
</head>
<body class="cms-index-index">
<div class="page">
{% include 'header.html' %}
{% include 'navbar.html' %}
</div>
<!-- header service -->
<!-- end header service -->
{% include 'slider.html' %}
{% include 'offerbanner.html' %}
{% include 'container.html' %}
{% include 'featured.html' %}
{% include 'trending.html' %}
{% include 'middleslider.html' %}
{% include 'recommend.html' %}
{% include 'latestblog.html' %}
{% include 'footer.html' %}
</div>
{% include 'java.html' %}
</body>
</html>
Your template extends from base.html which then needs to include the template, which then needs to extend from base.html which then needs to include the template, which then needs to extend from base.html then needs to include the template, which then needs to extend from base.html...
Remove {% extends 'base.html' %} from the template you're trying to include as well as any reference to blocks.

Django template inheritance

I've 2 templates. Here is the listing:
1)base.html
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id=header> some info </div>
{% block content %}{% endblock %}
</body>
</html>
2)person.html
{% extends "base.html" %}
{% block title %}Personal info{% endblock %}
{% block content %}
<div>{{person.first_name}}</div>
{% endblock %}
I use template "person.html" in my view
def person_view(request):
person = get_object_or_404(Person, pk=1)
return render(request, "resume/person.html", {'person': person})
urls.py:
url(r'^$', views.person_view, name='person'),
The problem is, when I run the server, and trying to open page with this url, there is only text and information from "person.html" template(meaning of "person.first_name"). Information from "base.html" and css styles don't used.
You forgot double quotes:
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
should be:
<link type="text/css" rel="stylesheet" href="{% static 'resume/stylesheet.css'%}"/>
Edit
here as well:
<div id=header>
should be:
<div id="header">