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?
Related
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 %}
so I tried loading Bootstrap to Django. But since I wanted to customize the styling with scss, instead of putting the CDN url in header, I replaced it with a separate css file which has all of the Bootstrap stylings. Here's the code.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/main.css">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
I have the correct /style/main.css file, I've checked it by ctrl+clicking it. As mentioned, the file has ALL of the Bootstrap stylings.
#charset "UTF-8";
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
### AND SO ON ###
However my Django page wouldn't reflect it. When I hit refresh I don't see any styling.
But when I restore the CDN url, Bootstrap is normally applied. I have no idea what the problem is. I would very much appreciate your help. :)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static 'style/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
settings.py
add this in your settings.py
STATIC_URL = '/static/'
if your static folder follow this path Projectname/static or if you have static folder in your app too Projectname/appname/static then you can append it in list like 2nd one
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),os.path.join(BASE_DIR, 'app_name/static'),]
To load static files in Django
Usually we keep our static files (a.js, b.css, c.png) in a folder named static.
Suppose you have the main.css file in static/css/main.css
Then change your code as
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Check out How to serve static files django
I have my base html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default value</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body >
{% block content %}{% endblock %}
</body>
</html>
And I have my template:
{% extends "base.html" %}
{% block content %}
I want to be able to rewrite contents of
<head> tag . And use default head tag if no head content is present. How do I do this? For example on some pages I want to use additional meta tags and different title. But I need default title and meta tags if no <head> tag is specified
Having some parts of the base template inside {% block %}{% endblock %}, you actually have some default contents.
<head>
<meta charset="UTF-8">
<title>{% block title %}default value{% endblock title %}</title>
{% block meta %} <!-- default meta -->
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
{% endblock %}
</head>
When you extend your base.html, you just need to call these blocks..
In case you want to overwrite one of these tags, just call the tag:
{% block title %}I destroy the default title {% endblock %}
{% block meta %}I destroy the default tag {% endblock %}
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
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.