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 %}
Related
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?
I am still very new to Django and I want to add the HTML for a navigation bar and its respective CSS into my base HTML file. Here is what I did up till now:
in app/base.html:
{% extends "BritIntlSchl/navbar.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav%}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
and in app/navbar.html:
{% block nav%}
<div class="wrap">...</div>
{% endblock nav%}
I am pretty much lost here. I am sure that putting{% block nav%} around the nav bar does nothing.
How do you suggest I go about this?
I'm using Django 2.1.
When one uses the extend template tag one cannot have any HTML outside any block as then there would be the confusion of where to put this HTML (In fact the template engine would completely ignore that HTML). So when you extend /navbar.html at most you can fill the block named nav which you are overriding and filling with nothing. What you want to do is to use the include template tag to include the navbar into base.html:
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav %}{% include 'app/navbar.html' %}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
Note: We put the {% block nav %} there not because navbar.html would fill it but because some page extending base.html might want a
custom navbar.
navbar.html:
<div class="wrap">...</div>
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.
I have a base template which all other templates extend:
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Other templates will extend this template, but not completely:
site.html:
{% extends base.html %}
{% block body %}
...
{% endblock %}
The title block is not extended. Can I give it a default value in this case, within base.html?
It appears that it is sufficient to just place the content to be replaced within the block in the base.html file. So "extends" does not really extend (in the sense of append to) the existing content of a block, but rather replaces it.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
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 %}